Chrome扩展点击触发时如何从index.html经content.js向background.js传数据

• 普通网页的JS执行上下文和Chrome扩展的Content Script上下文完全隔离，Content Script中定义的函数无法被网页直接调用，你在网页按钮上写的onclick="sendData()"会尝试访问网页全局的sendData函数，自然触发未定义报错。
• 如果你使用的是Manifest V3版本的扩展，chrome.pageActionAPI已被废弃，也会引发额外报错。

1. 修改index.html代码 #

移除按钮的内联onclick事件，给按钮加id方便Content Script绑定事件：

<input type="text" id='fullname' />
<button id="submitBtn">Submit</button>

2. 修改Content.js代码 #

在Content Script中主动给按钮绑定点击事件，触发数据发送逻辑：

// 等待页面DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const submitBtn = document.getElementById('submitBtn');
  if (submitBtn) {
    submitBtn.addEventListener('click', sendData);
  }
})

function sendData(){
    const fullName = document.getElementById('fullname').value.trim();
    chrome.runtime.sendMessage({ "message": fullName }, (res) => {
      console.log('收到background返回：', res);
    })
}

3. 适配Background.js代码（Manifest V3版本） #

Manifest V3中已合并pageAction和browserAction为action，修改对应API：

chrome.runtime.onMessage.addListener(receiver);

function receiver(data, sender, sendResponse) {
  if (data.message !== undefined) {
    chrome.action.show(sender.tab.id);
    sendResponse(`${data.message} is submitted as your fullname`)
  }
  // 若有异步逻辑需加return true保持消息通道开启
  // return true
}

4. 核对manifest.json配置 #

确保你已正确配置Content Script的匹配规则和必要权限，Manifest V3参考配置如下：

{
  "manifest_version": 3,
  "name": "数据传递示例",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*.html"], // 替换为你实际的index.html访问地址匹配规则
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

如果你的index.html是本地file协议打开的，需要在扩展管理页面打开对应扩展的「允许访问文件网址」开关，否则Content Script不会注入。

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