我无法从 Chrome 扩展程序弹出窗口访问网页 DOM答案

【问题标题】：I can't access the web page DOM from a Chrome Extension pop up我无法从 Chrome 扩展程序弹出窗口访问网页 DOM
【发布时间】：2019-09-25 09:43:44
【问题描述】：

我正在努力访问我的 Chrome 扩展程序的网页 DOM。

在我制作的一个扩展中，我的扩展从 content.js 文件解析 DOM 没有问题。这发生在页面加载时。用户根本不需要交互/打开扩展，只需要在后台运行即可。

现在我正试图从一个按钮触发它。这意味着用户将在浏览器中单击扩展图标，popup.html 将显示一些 HTML（包括按钮）。

这就是我的问题所在。当我现在尝试访问 DOM（通过按钮的单击事件）时，它显示 popup.html 的 DOM，而不是网页（活动选项卡）。

因此，快速浏览一下文档（我愿意承认我对此感到困惑）表明这可能是权限问题。在我的 manifest.json 文件中，我添加了

"permissions": [
"activeTab"
],

这没有帮助:(

所以在这个新扩展中，我没有使用 background.js 或 content.js .. 我想这是问题所在，因为我调用的 javascript 嵌入在 HTML 弹出窗口中！这对我来说很有意义（至于我得到的行为）。

如何从 HTML 弹出窗口访问活动选项卡的 DOM

【问题讨论】：

访问页面 DOM 的唯一方法是使用内容脚本。由于您已设置activeTab 权限，因此您可以使用chrome.tabs.executeScript 通过省略第一个参数（tabId）将内容脚本注入活动选项卡。
水晶般清澈。谢谢@Titus。我是删除还是移到答案
我会添加一个答案。

标签： javascript google-chrome-extension

【解决方案1】：

访问页面 DOM 的唯一方法是使用内容脚本。由于您已设置activeTab 权限，因此您可以使用chrome.tabs.executeScript 通过省略第一个参数（tabId）将内容脚本注入活动选项卡。

这是一个例子：

chrome.tabs.executeScript({ file: "content.js" });

【讨论】：

【解决方案2】：

我遇到了同样的问题，我点击按钮打开一个弹出窗口，然后我如何访问弹出窗口的内容。是的，您将需要使用内容脚本，但我为完成此操作所做的一个技巧是，当弹出窗口打开时，使用 window.name 并获取该窗口的名称。然后您可以通过 var test = window.name('', 'name of that window') 引用该弹出窗口。然后您可以从 test.xml 中引用弹出窗口的 dom 元素。为我工作，如果我需要包含一些代码来更好地解释，请告诉我。

【讨论】：