Web前端►Extension►WebExtension

什么是ContentScripts

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/31/%E4%BB%80%E4%B9%88%E6%98%AFContentScripts/

摘要

本文主要讲述了：

  1. 什么是 ContentScripts
  2. 注入方式
  3. JavaScript 运行时
  4. 同源政策
  5. 站点访问权限
  6. Chrome

正文

什么是 ContentScripts

  • BackgroundScripts 可以使用所有的 WebExtension API，但无法访问修改 DOM
  • ContentScripts 可以访问修改 DOM，但只能使用部分的 WebExtension API

示例：

1
2
3
// ContentScripts 可以使用的 API
// 注：无法使用`tabs`相关的 API
console.log(browser);

注入方式

共有 3 种注入方式：

  1. 使用manifest.json中的content_scripts字段声明，命中时注入 ContentScripts
  2. 使用contentScripts.register()声明，命中时注入 ContentScripts
  3. 使用tabs.executeScript()注入

matches

模式匹配数组

run_at

注入时机：

  • document_start 正在加载当前页的 DOM
  • document_end 当前页的 DOM 已加载完成，正在加载当前页的其他资源
  • document_idle 当前页的 DOM 和其他资源均已加载完成

默认值：document_idle

all_frames

是否注入标签页中的所有非空白 iframe

默认值：false

match_about_blank

是否注入标签页中的空白 iframe 和标签页打开的空白子标签页

默认值：false

注：

  1. 须配合all_frames使用
  2. 开启后，Firefox 会注入空白标签页，而 Chrome 不会

JavaScript 运行时

ContentScripts 可以访问修改 HTML 元素 （包括 CSR 创建的普通元素和自定义元素）的特性（attribute）和 DOM 的原生属性（property），就像普通的网页脚本那样，但 ContentScripts 无法访问修改 DOM 的自定义属性

两者的 JavaScript 运行时是互相独立的。ContentScripts 无法看到由网页脚本定义的 JavaScript 变量，网页脚本也无法看到由 ContentScripts 定义的 JavaScript 变量

注意：如果实在想让 ContentScripts 访问到由网页脚本定义的 JavaScript 变量，可以在 ContentScripts 中创建一个<script>并将其注入页面

同源政策

和普通网页一样，ContentScripts 也受同源政策的限制

但如果扩展申请host许可，ContentScripts 就可以跨源通信

站点访问权限

作用：在matches的基础上，进一步约束 ContentScripts 的注入

选项：

  • 单击时：尽管已经命中，但只有在用户单击 browserAction 时，才会注入 ContentScripts
  • 在特定站点上：尽管已经命中，但只有在特定站点上，才会自动注入 ContentScripts；在其他站点上，需要用户单击 browserAction 才会注入
  • 在所有站点上：只要命中，就会自动注入 ContentScripts。默认值

注：即使没有配置browser_action，只要命中了，browserAction 的图标就会亮，尽管此时browser.browserAction === undefined

Chrome

注意：

  1. 从 Chrome 73 版本开始，即使扩展申请host许可，ContentScripts 也不能跨源通信

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/31/%E4%BB%80%E4%B9%88%E6%98%AFContentScripts/

本文对你有帮助？请支持我

支付宝
微信