Chrome插件开发：手把手教你打造网页高亮笔（插件开发新手入门实操第一课）

Chrome插件开发入门：手把手教你实现页面高亮标记器

——解决新手最头疼的「内容脚本注入」问题

为什么选这个案例？

作为前端开发，我第一个插件就想实现「网页标记笔」——点击任意文本自动高亮。结果卡在两大痛点：

1. 内容脚本死活不执行（明明配置了content_scripts却无效）
2. 点击事件穿透问题（高亮后原页面按钮失效）
   本文将用真实项目代码，专治这两个“新手杀手”

一、插件基础结构（先搞懂骨架）

每个Chrome插件必备4个核心文件：

my-highlighter-extension/  
├── manifest.json    # 插件身份证  
├── background.js    # 隐形管家（后台脚本）  
├── popup.html       # 点击图标弹出的控制面板  
└── content.js       # 注入页面的手术刀（内容脚本）  

二、手撕「高亮标记器」代码（附避坑指南）

案例目标：

点击工具栏图标激活功能 → 点击网页文本 → 自动添加黄色背景 → 二次点击取消

步骤1：配置manifest.json（新手90%的错在这里！）

{
  "manifest_version": 3,
  "name": "文本高亮笔",
  "version": "1.0",
  // 关键1：声明后台脚本（必须用service_worker！）
  "background": {
    "service_worker": "backgro