给 CSDN 博客开发 Chrome 插件 - 阅读时间【含源码】

欢迎来到我的 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
1
2
3
4
5
在 manifest 文件中添加如下内容：

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the reading time to CSDN blog"
}
1
2
3
4
5
6
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"
  }
  ...
}
1
2
3
4
5
6
7
8
9
10
注意：强烈推荐图标使用 png 文件。除了 svg 之外，其他图片格式都支持。

content script 说明
从上一篇我们了解到，Chrome 插件有能力操作页面内容，而这个能力是由 content script 实现的。content script 是完全独立的，可以在不影响页面原本 JS 脚本逻辑的前提下完成相关的功能，同样也不会和其他 Chrome 插件相冲突。

更新 manifest 文件

{
  ...
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://blog.csdn.net/*"
      ]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
字段说明：

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
项目结构
至此，我们已经完成了阅读时间插件的开发，目录结构如下：

reading-time
├── images
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-32.png
│   └── icon-48.png
├── manifest.json
└── scripts
    └── content.js
1
2
3
4
5
6
7
8
9
插件验证
在 Chrome 插件管理中心加载编写好的插件，具体的操作过程可以参考：给 CSDN 博客开发 Chrome 插件 - 基础知识【含源码】

效果展示

总结
以上就是本文所有内容了，希望能对你有所帮助。经过本期的学习，我们开发给 CSND 博客开发了一个使用功能：阅读时间，希望在学到 Chrome 插件开发基础上，还能提升 CSDN 博客阅读体验。

如果你喜欢本文，也请务必点赞、收藏、评论、转发，这会对我有非常大的帮助。请我喝杯冰可乐也是极好的！

未完结，欢迎持续关注。下次见~

附件：给 CSDN 博客开发 Chrome 插件-阅读时间-源码
————————————————
版权声明：本文为CSDN博主「sanbaofengs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/baofs/article/details/129304457