Chrome扩展弹窗按钮点击时如何实现页面输入框填充？

我正在开发一款Chrome扩展，想要实现点击扩展弹窗的提交按钮时，把弹窗输入框里的值填充到当前页面的表单中。目前点击弹窗按钮的submit函数没法实现弹窗和页面的通信，之前用chrome.action.onClicked.addListener能完成表单填充，但换成弹窗按钮点击就不行了。

测试用的示例站点是RoboForm的表单测试页，目标是填充名为02frstname的名字输入框。

相关代码 #

index.html（弹窗页面） #

<body>
  <form>
    <div>
      <label for="f_name">First name</label>
      <input name="f_name" />
    </div>
    <div>
      <label for="l_name">Last name</label>
      <input name="l_name" />
    </div>
    <button id="submit-btn" type="button">Fill values</button>
  </form>
  <script src="script.js" type="module"></script>
</body>

contentScript.js（原错误代码） #

const submit = document.getElementById("submit-btn");

submit.addEventListener("click", async () => {
  const fnameInput = document.getElementsByName("02frstname");
  fnameInput[0]?.value = "example";
});

manifest.json #

{
  "manifest_version": 3,
  "name": "Form example",
  "version": "1.0",
  "action": { "default_popup": "index.html"},
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ],
  "permissions": ["activeTab", "scripting", "storage"]
}

核心问题是上下文混淆：content script运行在网页的上下文里，根本访问不到弹窗页面的DOM元素（比如submit-btn）。之前用chrome.action.onClicked能工作，是因为这个事件是扩展层面的回调，而现在你错误地把弹窗的按钮监听写在了content script里。

正确实现步骤如下：

1. 修改弹窗脚本（script.js） #

把按钮监听逻辑移到弹窗自己的脚本里，通过Chrome扩展API向当前页面传递数据并执行填充：

const submitBtn = document.getElementById('submit-btn');

submitBtn.addEventListener('click', async () => {
  // 获取弹窗输入框的值
  const firstName = document.querySelector('input[name="f_name"]').value;
  
  // 获取当前活跃标签页
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // 直接在活跃页面执行填充逻辑
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: (name) => {
      // 此代码运行在网页上下文
      const fnameInput = document.getElementsByName('02frstname')[0];
      if (fnameInput) {
        fnameInput.value = name;
      }
    },
    args: [firstName] // 将弹窗输入值传递给执行函数
  });
});

2. 清理无用代码 #

删除contentScript.js中原有的按钮监听代码（因为它根本访问不到弹窗的按钮），如果后续不需要其他content script逻辑，甚至可以从manifest.json中移除content_scripts配置。

3. 验证权限 #

你的manifest.json已经包含activeTab和scripting权限，满足功能需求，无需修改。

原理说明 #

• 弹窗是独立的浏览器上下文，和网页、content script不共享DOM，不能直接跨上下文访问元素。
• chrome.scripting.executeScript可以在指定标签页的网页上下文执行代码，直接操作页面DOM。
• 通过args参数可以把弹窗中获取的用户输入传递到执行函数中，实现弹窗到页面的数据传递。

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