google-chrome - 从扩展程序访问网页的 `window`/DOM/HTML

Question

我正在编写一个 Chrome 扩展程序并尝试覆盖 <div>单击 popup.html 文件中的按钮即可覆盖当前网页。

当我访问document.body.insertBefore时popup.html 中的方法它覆盖 <div>在弹出窗口上，而不是在当前网页上。

我是否必须在background.html 和popup.html 之间使用消息传递才能访问网页的DOM？我想在 popup.html 中完成所有操作，并且如果可能的话也使用 jQuery。

Answer 1

问题:扩展页面(弹出窗口、选项、MV2 中的背景页面等)与网页分离，并且它们有自己的 DOM，document , window ，以及 chrome-extension://网址。

• 请注意，Service Worker 根本没有任何 DOM/文档/窗口。
• 检查扩展的每个上下文 use its own devtools .

解决方案:使用 content script 访问网页或与其内容交互。

• 内容脚本在网页中执行，而不是在扩展程序中执行。
• 默认情况下，内容脚本是隔离的，请参阅 how to run code in page context (又名主要世界)。
• 不要在扩展程序页面中加载内容脚本。

方法1.声明式

manifest.json:

"content_scripts": [{
  "matches": ["*://*.example.com/*"],
  "js": ["contentScript.js"]
}],

它将在页面加载时运行一次。发生这种情况后，请使用 messaging .

警告!它不能发送 DOM 元素、Map、Set、ArrayBuffer、类、函数等。它只能发送与 JSON 兼容的简单对象和类型，因此您需要手动提取所需的数据并将其作为简单数组或对象传递。

方法 2. 程序化

• ManifestV3:

  使用chrome.scripting.executeScript在扩展脚本(如弹出窗口)中，根据需要将内容脚本/函数注入(inject)到选项卡中。

  此方法的结果是内容脚本中的最后一个表达式，因此可用于提取数据。数据必须与 JSON 兼容，请参阅上面的警告。

  必填permissions在manifest.json中:

  • "scripting" - 强制；
  • "activeTab" - 理想场景，适合响应用户操作(通常是单击工具栏中的扩展图标)。安装扩展程序时不显示任何权限警告。

  如果不可能实现理想情况，请将允许的站点添加到 host_permissions在manifest.json中:

  • "*://*.example.com/"加上您想要的任何其他网站。

  • "<all_urls>"或"*://*/"由于广泛的主机权限，这些会将您的扩展程序置于 Chrome 网上应用店中超慢审核队列中。

• ManifestV2 与上述的差异:

  • 使用chrome.tabs.executeScript .
  • 指定 permissions 中的站点.