Chrome扩展如何通过popup.html触发当前活动标签页函数执行

• 脚本上下文完全混淆
  你将同一个script.js同时注册为后台常驻脚本、又在popup页面中引入，但Chrome扩展的几个运行环境是完全沙箱隔离的：
  • 后台脚本运行在独立的扩展后台线程，根本访问不到popup页面里的按钮DOM，这段绑定事件的代码在后台运行时直接会抛出「找不到元素」的空引用错误
  • popup内运行的脚本属于弹窗的私有上下文，和用户当前打开的网页标签页也不互通，你现在写的alert只会在弹窗内部弹出，完全无法操作活动标签页的内容
• 缺少页面操作的注入逻辑
  要通过弹窗控制当前标签页的内容，不能直接在popup脚本里写DOM操作代码，必须通过chrome.tabs.executeScriptAPI向目标标签页注入代码，或者提前注入content script通过消息通信触发操作。
• manifest存在语法错误
  browser_action配置块末尾多余了一个尾逗号，在部分低版本Chrome中会直接导致manifest解析失败，扩展无法正常加载。

如果你的需求只是点击弹窗按钮触发单次页面操作，不需要常驻后台逻辑，可以直接移除冗余的background配置，拆分不同场景的脚本文件避免冲突：

1. 修正后的manifest.json，移除错误逗号和不必要的后台脚本配置：

{
  "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"
    }
  }
}

2. 新建popup.js作为弹窗专属脚本，实现点击按钮后向当前活动标签页注入操作逻辑（这里对应你按钮的「显示密码」需求）：

document.getElementById("myButton").addEventListener("click", () => {
  // 获取当前窗口的活动标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTab = tabs[0];
    // 向活动标签页注入代码，代码将在网页上下文内执行
    chrome.tabs.executeScript(activeTab.id, {
      code: `
        // 以下是操作当前网页的逻辑，可按需替换
        document.querySelectorAll('input[type="password"]').forEach(pwdInput => {
          pwdInput.type = 'text';
        });
        alert('密码已切换为明文显示');
      `
    }, () => {
      // 注入执行完成后关闭弹窗
      window.close();
    });
  });
});

3. 修正popup.html，移除原来错误的脚本引入，替换为新的popup.js，同时修正viewport标签的排版错误：

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

补充说明：如果后续需要添加常驻后台逻辑，请单独新建background.js存放后台代码，不要和弹窗脚本、页面注入脚本共用文件，三个运行环境完全隔离，无法直接互相访问变量或DOM。

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