Chrome 插件开发入门：从想法到实现，只需半小时！

还记得那些认为 “浏览器仅仅用于上网” 的日子吗？若把浏览器当作你的小助手，那么 Chrome 插件便是它的超能力套装。今日，我将用半小时，引领你步入 Chrome 插件的奇妙世界，从无到有开发自己的 “浏览器外挂”。

简单来讲，Chrome 插件是一段用于增强 Chrome 浏览器功能的小程序。它能让你的浏览器变得多才多艺，例如自动保存密码、屏蔽广告，甚至还能定时提醒喝水（这可是程序员的福音）。从专业角度而言，它是基于 HTML、CSS 和 JavaScript 的扩展程序，在 Chrome 的 “扩展 API” 上运行，能够访问浏览器的核心功能。

开始前的准备

在开始开发前， 你需要具备以下基础知识：

1. 基本的前端技能：熟悉 HTML、CSS 和 JavaScript。如果你用过 Vue、React，甚至更好！
2. 一个文本编辑器：推荐 VS Code 。微软出品，对初学者友好，对老司机则如虎添翼。

实战案例 - 为B站 视频替换封面

让我们从一个简单又好玩的插件开始： 给 B 站视频封面全部换成二次元头像。

创建基础目录结构

color-changer/
├── manifest.json
├── content.js

编辑 manifest.json 文件

{
  "manifest_version": 3,  //固定写法，目前chrome 只能支持 3
  "name": "Bilibili 封面替换",
  "version": "1.0",
  "description": "将 Bilibili 视频封面替换成二次元头像。",
  "permissions": ["activeTab"],
  "host_permissions": ["*://www.bilibili.com/*"], 
  "content_scripts": [
    {
      "matches": ["*://www.bilibili.com/*"],
      "js": ["content.js"]
    }
  ]
}

新增 content.js

content.js 是核心脚本，用于查找页面上的所有封面图片，并替换为指定的二次元头像 URL。

// 二次元头像 URL
const avatarURL = "https://pic2.zhimg.com/v2-637b5156a4417085f4cb9df039db6f91_1440w.jpg"; // 替换为你喜欢的二次元头像链接

// 获取所有视频封面元素
const videoCovers = document.querySelectorAll('.bili-video-card__cover > img'); // 通过F12 审查Dom 元素得到 bilibili 封面

const sources = document.querySelectorAll('.bili-video-card__cover source');
// 遍历所有视频封面元素
sources.forEach((source) => {
  source.remove();
});
console.log('封面元素', videoCovers);
// 替换封面
videoCovers.forEach((img) => {
    img.onload = "";
  img.src = avatarURL; // 替换图片地址
  img.style.objectFit = "cover"; // 防止拉伸

});

// 如果动态加载的内容需要替换，使用 Observer API 监听 DOM 变化
const observer = new MutationObserver(() => {
  const newCovers =  document.querySelectorAll('.bili-video-card__image img');
  const sources = document.querySelectorAll('.bili-video-card__cover source');
    // 遍历所有视频封面元素
    sources.forEach((source) => {
    source.remove();
    });

  newCovers.forEach((img) => {
    img.src = avatarURL;
    img.style.objectFit = "cover";
  });
});

// 开始监听
observer.observe(document.body, {
  childList: true,
  subtree: true,
});

步骤 3：加载插件

按照以下步骤加载插件并测试：

1. 打开 chrome://extensions/，启用开发者模式。

   

2. 点击 加载已解压的扩展程序，选择你的插件文件夹。

   

3. 打开 Bilibili 网站，刷新页面，看看所有视频封面是否已经变成了你设定的二次元头像。
   

   总结

通过上面简单的步骤，我们已经完成了第一个Chrome 插件扩展的入门。 chrome 插件的能力，当然不仅仅只有如此。 我们还可以通过扩展popup.html 的方式，实现点击扩展的弹窗设置功能等等，碍于篇幅有限就不在这里赘述。

希望你可以通过本文举一反三成为一个插件开发高手，并通过定制自己的插件来帮助自己提高效率。

插件源码： https://github.com/shitouzxy/chrome-plugin