【学习】【02】谷歌浏览器插件 - 向三方网站里面注入自己的脚本

[yanlele]

我们可以通过谷歌浏览器插件，在别人的网站上注入自己的脚本。 我们叫这个脚本为 Content Scripts 。

content_scripts 到底有多强

就这么说吧， 他可以直接操作任意页面的 dom ， 所以其强大可想而知了吧。

内容脚本在将扩展程序文件声明为可通过网络访问的资源后，便可访问它们。它们可以直接访问以下扩展程序 API：

• dom
• i18n
• storage
• runtime.connect()
• runtime.getManifest()
• runtime.getURL()
• runtime.id
• runtime.onConnect
• runtime.onMessage
• runtime.sendMessage()

内容脚本无法直接访问其他 API。但它们可以通过与扩展程序的其他部分交换消息来间接访问它们。

如何使用？

这里我们默认阁下已经看了我的第一篇文章， 浏览器插件入门：https://juejin.cn/post/7362046148708679715

所以我们直接开始

在manifest.json直接申明

{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["https://*/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ],
 ...
}

这里进行一下简单的参数说明：

名称	类型	说明
matches	字符串数组	必需。用于指定要将内容脚本注入到哪些网页。详细信息请参阅文档中的匹配模式说明及排除网址的相关文档。
css	字符串数组	可选。列出要注入到匹配页面的 CSS 文件。元素将以数组中的顺序进行注入。
js	字符串数组	可选。列出要注入到匹配页面的 JavaScript 文件。这些文件的顺序将决定注入的顺序。每个字符串都对应扩展根目录中的资源相对路径。前导斜杠将被自动剪除。
run_at	RunAt 枚举	可选。用于指定何时将脚本注入到网页中。 RunAt是一个枚举，指定了注入时机。默认值为 document_idle，表示在文档完成加载后注入。
match_about_blank	boolean	可选。规定脚本是否应对 about:blank 帧进行注入，这些 is 父帧或源框架与 matches 项中定义的模式之一相匹配。值为 false时不进行注入。默认值为 false。
match_origin_as_fallback	boolean	可选。规定脚本是否应注入由与 matches 项匹配的来源创建的 iframe，像 about:、data:、blob: 和 file: 等可能有不同架构的情况。详见文档中的相关说明。
world	ExecutionWorld 枚举	可选。用于指定执行脚本的 JavaScript 环境。 ExecutionWorld是枚举类型，定义了不同环境。默认值为 ISOLATED，表示在一个隔离的世界中进行脚本执行。详见文档中的隔离环境中作业说明。

配置好 JS 之后， 我们就可以直接写我们注入脚本的内容了。 直接编写 JS 即可。

编写脚本， 统计当前访问的技术文章的字数 与 使用的图片链接

这个就没有啥好说的了。 直接代码上墙： content-script.js

"use strict";
const $article = document.getElementById("article-root");
if ($article) {
  const wordLength = $article.innerText.length;
  const $imgs = $article.querySelectorAll("img");
  const $container = document.createElement("div");
  const $wordsElement = document.createElement("p");
  $wordsElement.innerText = `统计该文章字符：共计 ${wordLength} 个字符`;
  $container.append($wordsElement);
  const $desc = (document.createElement("p").innerText = "提取该文章的所有图片");
  $container.append($desc);
  for (const img of $imgs) {
    const src = img.getAttribute("src");
    if (src) {
      const $p = document.createElement("p");
      const $a = document.createElement("a");
      $a.setAttribute("href", src);
      $a.setAttribute("target", "_blank");
      $a.innerText = src;
      $p.append($a);
      $container.append($p);
    }
  }
  document.getElementsByClassName("author-info-block")?.[0]?.insertAdjacentElement("afterend", $container);
}

最基础的 dom 操作， 没有啥好说的。 来看看效果吧。