第五部分 — 内容脚本与页面交互 DOM 访问模式与安全桥接

JamesYoung79712026-03-12 19:14

12.1 目的

有些页面操作无法直接在内容脚本中完成：

调用页面 JS 函数
与页面拥有的变量进行交互

本节展示了一个安全的"桥梁"模式。

12.2 使用场景 / 避免场景

使用场景：当你需要在页面世界运行代码时。

避免场景：仅需一个隔离世界的 DOM 变更即可。如果可以从服务工作者 orchestrating，这是在页面的 JavaScript 环境中运行代码最可靠的方式。

sw.js:

javascript 复制代码

async function runInPageWorld(tabId) {
  const [{ result }] = await chrome.scripting.executeScript({
    target: { tabId },
    world: "MAIN", // page world (page CSP applies)
    func: () => {
      // Runs in the page's JS environment.
      return { href: location.href, title: document.title };
    },
  });
  return result;
}

复制代码

注释：

需要 scripting 权限加上主机访问权限（host_permissions 或 activeTab）。
主程序世界代码未被隔离；请保持其简洁，并且切勿暴露机密信息。

12.4 回退方案：postMessage 桥接（内容脚本 ↔ 页面）

这种模式简单易行，但同时也较为脆弱：向页面世界注入 <script> 标签可能会被页面的 CSP 阻止。

content.js： CODE_BLOCK_56

最小示例

一个最小的 MV3 安全异步消息处理器（适合作为模板使用）： CODE_BLOCK_57

12.5 常见问题

postMessage 操作务必谨慎（始终验证 type + 形状）。
向页面泄露机密信息（切勿在页面中暴露扩展程序的机密信息）。
MAIN 世界并非隔离；页面代码可能会互相干扰（请尽量保持简洁）。

12.6 检查清单

$\] 使用严格的消息类型$
$\] 在可能的情况下，优先使用独立世界的 DOM 操作$
独立世界：独立世界
chrome.scripting（MAIN 世界 vs ISOLATED 世界）（官方）： https://developer.chrome.com/docs/extensions/reference/api/scripting