Google Chrome 扩展操作打开或当前选项卡的 DOM

Question

好的，JavaScript/jQuery 我知道了，我可以用它来做我想做的事情。然而，我目前正在尝试做的是使用打开/当前选项卡的 DOM，我想知道这是否可能，或者我所做的所有工作仅限于我为它提供“背景”的 html 的扩展名。 html" 或等效的。

对于今天尝试对谷歌扩展进行罢工的尝试，我想在页面上拍摄图像并将它们存储在一个数组中，以通过我想添加到页面底部的栏从它创建类似幻灯片的效果将其附加到打开/当前选项卡的现有 DOM。然后我想在 DOM 中“隐藏”元素，直到栏关闭。

所以我的第一个问题是，这样的事情是否可能，我可以以这种方式操作 DOM 并从中读取。

Answer 1

Content Scripts 是在页面和 Chrome 扩展程序之间的环境中运行的脚本。这些脚本会在每次页面加载时加载，并且可以完全访问页面的 DOM。 DOM 方法，例如 document.getElementById()，就好像它们是页面的一部分一样。

全局window 对象（包括frames 和HTMLIFrameElement.contentWindow）是唯一不能直接被内容脚本读取的对象。

内容脚本以defined in the manifest file 在每个页面上运行。在"content_scripts" 部分指定match pattern，以定义内容脚本必须在哪些页面上运行。还可以将此模式添加到 "permissions" 部分，以解锁修改页面 DOM 的功能。

注意：这些脚本只能使用a few of the chrome.* APIs（如chrome.extension.sendRequest与background page通信）。

---

在 background page 中，页面的 DOM 不能直接访问。您可以使用chrome.extension.executeScript 在任意选项卡中注入脚本，但您将无法获得对元素的直接 引用。为此，需要内容脚本。