整體效果

流沙插件主題切換演示：https://live.csdn.net/v/228888

源碼

https://github.com/kaimo313/quicksand

實現步驟

1、新建 manifest.json 文件

新建一個 chrome 文件夾，在文件夾里新建 manifest.json 文件，在文件里輸入下面代碼，給插件取名叫流沙，版本是 1.0。

{"name": "流沙","version": "1.0","manifest_version": 3 }

這里需要注意的是 manifest_version 必須是整數 2 或者 3，我們這里使用 3。

2023 年 1 月后 MV2 插件不能再繼續更新，MV2 插件將不能在 Chrome 中運行；2023 年 6 月后 即使使用企業策略，MV2 擴展程序也不再在 Chrome 中運行。目前已經不能再發布 MV2 版本的插件，相比于 MV2，MV3 有諸多不同，例如權限控制，API 的變動，發起請求的方式等。

2、將插件添加到擴展程序中

打開 chrome 瀏覽器，輸入 chrome://extensions/，點擊加載已解壓的擴展程序，選擇剛剛新建的 chrome 文件夾即可。

選擇好文件夾之后，流沙這個插件就被加載到瀏覽器中了。

3、配置 service-worker.js

background script 是擴展的事件處理程序；它包含對擴展很重要的瀏覽器事件的偵聽器。它處于休眠狀態，直到觸發事件，然后執行指示的邏輯。有效的后臺腳本僅在需要時加載，并在空閑時卸載。

先在 manifest.json 配置：

{"name": "流沙","version": "1.0","manifest_version": 3,"background": {"service_worker": "service-worker.js"} }

跟 manifest.json 同級新建 service-worker.js 文件，里面添加下面代碼

console.log("流沙---> service-worker", chrome);chrome.action.onClicked.addListener(function () {console.log('點擊了流沙插件圖標'); });

然后我們刷新擴展程序頁面，發現有個錯誤

錯誤如下：Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')，沒有onClicked方法

chrome.action 文檔：必須在 manifest 中聲明才能使用此 api

在 manifest 中配置 action

{"name": "流沙","version": "1.0","manifest_version": 3,"background": {"service_worker": "service-worker.js"},"action": {} }

刷新清除掉錯誤之后，點擊 Service Worker，就可以看到打印的日志

點擊右上角的流沙插件，就會打印日志出來。

如果沒有這個圖標的可以添加上來。

4、實現點擊插件圖標切換主題 icon

manifest.json 配置

{"name": "流沙","version": "1.0","manifest_version": 3,"description": "用于 CSDN 博客網站的暗黑和明亮主題切換","author": "kaimo","background": {"service_worker": "service-worker.js"},"icons": {"16": "icons/logo.png","48": "icons/logo.png", "128": "icons/logo.png"},"action": {"default_icon": {"32": "icons/popup_light_32.png"},"default_title": "流沙：明亮模式"} }

service-worker.js 添加代碼

