Google chrome extension 可选地插入内容脚本

内容脚本可以通过在扩展清单文件中声明以编程方式或永久方式注入。程序注入需要主机权限，这通常由浏览器或页面操作授予

在我的使用案例中，我想在没有用户操作的情况下注入gmail、outlook.com和yahoo mail网站。我可以通过声明它们的所有清单来实现，但这样做需要对这些帐户进行所有数据访问。一些用户可能只想授予outlook.com，而不想授予gmail。程序注入不起作用，因为我需要知道何时注入。使用制表符权限也需要其他权限

---

有没有什么好方法可以选择性地注入web站点

没有适当的权限，您无法在站点上运行代码。幸运的是，您可以将主机权限添加到清单文件中，以声明它们是可选的，并且仍然允许扩展使用它们

作为对用户手势的响应，您可以使用请求其他权限。此API只能在扩展页（背景页、弹出页、选项页等）中使用。从Chrome 36.0.1957.0开始，所需的用户手势也会从内容脚本中传递过来，因此如果您愿意，您可以从内容脚本中添加一个单击事件侦听器，并使用它将请求发送到后台页面，而后台页面又会调用

选项卡中的可选代码执行 在获得主机权限（可选或强制）后，您必须以某种方式将内容脚本（或CSS样式）注入匹配页面中。根据我的喜好，有几种选择：

使用该操作在页面中插入内容脚本。如果您想了解如何使用此API，请阅读

使用API（例如）检测用户何时导航到页面，然后使用在选项卡中插入内容脚本（或插入样式）

使用API（）检测页面可能已更改，并使用

chrome.tabs.executeScript

在页面中插入内容脚本

我强烈推荐选项1，因为它是专门为这个用例设计的。注意：此API是在Chrome38中添加的，但仅适用于可选权限。尽管文档中有“”，但该API实际上在stable上受支持。最初的想法是这样的，但那次审查从未出现，所以现在这个API已经运行了近两年

第二个和第三个选项类似。两者的区别在于，使用

webNavigation

API会添加额外的权限警告（“读取浏览历史记录”）。对于此警告，您将获得一个可以有效过滤导航的API，因此可以最小化

chrome.tabs.executeScript

调用的数量

如果您不想在权限对话框中添加这个额外的权限警告，那么您可以盲目地尝试在每个选项卡上注入。如果您的扩展具有该权限，则注入将成功。否则，它将失败。这听起来不是很有效，而且不是。。。好的一面是，此方法不需要任何附加权限

---

通过使用后两种方法中的任何一种，内容脚本的设计方式必须能够处理多个插入（例如）。还支持插入框架（

allFrames:true

），但前提是允许您的扩展访问选项卡的URL（或框架的URL，如果已设置）。

由于现有答案已经存在几年了，因此可选的插入现在更容易，也更简单。它表示要有条件地注入新文件，可以使用以下代码：

// The lines I have commented are in the documentation, but the uncommented
// lines are the important part

//chrome.runtime.onMessage.addListener((message, callback) => {
//   if (message == “runContentScript”){

        chrome.tabs.executeScript({
          file: 'contentScript.js'
        });

//   }
//});

---

您将需要进行此操作。

我将此分为两部分

程序脚本注入 有一个新的脚本可以通过编程注册内容脚本，它们将完全像清单中定义的

content\u脚本那样加载：

browser.contentScripts.register({
匹配：['https://your-dynamic-domain.example.com/*'],
js:[{file:'content.js'}]
});

此API仅在Firefox中可用，但有一个可供使用的API

获取新权限
通过使用
chrome.permissions.request
可以添加新的域，您可以在其中插入内容脚本。例如：

//在内容脚本或选项页中
document.querySelector（'button'）。addEventListener（'click'，（）=>{
chrome.permissions.request({
来源：['https://your-dynamic-domain.example.com/*']
}，已授予=>{
如果（授予）{
/*使用contentScripts.register*/
}
});
});

您必须在
manifest.json
中添加
可选的\u权限
，以允许请求新的来源：

{
    "optional_permissions": [
        "http://*/*",
        "https://*/*"
    ]
}


我还为您和最终用户编写了一些工具来进一步简化此过程，例如
. 他们将在下次浏览器启动时自动注册您的脚本，并允许用户删除新的权限和脚本。
Woo，new
declarativeContent
操作！很酷。不过文档中的信息相互矛盾。“自Chrome 38”和“警告：此操作仍处于试验阶段，在稳定的Chrome版本上不受支持。”@Xan Yes，请参阅我答案中的链接错误：。这样做的目的是让它在审查完成之前保持稳定，但该功能无论如何都会登陆。这些文档并不是完全矛盾的，因为可以在稳定的构建中禁用功能（例如，查看或）。@RobW您是否能够使用chrome.declarativeContent.RequestContentScript方法获取要注入的样式表？我的js文件正在正确注入，但我的css文件似乎根本没有通过RequestContentScript（{js:[…]，css:[…]}）注入@istan“css”似乎不起作用，我在这里报告：作为一种解决方法，您可以使用“js”在页面中插入
或
元素。这就是您的答案！只是想澄清一下，如果我以编程方式注册内容脚本，chrome是否会显示一条警告消息“CanReada”