Firefox自动填充扩展点击无响应问题排查求助

我是浏览器扩展开发新手，正在开发一款Firefox自动填充扩展，目标是为特定网页（https://comm.proxy.com/send/bulk-app/*）的表单填充预定义值。目前无报错，但点击扩展按钮后表单未被填充，已尝试多种方法仍未定位问题。

目标网页表单元素属性：

• id="templateName"
• class="form-control"
• name="templateName"
• type="text"
• data-reactid=".0.2.3.1.0"

现有代码如下：

manifest.json #

{
    "manifest_version": 2,
    "name": "AutoFills Extension",
    "version": "1.0",
    "description": "https://comm.proxy.com/send/bulk-app/*",
    "permissions": [
      "activeTab",
      "https://comm.proxy.com/send/bulk-app/*"
    ],
    "browser_action": {
      "default_popup": "popup.html"
    },
    
    "content_scripts": [
      {
        "matches": ["https://comm.proxy.com/send/bulk-app/*"],
        "js": ["content.js"] 
      }
    ]
}

content.js #

document.addEventListener("DOMContentLoaded", function () {
  
  const predefinedData = {
    "TemplateName": "FLEX/NEWSFEED",
    "dropdownValue": "CRITICAL" 
  };
  
   
    function autofillForm() {
      const form = document.querySelector("form-control"); // Replace with your specific form selector
      if (form) {
        // Autofill text fields
        form.querySelector("input[name='templateName']").value = predefinedData.TemplateName;
        const dropdown = form.querySelector("select[name='Priority']");
        if (dropdown) {
          for (let option of dropdown.options) {
            if (option.text === predefinedData.dropdownValue) {
              option.selected = true;
              break;
            }
          }
          
        }
      }
    }
  
    autofillForm();
  });

popup.html #

<!DOCTYPE html>
<html>
<head>
  <title>AutoFill Extension</title>
  <style>
    button {
      padding: 10px;
      background-color: #0074b3;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>AutoFill Extension</h2>
  <p>Click the button below to autofill the form:</p>
  <button id="autofillButton">Autofill Form</button>

  <script src="popup.js"></script>
</body>
</html>

popup.js #

document.addEventListener("DOMContentLoaded", function () {
    const autofillButton = document.getElementById("autofillButton");
  
    autofillButton.addEventListener("click", function () {
      // Send a message to your content script to initiate autofill
      browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        browser.tabs.sendMessage(tabs[0].id, { command: "autofill" });
      });
    });
  });

1. Content脚本未监听Popup的触发指令 #

当前content.js仅在页面加载时执行一次填充逻辑，但需求是点击Popup按钮后触发填充，因此需要添加消息监听器，接收Popup发来的指令后执行填充。

2. 元素选择器错误 #

• document.querySelector("form-control")写法错误，form-control是类名，需添加.前缀，即.form-control；
• 目标输入框有明确的id="templateName"，直接通过id选择更精准，避免嵌套选择器的冗余和出错概率。

3. 适配React类框架的状态更新 #

如果目标页面基于React等框架开发，直接修改input.value仅会改变DOM显示，无法触发框架内部状态更新，需手动触发input事件让框架感知值变化。

修正后的代码 #

content.js

const predefinedData = {
  "TemplateName": "FLEX/NEWSFEED",
  "dropdownValue": "CRITICAL" 
};

function autofillForm() {
  // 直接通过ID选择目标输入框
  const templateInput = document.getElementById("templateName");
  if (templateInput) {
    templateInput.value = predefinedData.TemplateName;
    // 触发input事件，适配React等框架
    templateInput.dispatchEvent(new Event('input', { bubbles: true }));
  }

  // 处理优先级下拉框
  const dropdown = document.querySelector("select[name='Priority']");
  if (dropdown) {
    for (let option of dropdown.options) {
      if (option.text === predefinedData.dropdownValue) {
        option.selected = true;
        // 触发change事件
        dropdown.dispatchEvent(new Event('change', { bubbles: true }));
        break;
      }
    }
  }
}

// 监听Popup发来的消息，触发填充逻辑
browser.runtime.onMessage.addListener((message) => {
  if (message.command === "autofill") {
    autofillForm();
  }
});

manifest.json（微调优化）

{
    "manifest_version": 2,
    "name": "AutoFills Extension",
    "version": "1.0",
    "description": "Auto-fill forms on https://comm.proxy.com/send/bulk-app/*",
    "permissions": [
      "activeTab",
      "https://comm.proxy.com/send/bulk-app/*"
    ],
    "browser_action": {
      "default_popup": "popup.html"
    },
    "content_scripts": [
      {
        "matches": ["https://comm.proxy.com/send/bulk-app/*"],
        "js": ["content.js"] 
      }
    ]
}

额外检查点 #

• 确认当前页面URL完全匹配https://comm.proxy.com/send/bulk-app/*规则；
• 在Firefox的about:debugging中加载扩展后，打开开发者工具的「控制台」，切换到「内容脚本」标签查看是否有报错；
• 检查下拉框的name属性确实为Priority，可通过页面开发者工具验证。

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