Firefox侧边栏扩展按钮点击无法执行browser.tabs.executeScript问题

问题描述 #

开发Firefox侧边栏扩展时，点击侧边栏按钮后，autoFill函数内的browser.tabs.executeScript语句未执行，仅侧边栏内的DOM操作生效，无法向目标网页注入脚本实现表单自动填充。

核心问题排查与修复方案 #

1. 按钮事件绑定错误 #

panel.html中按钮的ID是boutton，但panel.js里用bouttonAutoFillForm绑定事件，导致点击事件根本未触发。

修复：修正panel.js中的按钮选择器：

document.getElementById("boutton").addEventListener("click", autoFill);

2. Content Script文件名/路径错误 #

panel.js中指定注入的文件是content_script.js，但panel.html里引入的是content-scritpt.js（拼写错误：scritpt少了字母p），且路径未明确文件位置。

修复：

• 统一文件名：将content-scritpt.js重命名为content_script.js
• 明确脚本路径：如果content_script.js在sidebar目录下，注入时指定完整路径：

  browser.tabs.executeScript({
    file: "sidebar/content_script.js"
  })
  

3. 错误的脚本加载上下文 #

manifest.json中把panel.js同时放在background脚本和侧边栏页面中，导致脚本重复加载且上下文混乱；同时侧边栏页面直接引入了content script，导致脚本在侧边栏而非目标网页运行。

修复：

• 修改manifest.json，移除background字段中的panel.js：

  {
    "manifest_version": 2,
    "name": "Web page annotator",
    "description": "Displays a sidebar that lets you take notes on web pages.",
    "version": "1.0",
    "browser_specific_settings": {
      "gecko": {
        "strict_min_version": "54.0a1"
      }
    },
    "sidebar_action": {
      "default_icon": "icons/star.png",
      "default_title": "Facturation",
      "default_panel": "sidebar/panel.html"
    },
    "permissions": [
      "activeTab",
      "tabs",
      "contextMenus"
    ],
    "commands": {
      "_execute_sidebar_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+Y"
        }
      }
    }
  }
  

• 修改panel.html，移除content script的引入（仅通过executeScript注入到目标网页）：

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="panel.css"/>
    <script src="jquery-3.7.0.min.js"></script>
  </head>
  <body>
    <div>
      <button id="boutton">Cliquez ICI</button>    
      <p class="content">Le text s'affichera ici</p>
    </div>
    <script src="panel.js"></script>
    <script src="jquery-csv/src/jquery.csv.js"></script>
  </body>
  </html>
  

4. 添加错误捕获便于调试 #

在executeScript后添加错误捕获，方便排查注入失败原因：

function autoFill() {
  $(".content").text("It's working only for the html here");
  browser.tabs.executeScript({
    file: "sidebar/content_script.js"
  }).catch(error => {
    console.error("脚本注入失败:", error);
    $(".content").text("注入失败: " + error.message);
  });
}

最终content_script.js示例 #

确保内容脚本针对目标网页的表单字段编写逻辑：

// 根据目标网页实际表单ID调整选择器
document.querySelector("#username").value = "自动填充用户名";
document.querySelector("#password").value = "自动填充密码";

测试注意事项 #

• 修改后重新加载扩展，确保manifest.json生效
• 右键点击侧边栏选择「检查」，打开侧边栏控制台查看错误信息
• 确认目标网页未限制扩展脚本注入（如隐私模式、特殊网页）

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