Chrome插件教程：一个小案例给掘金社区添加一键关灯效果

前言

🌓🌓在一个月黑风高夜，在被窝偷偷打开掘金页面，结果被页面亮眼的白色主题色差点亮瞎了小编的眼睛。小编找了许久才在个人设置中找到深色模式的按钮。所以小编为了下次能快速找到按钮，打算通过Chrome插件的形式，在页面注入一个按钮，实现一键切换深色模式效果。（好吧，其实只是想写篇blog记录一下Chrome插件开发流程，才拿掘金做个小案例哈哈哈哈）

效果展示 🎮

插件的主要功能：

1. 在掘金页面右侧添加一个悬浮的主题切换按钮
2. 点击按钮可以在明暗主题之间切换
3. 主题选择会被保存，下次访问时保持上次的选择
4. 完美融入掘金现有的UI设计

开发流程 🚀

文件夹目录

your-extension/
  ├── manifest.json
  ├── content.js
  └── icons/
      └── kunkun.png

manifest.json文件配置介绍

{
  "manifest_version": 3,
  "name": "掘金主题切换器",
  "version": "1.0",
  "description": "掘金页面注入按钮，一键切换主题",
  "permissions": ["storage", "activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["https://juejin.cn/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "icons": {
    "244": "icons/cxk.png"
  }
}

1. manifest_version

• manifest_version: 3 指定了该插件使用的是 Manifest V3 版本，这是 Chrome 扩展的最新标准，相比 V2 进行了安全性和性能优化。

2. permissions（权限声明）

• storage：允许插件使用 Chrome 的存储 API，以便在本地存储主题设置等用户数据。
• activeTab：允许插件访问当前激活的标签页，在用户点击扩展图标时临时获取权限。
• scripting：提供动态注入脚本的能力，替代 Manifest V2 的 background 方式。

3. action（弹出窗口）

• default_popup: "popup.html" 指定了用户点击扩展图标时弹出的窗口，该文件通常是一个 HTML 页面，包含主题切换的 UI 选项。

4. content_scripts（内容脚本）

"content_scripts": [
  {
    "matches": ["https://juejin.cn/*"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }
]

• matches: ["https://juejin.cn/*"]：表明该内容脚本 仅作用于掘金网站 (juejin.cn) ，不会影响其他网站。
• js: ["content.js"]：表示注入 content.js 脚本，该脚本用于操作网页 DOM，例如修改主题样式。
• run_at: "document_idle"：表明脚本在 页面加载完成后（idle 状态） 再执行，避免影响页面正常渲染。

content.js逻辑

这个js文件就是用来注入按钮，点击切换主题色，以下是简略逻辑分析，后面会放出github源码链接

// 创建切换按钮
const btn = document.createElement("button");
  
// 添加到悬浮面板
const panel = document.querySelector(".suspension-panel");
if (panel) {
  panel.insertBefore(btn, panel.querySelector(".to-top-btn"));
}

// 点击事件处理
btn.addEventListener("click", () => {
  const currentTheme = document.body.dataset.theme || "light";
  const newTheme = currentTheme === "dark" ? "light" : "dark";

  // 更新主题
  document.body.dataset.theme = newTheme;

  // 保存状态
  chrome.storage.local.set({ juejinTheme: newTheme });

  // 同步修改网站自带的主题存储（如果有）
  try {
    localStorage.setItem("theme", newTheme);
  } catch (e) {}
});

应用插件 📥

1. 打开插件管理网页Chrome插件
2. 点击加载已解压的扩展程序
3. 将整个项目拖入进去
4. 打开掘金页面即可见到关灯按钮

源码地址

点击下方「查看代码」获取插件

👉 Github链接

END

✅ 点赞让更多夜猫子看到

✅ 收藏防丢失指南