暗黑模式类热门插件

1. 引言Chrome 插件扩展程序是运行在 Chrome 浏览器中的小型软件程序能够扩展浏览器功能、提升工作效率甚至彻底改变网页的使用体验。比如很多人用过的Dark Reader可以一键把几乎所有网站变成暗黑模式保护眼睛、降低亮度、自定义对比度。它背后并没有什么黑魔法核心依然是 Manifest、内容脚本、后台服务和消息通信。本文将从零开始以“做一个迷你版 Dark Reader”为案例带你完整走一遍 Chrome 插件开发流程从项目结构、暗色注入、配置存储到消息通信和权限申请。2. 环境准备开发前准备Chrome 浏览器最新稳定版MV3Manifest V3支持最完整VS Code推荐装 JSON / JavaScript 高亮即可Node.js可选用 Vite、Webpack 或本地服务时才需要一个测试网站比如新闻站、文档站方便看暗色效果3. 认识插件核心文件一个基础 Chrome 插件通常包含manifest.json插件身份证声明名称、版本、权限、入口background.jsMV3 里是 Service Worker管全局事件content.js注入网页直接操作 DOM / CSSpopup.html点工具栏图标出现的设置面板styles/dark.css暗黑模式样式本例新增以 Dark Reader 类插件来说content script 负责“把页面变黑”popup 负责“开关和强度”background 负责“跨页面状态”。4. 编写第一个插件迷你暗黑模式项目目录mini-dark-reader/ ├── manifest.json ├── popup.html ├── popup.js ├── background.js ├── content.js └── dark.cssmanifest.json{ manifest_version: 3, name: Mini Dark Reader, version: 1.0.0, description: 网站启暗黑模式, action: { default_popup: popup.html, default_icon: { 16: icon16.png, 48: icon48.png } }, permissions: [activeTab, scripting, storage], host_permissions: [all_urls], background: { service_worker: background.js }, content_scripts: [ { matches: [all_urls], css: [dark.css], js: [content.js] } ] }dark.css核心暗色样式html { filter: invert(1) hue-rotate(180deg) !important; background: #000 !important; } img, video, canvas { filter: invert(1) hue-rotate(180deg) !important; }这正是 Dark Reader 最早期的思路之一用 CSSfilter反转颜色再把图片反回来。popup.html!DOCTYPE html html head meta charsetutf-8 / titleMini Dark Reader/title style body { width: 220px; font-family: sans-serif; padding: 12px; } button { width: 100%; margin-top: 8px; } /style /head body h3Mini Dark Reader/h3 label 暗黑模式 input idtoggle typecheckbox / /label button idincrease加深对比度/button button iddecrease降低对比度/button script srcpopup.js/script /body /html5. 加载与调试插件打开chrome://extensions打开「开发者模式」点「加载已解压的扩展程序」→ 选mini-dark-reader打开一个网页如知乎 / 文档站点工具栏图标 → 勾选开关调试方式弹窗右键弹窗 → 检查网页内注入F12 → Content scripts后台扩展页 → Service Worker 的 “Inspect views”6. 内容脚本实战真正的“开关控制”上面 CSS 是一直生效的不够像 Dark Reader。我们用content.js控制是否启用content.jsfunction enableDark() { document.documentElement.classList.add(mini-dark); } function disableDark() { document.documentElement.classList.remove(mini-dark); } chrome.storage.local.get([darkEnabled], (res) { if (res.darkEnabled) enableDark(); }); chrome.runtime.onMessage.addListener((msg, sender, sendResponse) { if (msg.type TOGGLE_DARK) { const on document.documentElement.classList.toggle(mini-dark); chrome.storage.local.set({ darkEnabled: on }); } });dark.css 改成作用域版本html.mini-dark { filter: invert(1) hue-rotate(180deg); background: #000; } html.mini-dark img, html.mini-dark video { filter: invert(1) hue-rotate(180deg); }这样才是“用户说了算”。7. 消息通信机制Popup 和网页不是同一个环境要通过后台或 runtime 通信。popup.jsdocument.getElementById(toggle).addEventListener(change, async (e) { const [tab] await chrome.tabs.query({ active: true, currentWindow: true }); chrome.tabs.sendMessage(tab.id, { type: TOGGLE_DARK }); }); document.getElementById(increase).addEventListener(click, () { document.documentElement.style.filter invert(1) hue-rotate(180deg) contrast(1.2); });background.js可做全局统计chrome.runtime.onMessage.addListener((msg, sender, sendResponse) { if (msg.type TOGGLE_DARK) { console.log(切换暗黑模式, sender.tab?.url); } });对应现实里的 Dark ReaderPopup用户开关Content script真正改页面Background记录状态 / 多标签同步8. 常用 API 与权限做“热门插件”通常会用到chrome.tabs获取当前页面、注入脚本chrome.storage保存用户配置暗色强度、白名单chrome.scripting动态注入 CSS / JSchrome.alarms定时同步配置chrome.declarativeNetRequest广告拦截类插件用本例权限permissions: [activeTab, scripting, storage], host_permissions: [all_urls]权限越少审核越快用户越敢装。9. 总结用一个“迷你版 Dark Reader”你就已经学到了Manifest V3 项目结构content script 改页面popup 做设置界面storage 存用户状态runtime / tabs 消息通信很多“很火”的 Chrome 插件起点都是一个能解决自己痛点的小功能