前言
前几天，看到了郭神讲述了关于自己如何让Android版本Edge浏览器支持插件的文章，深受震感。当时我在想那该如何开发一个浏览器插件呢？这是我的盲区，因此便有了这篇文章。
创建插件
我们在任意位置创建一个文件夹，这里命名为HelloTest。
在此目录中创建一个名为 manifest.json 的文件。这个配置文件描述了扩展程序的功能和配置。类似Android中的AndroidManifest文件。代码如下所示：
{
"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中展示一段文字，代码如下所示：
<html>
<body>
<h1>Hello Test</h1>
</body>
</html>
当前项目目录如下所示：
我们只要确保manifest配置文件在根目录，其他诸如html、js、png的目录是可以任意调整的。
现在，我们就可以尝试去运行这个插件了。
如何运行插件
在我们将插件发布到应用商店之前，可以采用加载本地插件的方式。我们在浏览器中输入chrome://extensions/，跳转到扩展程序页面。选择加载刚刚创建的HelloTest目录。
加载完成之后我们可以看到写在配置文件中的插件信息。
我们将插件固定到工具栏就可以看到这个插件了，点击插件如下图所示。
这样我们实现了第一个HelloTest 插件。
实现预计阅读时长功能
其实到这里，对于擅长前端的同学来说就可以完全自由发挥了，但是作为一个不擅长前端的Android开发者来说，还想把自己的第一个插件做的有用一点。那我们就来实现预计阅读文章时长的功能吧。即：打开一篇文章，显示预计阅读完这篇文章的时间。
修改配置文件如下所示：
{
"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代码如下所示：
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);
}
这里我们查找相关元素，在对应元素下插入，预计阅读时长。代码修改后，需要刷新下插件。现在我们来打开掘金等文章网站，效果如下图所示。
这样我们就实现了一个非常简单且实用的浏览器插件。
总结
凡事全力以赴，而后顺其自然。我们下一篇见～
原文链接：https://juejin.cn/post/7350549827675127820 作者：黄林晴
