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

最新推荐文章于 2025-04-08 14:38:54 发布

前端77

最新推荐文章于 2025-04-08 14:38:54 发布

阅读量497

点赞数 3

文章标签： chrome 前端

本文链接：https://blog.youkuaiyun.com/gaotlantis/article/details/144219812

版权

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

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

开始前的准备

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

基本的前端技能：熟悉 HTML、CSS 和 JavaScript。如果你用过 Vue、React，甚至更好！
一个文本编辑器：推荐 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,

});