前言

前几天，看到了郭神讲述了关于自己如何让Android版本Edge浏览器支持插件的文章，深受震感。当时我在想那该如何开发一个浏览器插件呢？这是我的盲区，因此便有了这篇文章。

创建插件

我们在任意位置创建一个文件夹，这里命名为HelloTest。

在此目录中创建一个名为 manifest.json 的文件。这个配置文件描述了扩展程序的功能和配置。类似Android中的AndroidManifest文件。代码如下所示：

json 复制代码

{
    "manifest_version": 3,
    "name": "HelloTest",
    "description": "this is my first Test",
    "version": "1.0",
    "action": {
      "default_popup": "hello.html",
      "default_icon": "png/time.png"
    }
  }

里面的属性不用多介绍，这是只提一下default_icon属性是我们配置的插件图标，default_popup属性是点击插件图标时弹出的页面。

我们在hello.html中展示一段文字，代码如下所示：

css 复制代码

<html>
  <body>
    <h1>Hello Test</h1>
  </body>
</html>

当前项目目录如下所示：

我们只要确保manifest配置文件在根目录，其他诸如html、js、png的目录是可以任意调整的。

现在，我们就可以尝试去运行这个插件了。

如何运行插件

在我们将插件发布到应用商店之前，可以采用加载本地插件的方式。我们在浏览器中输入chrome://extensions/，跳转到扩展程序页面。选择加载刚刚创建的HelloTest目录。

加载完成之后我们可以看到写在配置文件中的插件信息。

我们将插件固定到工具栏就可以看到这个插件了，点击插件如下图所示。

这样我们实现了第一个HelloTest 插件。

实现预计阅读时长功能

其实到这里，对于擅长前端的同学来说就可以完全自由发挥了，但是作为一个不擅长前端的Android开发者来说，还想把自己的第一个插件做的有用一点。那我们就来实现预计阅读文章时长的功能吧。即：打开一篇文章，显示预计阅读完这篇文章的时间。

修改配置文件如下所示：

json 复制代码

{
    "manifest_version": 3,
    "name": "HelloTest",
    "description": "this is my first Test",
    "version": "1.0",
    "action": {
      "default_popup": "hello.html",
      "default_icon": "png/time.png"
    },
   "content_scripts": [
{
"js": ["content.js"],
"matches":["*://*/*"]
}
]
}

我们使用content_scripts指定js的运行脚本，matches指定可运行的网站，但是因为我们要匹配网站元素，所以并不能确保所有网址都可以匹配成功。

content.js代码如下所示：

ini 复制代码

const article = document.querySelector("article");

if (article) {
  const text = article.textContent;
  const wordMatchRegExp = /[^\s]+/g; 
  const words = text.matchAll(wordMatchRegExp);
  const wordCount = [...words].length;
  const readingTime = Math.round(wordCount / 200);
  const badge = document.createElement("p");
  badge.classList.add("color-secondary-text", "type--caption");
  badge.textContent = `阿黄哥提醒你，阅读此文章预计需要 ${readingTime} 分钟`;
  const heading = article.querySelector("h1");
  const date = article.querySelector("time")?.parentNode;
  (date ?? heading).insertAdjacentElement("afterend", badge);
}

这里我们查找相关元素，在对应元素下插入，预计阅读时长。代码修改后，需要刷新下插件。现在我们来打开掘金等文章网站，效果如下图所示。

这样我们就实现了一个非常简单且实用的浏览器插件。

总结

凡事全力以赴，而后顺其自然。我们下一篇见～