如何让单个函数适配Chrome扩展选项页的多个输入元素？

嘿，这个场景我熟！要让你的按键设置函数支持多个输入框，其实核心就是给每个输入框加个唯一标识，然后让函数能识别并区分它们的配置。我给你整理了一套完整的修改方案，你可以直接套用：

第一步：修改popup.html的输入元素结构 #

给每个输入框和对应的隐藏span加上data-key属性，用它来标识这个输入框对应的是哪个导航功能（比如上一页、下一页），这样我们的函数就能区分不同的配置项了：

<!-- popup.html 示例结构 -->
<div class="key-config-group">
  <label>上一页导航按键：</label>
  <input type="text" data-key="navPrev" readonly>
  <span class="key-code" data-key="navPrev" style="display: none;"></span>
</div>
<div class="key-config-group">
  <label>下一页导航按键：</label>
  <input type="text" data-key="navNext" readonly>
  <span class="key-code" data-key="navNext" style="display: none;"></span>
</div>
<div class="key-config-group">
  <label>回到顶部按键：</label>
  <input type="text" data-key="navTop" readonly>
  <span class="key-code" data-key="navTop" style="display: none;"></span>
</div>

第二步：修改popup.js的事件处理函数 #

现在我们可以写一个通用的处理函数，批量给所有带data-key的输入框绑定事件，同时在触发时识别当前操作的是哪个输入框：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  // 批量获取所有带data-key的输入框
  const keyInputs = document.querySelectorAll('input[data-key]');
  
  // 给每个输入框绑定按键监听，同时加载已保存的配置
  keyInputs.forEach(input => {
    input.addEventListener('keydown', handleKeyInput);
    loadSavedKey(input);
  });
});

// 通用的按键处理函数
function handleKeyInput(e) {
  e.preventDefault(); // 阻止默认输入行为，避免输入框乱码
  
  const currentInput = e.target;
  const configKey = currentInput.dataset.key; // 获取当前输入框的标识
  const keyCode = e.keyCode;
  const displayKeyName = getReadableKeyName(keyCode); // 把键码转成用户看得懂的名称
  
  // 更新输入框显示和隐藏的span值
  currentInput.value = displayKeyName;
  const keyCodeSpan = document.querySelector(`span.key-code[data-key="${configKey}"]`);
  keyCodeSpan.textContent = keyCode;
  
  // 存储到localStorage，用configKey做区分，避免不同配置冲突
  localStorage.setItem(`navKey_${configKey}`, keyCode);
}

// 加载已保存的按键配置
function loadSavedKey(input) {
  const configKey = input.dataset.key;
  const savedKeyCode = localStorage.getItem(`navKey_${configKey}`);
  
  if (savedKeyCode) {
    input.value = getReadableKeyName(parseInt(savedKeyCode));
    input.nextElementSibling.textContent = savedKeyCode;
  }
}

// 辅助函数：把键码转成可读的按键名称（可以根据需求扩展）
function getReadableKeyName(keyCode) {
  const keyMapping = {
    37: '←',
    38: '↑',
    39: '→',
    40: '↓',
    8: 'Backspace',
    13: 'Enter',
    32: 'Space'
    // 可以继续添加更多键码对应的名称
  };
  return keyMapping[keyCode] || `Key(${keyCode})`;
}

第三步：修改内容脚本读取配置 #

现在内容脚本可以根据不同的configKey获取对应的键码，绑定对应的导航功能：

// content.js
document.addEventListener('keydown', (e) => {
  // 读取各个导航功能的键码
  const prevKeyCode = parseInt(localStorage.getItem('navKey_navPrev'));
  const nextKeyCode = parseInt(localStorage.getItem('navKey_navNext'));
  const topKeyCode = parseInt(localStorage.getItem('navKey_navTop'));
  
  // 匹配按键并执行对应功能
  if (e.keyCode === prevKeyCode) {
    e.preventDefault();
    // 执行上一页逻辑，比如：
    window.history.back();
  } else if (e.keyCode === nextKeyCode) {
    e.preventDefault();
    // 执行下一页逻辑，比如：
    window.history.forward();
  } else if (e.keyCode === topKeyCode) {
    e.preventDefault();
    // 执行回到顶部逻辑，比如：
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
});

核心思路说明 #

• 用data-key属性做唯一标识：让函数能精准区分每个输入框对应的配置项，后续新增功能只需要加新的data-key输入框就行，不用改核心函数
• 批量绑定事件：避免重复写绑定代码，扩展性更强
• 带标识的本地存储：用navKey_${configKey}作为存储键，确保不同配置不会互相覆盖
• 加载时恢复配置：提升用户体验，不用每次打开弹窗都重新设置

内容的提问来源于stack exchange，提问作者Fendo