Chrome Manifest V3 扩展中如何通过JavaScript点击网页按钮？

嘿，太懂你这种被Manifest V3的CSP限制卡得难受的感觉了！之前直接在扩展上下文里操作DOM点击按钮的方法确实行不通了，不过有几个简单直接的替代方案，比你说的解析href再注入脚本要省心多了：

方案一：用内容脚本（Content Script）直接操作 #

内容脚本运行在网页的隔离上下文里，完全可以直接访问DOM元素，这应该是最省心的方法。

1. 先在你的扩展里新建一个内容脚本文件，比如click-button.js：

// 找到按钮并点击
const button = document.getElementById("buttonId");
button?.click();

2. 然后在manifest.json里配置这个内容脚本，指定它要运行的网站：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"], // 替换成你要操作的网站
      "js": ["click-button.js"],
      "run_at": "document_idle" // 可选，指定脚本运行时机
    }
  ],
  "host_permissions": ["https://目标网站域名/*"]
}

这样当用户打开目标网站时，内容脚本就会自动运行，帮你点击按钮。如果需要手动触发（比如点击扩展图标再执行），可以把内容脚本改成监听扩展发来的消息，收到消息后再执行点击操作。

方案二：通过Service Worker调用chrome.scripting.executeScript #

如果需要从后台触发点击操作（比如点击扩展图标后执行），可以用这个方法，本质就是让后台脚本在网页的主上下文里执行一段点击脚本：

1. 先在manifest.json里添加必要的权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["scripting"],
  "host_permissions": ["https://目标网站域名/*"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {} // 配置扩展图标
}

2. 然后在background.js里写触发逻辑，比如监听扩展图标点击：

chrome.action.onClicked.addListener(async (tab) => {
  try {
    // 在当前标签页的主上下文执行点击脚本
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        const button = document.getElementById("buttonId");
        button?.click();
      }
    });
  } catch (err) {
    console.error("执行点击失败:", err);
  }
});

这个方法就是你之前想到的思路，亲测可行，而且代码量很小，完全不用绕解析href的弯路。

小提示 #

• 不管用哪种方法，都要确保host_permissions配置正确，不然扩展没有权限访问目标网站的DOM。
• 如果按钮的点击逻辑涉及到网页自身的JavaScript事件，这两个方法都能触发，因为是在网页的上下文里执行的，和用户手动点击效果一致。

你之前想的通过service worker在world context执行的思路完全正确，就是方案二的实现方式，比解析href的方法简单太多啦！

内容来源于stack exchange