Chrome扩展如何通过popup.html按钮触发当前活动标签页操作

• 脚本上下文完全混淆：你将同一个script.js同时配置为后台background脚本、又在popup.html中引入。background运行在扩展独立的后台上下文，根本访问不到popup内的按钮DOM；同时popup本身的运行上下文和当前打开的网页标签页也是完全隔离的，直接在popup/background里写的console.log、alert只会在popup/后台的作用域触发，根本不会在当前网页环境执行。
• JSON语法错误：manifest.json末尾多了冗余逗号，严格JSON格式不允许 trailing comma，会直接导致扩展加载失败。
• 未使用扩展专属注入API：要在当前活动标签页的网页环境执行代码，必须调用Chrome扩展提供的tabs.executeScript接口注入脚本，无法直接跨上下文调用网页环境的API。

manifest.json #

移除冗余的background配置（当前需求不需要常驻后台脚本，避免脚本冲突），删掉末尾多余逗号：

{
  "name": "Test",
  "description": "Test",
  "version": "1.0.0",
  "manifest_version": 2,
  "minimum_chrome_version": "46",
  "permissions": ["tabs", "<all_urls>"],
  "browser_action": {
    "default_title": "Test",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/icon-16.png",
      "48": "/images/icon-48.png",
      "128": "/images/icon-128.png"
    }
  }
}

popup.html #

修正viewport属性的冗余空格，引入专门给popup用的脚本文件，不要和其他上下文共用脚本：

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
<body>
  <button id="myButton"> TEST </button>
  <script type="text/javascript" src="./popup.js"></script>
</body>
</html>

popup.js #

绑定按钮点击事件，获取当前活动标签页后注入脚本到网页上下文执行：

document.getElementById("myButton").addEventListener("click", function() {
  // 查询当前窗口处于激活状态的标签页
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    const activeTab = tabs[0];
    // 向目标标签页注入代码，代码执行环境为当前网页的上下文
    chrome.tabs.executeScript(activeTab.id, {
      code: `
        console.log("弹窗按钮触发，当前网页环境输出");
        alert("网页环境弹窗提示");
      `
    });
  });
});

• Chrome扩展的三类运行上下文（后台background、popup弹窗、普通网页）是完全隔离的，各自有独立的DOM、window对象，不能直接跨上下文访问变量/操作元素。
• 注入到网页的脚本输出的console.log会显示在对应网页的开发者工具控制台里，popup自身脚本的输出需要在popup弹窗上右键选择「检查」打开专属控制台才能看到，不要混淆两个调试入口。
• 不同上下文使用的脚本建议分开命名存储，避免同一份脚本在不同上下文重复执行引发预期外的错误。

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