【Chrome Extension】一、CSDN计时扩展设计

重点内容

内容脚本 content_scripts

1、manifest.json文件配置

{"manifest_version": 3,		# *依赖Chrome插件版本"name": "FeiFeiYeChuan-Tools-CSDN Article Reading Time", # *插件名称"version": "1.0", # *插件版本"description": "Add the reading time to Chrome Extension documentation articles","icons": { # 不同情况下显示的图标"16": "images/logo.png","32": "images/logo.png","48": "images/logo.png","128": "images/logo.png"},"content_scripts": [ # content内容{"js": ["scripts/content.js"],"css": ["css/content.css"],"matches": ["https://*.blog.csdn.net/*","https://blog.csdn.net/*"]}]
}

如上 content_scripts （内容脚本：运行读取和修改网页内容的脚本） 主要用于在固定 matches 网页下的执行脚本内容，他们独立于其他扩展程序和托管页面，拥有独立的js，css脚本。

文件目录

1、整体目录

2、manifest.json

{"manifest_version": 3,"name": "FeiFeiYeChuan-Tools-CSDN Article Reading Time","version": "1.0","description": "Add the reading time to Chrome Extension documentation articles","icons": {"16": "images/logo.png","32": "images/logo.png","48": "images/logo.png","128": "images/logo.png"},"content_scripts": [{"js": ["scripts/content.js"],"css": ["css/content.css"],"matches": ["https://*.blog.csdn.net/*","https://blog.csdn.net/*"]}]
}

3、scripts/content.js

onload = function () {console.log("content.js已加载");const article = document.querySelector(".blog-content-box");console.log('article:', article)// `document.querySelector` may return null if the selector doesn't match anything.if (article) {const text = article.textContent;// console.log('text:', text)const wordMatchRegExp = /\w/g; // Regular expressionconst words = text.matchAll(wordMatchRegExp);// matchAll returns an iterator, convert to array to get word countconst wordCount = [...words].length;console.log("wordCount:", wordCount)const readingTime = Math.round(wordCount / 200);const badge = document.createElement("p");// Use the same styling as the publish information in an article's headerbadge.classList.add("color-secondary-text", "type--caption", 'light');badge.textContent = `⏱️ ${readingTime} min read`;// Support for API reference docsconst heading = document.querySelector(".title-article");heading.insertAdjacentElement("afterend", badge);}
}

4、css/content.css

.light{color: #77a000;
}