如何基于Manifest 3构建Chrome扩展捕获网页被点击元素列表？

核心思路 #

在Manifest 3规范下，后台脚本以Service Worker形式运行，无法直接注入代码监听页面点击。正确做法是通过**内容脚本（Content Script）**注入到GitHub页面，监听点击事件后将元素信息传递给后台，再由后台写入chrome.storage.local存储。

1. 配置manifest.json（Manifest 3标准） #

需声明必要权限、内容脚本匹配规则及后台Service Worker：

{
  "manifest_version": 3,
  "name": "GitHub点击捕获工具",
  "version": "1.0",
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["*://*.github.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

• matches：限定仅在GitHub域名下注入内容脚本
• permissions：申请storage权限用于持久化存储点击记录
• background.service_worker：指定后台运行的Service Worker脚本

2. 编写内容脚本content.js #

在GitHub页面内监听全局点击事件，提取元素关键信息并发送给后台：

// 监听页面内所有点击事件
document.addEventListener('click', (event) => {
  const target = event.target;
  // 提取元素核心信息（可按需扩展字段）
  const elementInfo = {
    tagName: target.tagName,
    id: target.id,
    className: target.className,
    textContent: target.textContent.trim().slice(0, 100), // 截取文本避免存储过大
    pageUrl: window.location.href,
    clickTime: Date.now()
  };

  // 将数据发送给后台Service Worker
  chrome.runtime.sendMessage({ type: 'CLICK_RECORD', data: elementInfo });
});

3. 编写后台脚本background.js #

接收内容脚本的消息，将点击记录存入chrome.storage.local的列表中：

// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'CLICK_RECORD') {
    // 读取现有存储记录，无则初始化空数组
    chrome.storage.local.get('clickRecords').then((result) => {
      const records = result.clickRecords || [];
      records.push(message.data);
      // 将更新后的列表写回存储
      chrome.storage.local.set({ clickRecords: records }).then(() => {
        console.log('点击记录已保存');
      });
    });
  }
});

关键修正说明 #

• 你之前用的chrome.action.onClicked是监听扩展图标的点击事件，并非页面内元素点击，逻辑完全不符，需替换为内容脚本监听页面点击。
• Manifest 3中已废弃chrome.tabs.executeScript，改用内容脚本注入方式实现页面交互。
• 内容脚本与页面DOM共享，但JS上下文隔离，必须通过chrome.runtime.sendMessage与后台通信传递数据。

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