如何访问网页 DOM 而不是扩展页面 DOM? [英] How to access the webpage DOM rather than the extension page DOM?

问题描述

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

当我从 popup.html 中访问 document.body.insertBefore 方法时，它会覆盖弹出窗口上的

，而不是当前网页.

我是否必须在 background.html 和 popup.html 之间使用消息传递才能访问网页的 DOM?如果可能的话，我想在 popup.html 中做所有事情，并使用 jQuery.

解决方案

扩展页面/脚本(例如 browser_action 弹出窗口或 ManifestV2 后台脚本)有自己的 DOM、document、window 和 chrome-extension:// URL(使用 devtools for that part 来检查它).ManifestV3 Service Worker 没有任何 DOM/文档.

您需要一个内容脚本来访问网页的DOM 并与选项卡的内容进行交互.内容脚本将作为该页面的一部分在选项卡中执行，而不是作为扩展的一部分.

方法 1. 声明式

manifest.json:

content_scripts":[{匹配":[*://*.example.com/*"]，js":[contentScript.js"]}],

它会在页面加载时运行一次.发生这种情况后，使用 messaging 但请注意，它不能发送 DOM 元素、Map、Set、ArrayBuffer、类、函数等 - 它只能发送与 JSON 兼容的简单对象和类型，因此您需要手动提取所需数据并将其作为简单数组或对象传递.

方法 2. 程序化

• ManifestV2:

  使用 chrome.tabs.executeScript 按需注入内容脚本.

  此方法的回调接收内容脚本中最后一个表达式的结果，因此可用于提取必须与 JSON 兼容的数据，请参阅上面的方法 1 注释.

  manifest.json 中所需的权限:

  • 最佳情况:activeTab"，适用于对用户操作的响应(通常是单击工具栏中的扩展图标).安装扩展程序时不显示权限警告.

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

  • 最坏情况:"" 或 "*://*/", "http://*/", "https://*/" - 当提交到 Chrome 网上应用店时，所有这些都会将您的扩展程序放入超慢的审核队列中，因为范围广泛主机权限.

• ManifestV3 与上述的区别:

  使用 chrome.scripting.executeScript.

  manifest.json 中的必需权限:

  • 脚本" - 强制
  • "activeTab" - 理想的场景，参见上面 ManifestV2 的注释.

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

I'm writing a Chrome extension and trying to overlay a <div> over the current webpage as soon as a button is clicked in the popup.html file.

When I access the document.body.insertBefore method from within popup.html it overlays the <div> on the popup, rather than the current webpage.

Do I have to use messaging between background.html and popup.html in order to access the web page's DOM? I would like to do everything in popup.html, and to use jQuery too, if possible.

解决方案

Extension pages/scripts such as the browser_action popup or ManifestV2 background script have their own DOM, document, window, and a chrome-extension:// URL (use devtools for that part of the extension to inspect it). ManifestV3 service worker doesn't have any DOM/document.

You need a content script to access DOM of web pages and interact with a tab's contents. Content scripts will execute in the tab as a part of that page, not as a part of the extension.

Method 1. Declarative

manifest.json:

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

It will run once when the page loads. After that happens, use messaging but note, it can't send DOM elements, Map, Set, ArrayBuffer, classes, functions, and so on - it can only send JSON-compatible simple objects and types so you'll need to manually extract the required data and pass it as a simple array or object.

Method 2. Programmatic

• ManifestV2:

  Use chrome.tabs.executeScript to inject a content script on demand.

  The callback of this method receives results of the last expression in the content script so it can be used to extract data which must be JSON-compatible, see method 1 note above.

  Required permissions in manifest.json:

  • Best case: "activeTab", suitable for a response to a user action (usually a click on the extension icon in the toolbar). Doesn't show a permission warning when installing the extension.

  • Usual: "*://*.example.com/" plus any other sites you want.

  • Worst case: "<all_urls>" or "*://*/", "http://*/", "https://*/" - when submitting into Chrome Web Store all of these put your extension in a super slow review queue because of broad host permissions.

• ManifestV3 differences to the above:

  Use chrome.scripting.executeScript.

  Required permissions in manifest.json:

  • "scripting" - mandatory
  • "activeTab" - ideal scenario, see notes for ManifestV2 above.

  If ideal scenario is impossible add the allowed sites to host_permissions in manifest.json.

这篇关于如何访问网页 DOM 而不是扩展页面 DOM?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！