欢迎来到我的 Chrome 插件系列教程第三篇。
我们经过学习上期文章(给 CSDN 博客开发 Chrome 插件 - 基础知识【含源码】)了解了 Chrome 插件核心 manifast 文件的结构、字段含义。在第二部分,通过一个 hello extension 小插件的开发,学会了整个插件的开发调试流程。
目标
本期我们就来学习为 CSND 博客开发一个更加实用的插件-阅读时间。该插件的主要功能是统计 CSDN 博客的阅读时间,将计算出的阅读时间显示在标题之下的位置,效果如下:
知识点
- 复习 Chrome 插件的 manifest;
- 为 Chrome 插件添加图标;
- 如何把自定义内容插入页面;
- 正则表达式使用;
- Chrome 插件权限。
- 友情提示:如果你是第一次看本系列文章,强烈建议用几分钟时间先看上一篇,给 CSDN 博客开发 Chrome 插件-基础知识【含源码】,熟悉 Chrome 插件开发的全流程之后,再回来继续本期内容。
插件开发
本文所有的代码都可以在**附件:给 CSDN 博客开发 Chrome 插件-阅读时间-源码**中获取(如果没有找到资源,那一定是 CSDN 还没有审核完成,不要慌张,稍后就来)
初始化工程
# 创建工程目录
$ mkdir read-time && cd mkdir read-time
# 新建 manifast 文件
$ touch manifast
在 manifest 文件中添加如下内容:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to CSDN blog"
}
manifest 字段说明:
manifest_version:插件基础库版本
name:插件名称
version:插件版本
description:插件说明
创建图标
为了让我们的插件更加美观,这次我们给插件添加上图标。
在 read-time 目录下新建目录:images。可以从附件:给 CSDN 博客开发 Chrome 插件-阅读时间-源码中获取图片资源
然后,在 manifest 文件中添加如下内容:
{
...
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
...
}
注意:强烈推荐图标使用 png 文件。除了 svg 之外,其他图片格式都支持。
content script 说明
从上一篇我们了解到,Chrome 插件有能力操作页面内容,而这个能力是由 content script 实现的。content script 是完全独立的,可以在不影响页面原本 JS 脚本逻辑的前提下完成相关的功能,同样也不会和其他 Chrome 插件相冲突。
更新 manifest 文件
{
...
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://blog.csdn.net/*"
]
}
]
}
字段说明:
js:指定 content script 文件。可以放在工程目录下的任何位置;
matches:指定可以注入脚本的页面。页面 url 规则是:<scheme>://<host><path>
,这三个部分都支持正则表达式的通配符:*
。
阅读时间处理
content script 可以使用 DOM API 读取页面内容。
根据我们功能需求,我们首先需要找到 CSDN 博客正文,然后通过使用正则表达式获取正文文字,然后通过算法计算出大概的阅读时间,最后将时间结果插入到页面中。
创建 scripts/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].join('').length;
// 计算大致阅读时间
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement('p');
badge.classList.add('color-secondary-text', 'type--caption');
badge.innerHTML = `⏱️ ${readingTime} min read`;
article.insertAdjacentElement('beforebegin', badge);
}
项目结构
至此,我们已经完成了阅读时间插件的开发,目录结构如下:
reading-time
├── images
│ ├── icon-128.png
│ ├── icon-16.png
│ ├── icon-32.png
│ └── icon-48.png
├── manifest.json
└── scripts
└── content.js
插件验证
在 Chrome 插件管理中心加载编写好的插件,具体的操作过程可以参考:给 CSDN 博客开发 Chrome 插件 - 基础知识【含源码】
效果展示
总结
以上就是本文所有内容了,希望能对你有所帮助。经过本期的学习,我们开发给 CSND 博客开发了一个使用功能:阅读时间,希望在学到 Chrome 插件开发基础上,还能提升 CSDN 博客阅读体验。
如果你喜欢本文,也请务必点赞、收藏、评论、转发,这会对我有非常大的帮助。请我喝杯冰可乐也是极好的!
未完结,欢迎持续关注。下次见~