console.log("流沙---> service-worker", chrome);let themeType = "light";chrome.action.onClicked.addListener(function () {console.log('點擊了流沙插件圖標');// 修改初始值themeType = themeType === "light" ? "dark" : "light";chrome.action.setIcon({path: "icons/popup_" + themeType + "_32.png"});chrome.action.setTitle({title: themeType === "light" ? "流沙：明亮模式" : "流沙：暗黑模式"}); });

添加 icons 文件夾跟圖片

效果如下：

流沙：明亮模式

點擊切換到流沙：暗黑模式

5、讓 CSDN 的網頁加載插件

先匹配 csdn 網站，在 manifest.json 里添加 content_scripts 的配置

"content_scripts": [{"matches": ["https://*.blog.csdn.net/*"],"js": ["content-script.js"]} ]

然后新建 content-script.js 文件，添加代碼

alert("匹配到了 CSDN 博客網站")

測試效果，訪問 csdn 博客網站的時候，就會彈出。其他網址就不會。

6、插件里實現樣式主題的切換

我們發現 id 為 userSkin 的 dom 元素的類不同可以顯示不同的主題的效果。

暗黑主題效果：skin-blackwhale user-skin-Black

明亮主題效果：skin-yellow user-skin-White

具體代碼如下：

manifest.json 文件

{"name": "流沙","version": "1.0","manifest_version": 3,"description": "用于 CSDN 博客網站的暗黑和明亮主題切換","author": "kaimo","background": {"service_worker": "service-worker.js"},"icons": {"16": "icons/logo.png","48": "icons/logo.png", "128": "icons/logo.png"},"action": {"default_icon": {"32": "icons/popup_light_32.png"},"default_title": "流沙：明亮模式"},"content_scripts": [{"matches": ["https://*.blog.csdn.net/*"],"js": ["content-script.js"]}],"permissions": ["storage", "tabs"] }

service-worker.js 文件

console.log("流沙---> service-worker", chrome);// 設置主題類型 function setThemeType(type) {chrome.storage.local.set({ theme: type }, () => {console.log('設置主題模式為：', type);}); }// 通過 tabs 發送消息改變主題類型 // tabs api，必須被注冊在 manifest 的 permissions 字段中給插件使用，這里不然獲取不到 url。 function changeThemeByTabs(themeType){chrome.tabs.query({}, tabs => {console.log("獲取 tabs", tabs);for (var i = 0; i < tabs.length; i++) {console.log(`tabs[${i}].url`, tabs[i].url);try {const location = new URL(tabs[i].url);const host = location.host;console.log(host, host.includes("blog.csdn.net"));if (host.includes("blog.csdn.net")) {console.log(tabs[i].id, tabs[i], themeType);// 向選項卡發送消息chrome.tabs.sendMessage(tabs[i].id, {theme: themeType}, response => {// 將打印出"接收到主題切換";console.log(response);});}}catch (e) {console.error("報錯--->", e);}}}); }// 添加插件監聽被安裝事件 // 在 onInstalled 監聽器內部，擴展使用 storage API 設置一個值。這將允許多個擴展組件訪問該值并進行更新。 // 大部分 API，包括 storage api，必須被注冊在 manifest 的 permissions 字段中給插件使用。 chrome.runtime.onInstalled.addListener(() => {console.log("插件已安裝");// 設置主題類型setThemeType("light"); });// 添加圖標點擊事件監聽 chrome.action.onClicked.addListener(() => {console.log('1、點擊了流沙插件圖標');// 獲取主題類型chrome.storage.local.get(["theme"], res => {console.log("2、緩存的theme", res);let { theme } = res;// 修改初始值theme = theme === "light" ? "dark" : "light";console.log("3、切換 theme 為：", theme);// 設置圖標chrome.action.setIcon({path: "icons/popup_" + theme + "_32.png"});// 設置titlechrome.action.setTitle({title: theme === "light" ? "流沙：明亮模式" : "流沙：暗黑模式"});// 設置主題類型setThemeType(theme);// 通過 tabs 發送消息改變主題類型changeThemeByTabs(theme);}); });

content-script.js 文件

console.log("流沙---> content-script", chrome);// 設置明亮主題 function setLightThemes() {document.getElementById("userSkin").className = "skin-yellow user-skin-White"; }// 設置暗黑主題 function setDarkThemes() {document.getElementById("userSkin").className = "skin-blackwhale user-skin-Black"; }// 切換主題 function switchThemes(type = "light") {if(type === "dark") {setDarkThemes();} else {setLightThemes();} }// 初始化設置 chrome.storage.local.get(['theme'], res => {let { theme } = res;console.log("初始化設置 theme--->", theme);switchThemes(theme); });// 監聽消息 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {console.log("監聽消息--->", request, sender, sendResponse);// 接收信息返回給發送方sendResponse("接收到主題切換");const { theme } = request;switchThemes(theme); });

說明

目前這里只實現了博客首頁的部分內容樣式，感興趣的可以自己研究完善。

另外就是打包擴展程序 crx 文件的生成。第一次可以不用選私有秘鑰 .pem 文件。

瀏覽器會自動生成的

確定就會生成，不過這個 crx 不能直接放到擴展程序里使用。

該擴展程序未列在 Chrome 應用商店中，并可能是在您不知情的情況下添加的。

參考 manifest.json 所有配置項

官網中給出所有配置項：

{// Required - 通俗易懂"manifest_version": 3,"name": "My Extension","version": "versionString",// 『重點』action配置項主要用于點擊圖標彈出框，對于彈出框接受的是html文件"action": {"default_title": "Click to view a popup","default_popup": "popup.html"}// 通俗易懂"default_locale": "en","description": "A plain text description","icons": {...},"author": ...,// 『重點』下面將出現的background.js 配置service work"background": {// Required"service_worker": "service-worker.js",},// 『重點』下面將出現content_script.js 應用于所有頁面上下文的js"content_scripts": [{"matches": ["https://*.nytimes.com/*"],"css": ["my-styles.css"],"js": ["content-script.js"]}],// 使用/添加devtools中的功能"devtools_page": "devtools.html",/*** 三個permission* host_permissions - 允許使用擴展的域名* permissions - 包含已知字符串列表中的項目 【只需一次彈框要求允許】* optional_permissions - 與常規類似permissions，但由擴展的用戶在運行時授予，而不是提前授予【安全】* 列出常見選項* {* activeTab: 當擴展卡選項被改變需要重新獲取新的權限* tabs: 操作選項卡api（改變位置等）* downloads: 訪問chrome.downloads API 的權限 便于下載但還是會受到跨域影響* history: history api權限* storage: 訪問localstorage/sessionStorage權限* }*/"host_permissions": ["http://*/*", "https://*/*"],"permissions": ["tabs"],"optional_permissions": ["downloads"],// 內部彈出可選頁面 - 見fehelper操作頁"options_page": "options.html","options_ui": {"chrome_style": true,"page": "options.html"}, }

參考資料

• 這個前端的小眾市場蘊含著巨大財富
• 最新版 V3 chrome 插件開發~ demo + 坑

總結

以上是生活随笔為你收集整理的怎么从零编写一个 v3 版本的 chrome 浏览器插件实现 CSDN 博客网站的暗黑和明亮主题切换?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。