作为一名前端程序员，我的 Chrome 应该是...

顺丰同城前端技术团队2025-06-10 10:03

Hello 大家好，今天给大家带来一期关于 Chrome 的基础文章，内容不多，主要是关于一名前端开发的 2025 的 Chrome 的基础提效指南，文章可能有些老生常谈，大家见谅。

一、常用 Chrome 扩展攻略

在此章节中，我们会先介绍一下笔者本人在日常工作中经常用到的一些 Chrome 扩展。

1、Fehelper｜开发者工具集

chromewebstore.google.com/detail/fehe...

Fehelper 是一个能够帮助我们提高开发效率的一个开发者工具集，具有图片转Base64、二维码相关、时间戳转换等其他功能，同时还支持开发者自行开发插件，具体内容大家可以自行查看。

2、ModHeader｜请求头/响应头修改工具

chromewebstore.google.com/detail/modh...

ModeHeader 是一个强大的可以修改我们请求、响应的 header 中数据的插件，我们可以在里面配置我们想要添加、修改的 header 属性，之后就可以修改我们网络中的 header，这在一些通过 header 区分环境、用户的场景中十分有用。

它同时支持导入导出、分配置文件修改等功能。

3、Console Importer｜通过控制台快速引入第三方库

chromewebstore.google.com/detail/cons...

以 Dayjs 举例，假设有这么一种场景：我是一个没有使用过 Dayjs 的开发者。我现在想根据它的文档来进行它的 API 的调试，但是我并不想通过

1.打开我的编辑器 -> 2.新建一个 Node 项目 -> 3.写一个 js 文件去运行

这种方式去运行，这时，Console Importer 这个插件就派上用场了。

这是一个可以让我们直接在 Chrome 控制台中导入第三方库的插件，以上面的场景举例，我们只需要在控制台中输入$i('dayjs')，然后再输入 dayjs 的方法即可。

我终于可以在这个场景中扔掉那些繁重的 IDE 了。

4、沉浸式翻译 | 智能翻译助手

chromewebstore.google.com/detail/%E6%...

网页中的翻译是一个比老生常谈还要老生常谈的场景了。

此处推荐 2,000,000 用户，4.6 评分的经典翻译插件：沉浸式翻译。

它支持：

  • 多种 AI 翻译：提供 DeepL、DeepSeek、Gemini、OpenAi、智谱、Claude 等多种 API 支持
  • 多种来源翻译：可以翻译图片、翻译输入框、翻译 PDF、还可以翻译 Youtube、Netflix、Prime Video 等视频网站的字幕
  • 多种翻译样式：可以选择下划线、高亮、模糊状态
  • 术语库：原装自带 AI 术语库，例如医疗、宠物、音乐、电商、编程等等，同时也可以支持自定义术语库，我们可以从文件里导入术语库，也可以将现有的术语库导出为文件
  • 配置云同步：可以自动同步到 Google Drive

综上所述，我认为沉浸式翻译已经是截止到 2025 年，Chrome 中做的最好的翻译插件了，没有之一。

它还有更多的小功能，可以安装之后自行探索。

5、Cookie-Editor｜Cookie 管理工具

chromewebstore.google.com/detail/cook...

作为一名前端开发工程师，Cookie 的管理也是一个永远无法回避的场景。

利用 Cookie-Editor，我们可以轻松的创建、编辑和删除 Cookie。

Cookie-Editor 同时支持暗黑模式。

6、Ajax Interceptor Tools | Ajax 请求拦截工具

chromewebstore.google.com/detail/ajax...

这是一个可以让你在 Chrome 中轻松修改接口响应的插件。我们不需要再在代码 / Mock 平台中修改我们的数据了。我们只需要在这个扩展中把我们想要 mock 的接口和想要的返回数据编写好，设置在里面即可。

7、Maple Bookmarks｜书签管理工具

chromewebstore.google.com/detail/mapl...

这是一个可以轻松管理我们的繁杂的书签的 Chrome 扩展，我们不需要再在书签栏中点开一个个文件夹，然后再繁多的书签中寻找我们的想要的那个了。我们只需要按下 Command + E，一个完全平铺的书签栏就会直接出现。

它同时也支持快捷键 Ctrl + S 进行书签的搜索。

8、Automa | RPA 自动化流程工具

chromewebstore.google.com/detail/auto...

这是一个非常非常非常强大的 RPA 工具。

我们可以像搭积木一样，将工作流中的各个步骤进行拼合，包括但不限于点击、滚动、上传、输入、下载、网络请求、循环、判断、截屏、通知等功能，它甚至可以连接到它的 Database 和 GoogleSheet、GoogleDrive 来增强它的能力。

它的能力实在太过强大，以至于我不想再多言。感兴趣可以直接下载之后看一看。

9、Midscene.js | 自然语言自动化测试工具

chromewebstore.google.com/detail/mids...

随着 AI 的越来越来越强大，如何通过 AI 赋能我们的开发、测试流程已经成为了一个比较成熟的领域。

按照以往的自动化测试，我们可能需要通过截图、XPath 来定位元素的目标，然后再通过浏览器的能力进行操作。

实在是太麻烦太复杂了。

字节 WebInfra 团队前段时间推出了 Midscene.js 这一工具，我们可以直接使用 自然语言 来让 AI 进行解析，并自动规划它对浏览器的操作。

例如，我输入（点击页面中的第一个商品，然后将其添加到购物车），MidScene 可以将页面的 Dom 结构、截图和我的 prompt 一同发送给大模型，然后通过大模型返回的数据来进行下一步操作。

同时，它也可以为你输出十分详细的测试报告，也支持通过 ts、yaml 的格式来进行开发。

typescript 复制代码 
await aiWaitFor('跳转支付选择页面或输入支付密码弹窗弹起');

if (client === 'weapp') {
  await aiTap('免密支付');
} else {
  if (!(await aiBoolean('是否有输入支付密码弹窗'))) {
    await aiTap('储值卡');
    await aiTap('确认支付');
    await sleep(1000);
  }
  for (let i = 1; i <= 6; i++) {
    await aiTap(`${i}`);
    await sleep(1000);
  }
}

它同时支持 aiAssert、aiQuery 等工具，可以参考 midscenejs.com/zh/index.ht... 文档进行查看。

可以点击视频链接进行示例查看。 github.com/Shenyouxian...

二、我要如何编写一个 Chrome 插件？

上一章介绍了前端常用的 Chrome 扩展，这一章我们将尝试动手开发一个。

一个 Chrome 扩展通常包含以下几个文件

json 复制代码 
manifest.json - 配置文件
icon.png - 图标

popup.html - 弹出页面
popup.js - 弹出脚本

background.js - 后台脚本

options.html - 选项页面
options.js - 选项脚本

content.js - 内容脚本

下面，我们以一个简单的 Todo-List 的 Chrome 扩展为例，来介绍 Chrome 扩展的结构。

manifest.json - 配置文件

我们可以把 manifest.json 看作是 Chrome 扩展的 package.json，它定义了扩展的名称、版本、描述、权限、后台脚本、内容脚本、弹出页面等配置信息

json 复制代码 
{
  "manifest_version": 3,
  "name": "基础 Chrome 扩展",
  "description": "一个简单的 Chrome 扩展示例",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": ["storage", "alarms", "tabs", "contextMenus", "notifications"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [ // 配置要注入到网页中的脚本
    {
      "matches": ["\<\all_urls\>\"], // 匹配规则，"\<\all_urls\>\" 表示所有网页
      "js": ["content.js"], // 要注入的 JavaScript 文件
      "run_at": "document_end" // "document_start": 在 DOM 创建之前 / "document_end": 在 DOM 加载完成后，但在图片等资源加载前 / "document_idle": 在页面加载完成后（默认值）
    }
  ],
  "icons": {
    "128": "icon.png"
  },
  "options_page": "options.html"
}

popup

popup 是 Chrome 扩展的弹出页面，它定义了扩展的弹出页面样式和内容

html 复制代码 
// popup.html
<div class="container">
  <h2>Todo List</h2>
  <div class="input-group">
    <input type="text" id="todoInput" placeholder="输入待办事项...">
    <button id="addTodo">添加</button>
  </div>
  <div id="todoList" class="todo-list">
    <!-- Todo items will be added here -->
  </div>
</div>
javascript 复制代码 
// popup.js
document.addEventListener('DOMContentLoaded', function () {
  const todoInput = document.getElementById('todoInput');
  const addTodoBtn = document.getElementById('addTodo');
  const todoList = document.getElementById('todoList');

  // 加载保存的待办事项
  loadTodos();

  // 添加待办事项
  addTodoBtn.addEventListener('click', addTodo);
  todoInput.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      addTodo();
    }
  });
});

OK！我们现在已经实现了扩展的基础功能。

但是我现在想实现：

假如用户有未完成的提醒事项，每隔 5 秒提醒用户一次

这时，我们就用到了 background.js 文件。

background

background.js 是 Chrome 扩展的后台脚本，会在扩展安装或启动时就运行。即使扩展页面关闭，background.js 也会继续运行。

javascript 复制代码 
// 创建定时器
chrome.alarms.create('checkTodos', {
  periodInMinutes: 1 / 6, // 10秒 = 1/6分钟
});

// 监听定时器
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'checkTodos') {
    // 如果提醒标签页已经打开，则不再创建新的标签页
    if (reminderTabId !== null) {
      return;
    }

    // 获取待办事项和文字颜色设置
    chrome.storage.sync.get(['todos', 'textColor'], function (result) {
      const todos = result.todos || [];
      const textColor = result.textColor || '#000000';
      const uncompletedTodos = todos.filter((todo) => !todo.completed);

      if (uncompletedTodos.length > 0) {
        // 创建提醒页面
        const reminderHTML = `
        ...some HTML codes
        `;

        // 使用 data URL，添加 charset=UTF-8
        const dataUrl =
          'data:text/html;charset=UTF-8,' + encodeURIComponent(reminderHTML);

        // 打开新标签页
        chrome.tabs.create({ url: dataUrl }, (tab) => {
          reminderTabId = tab.id;
        });
      }
    });
  }
});

Tips: chrome.storage 有三种形式

• chrome.storage.sync：数据会同步到用户的 Google 账户中（如果登录了 Chrome），可在不同设备共享。

• chrome.storage.local：不会同步，仅保存在本地，但速度更快且容量更大。

• chrome.storage.session（Manifest V3 才有）：生命周期跟随 Service Worker，只存在于内存中，不会写入磁盘。浏览器关闭、Service Worker 被终止后，数据就会丢失。

好的，我们现在已经实现了扩展的弹窗，并且用 background.js 实现了定时器。

但用户又有一个需求：

我想改变提示的 tab 页中的文字颜色。

这时候我们就需要用到 options 页面。

options

在 options 中，我们可以定义扩展的设置页面，用户可以在设置页面中修改扩展的配置。

我们可以在 options 中定义扩展的设置页面，用户可以在设置页面中修改扩展的配置

html 复制代码 
// options.html
<div class="option-group">
  <label for="textColor">提醒文字颜色:</label>
  <input type="color" id="textColor" value="#000000">
  <div class="color-preview" id="colorPreview"></div>
  <button id="save" class="save-button">保存设置</button>
</div>
javascript 复制代码 
// options.js
// 当页面加载时，获取保存的设置
document.addEventListener('DOMContentLoaded', () => {
  // 获取元素
  const textColorInput = document.getElementById('textColor');
  const colorPreview = document.getElementById('colorPreview');
  const saveButton = document.getElementById('save');

  // 从存储中加载设置
  chrome.storage.sync.get(['textColor'], (result) => {
    const savedColor = result.textColor || '#000000';
    textColorInput.value = savedColor;
    colorPreview.style.backgroundColor = savedColor;
  });

  // 当颜色选择改变时更新预览
  textColorInput.addEventListener('input', (e) => {
    colorPreview.style.backgroundColor = e.target.value;
  });

  // 保存设置
  saveButton.addEventListener('click', () => {
    const newColor = textColorInput.value;
    chrome.storage.sync.set(
      {
        textColor: newColor,
      },
      () => {
        // 显示保存成功的提示
        const status = document.createElement('div');
        status.textContent = '设置已保存';
        status.style.color = '#4CAF50';
        status.style.marginTop = '10px';
        saveButton.parentNode.appendChild(status);

        // 3秒后移除提示
        setTimeout(() => {
          status.remove();
        }, 3000);
      }
    );
  });
});

我们现在已经实现了弹窗、定时器，以及设置页面。

很巧，我现在又想实现一个功能：

当用户在页面选中文字并且点击右键时，能够直接将选中的文字添加到提醒事项中

content

content.js 是 Chrome 扩展用来与页面交互的脚本，它会在页面加载时运行

javascript 复制代码 
// background.js
// 用于跟踪提醒标签页的状态
let reminderTabId = null;
let selectedText = '';

// 创建上下文菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'addToTodo',
    title: '添加到待办事项',
    contexts: ['selection'],
  });
});

// 监听上下文菜单点击
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'addToTodo') {
    // 获取当前的待办事项列表
    chrome.storage.sync.get(['todos'], function (result) {
      const todos = result.todos || [];
      // 添加新的待办事项
      const newTodo = {
        id: Date.now(),
        text: info.selectionText,
        completed: false,
        createdAt: new Date().toISOString(),
        source: {
          url: tab.url,
          title: tab.title,
        },
      };
      todos.push(newTodo);
      // 保存更新后的列表
      chrome.storage.sync.set({ todos }, () => {
        // 检查标签页是否存在并发送消息
        chrome.tabs.query(
          { active: true, currentWindow: true },
          function (tabs) {
            if (tabs[0]) {
              try {
                chrome.tabs.sendMessage(
                  tabs[0].id,
                  {
                    type: 'showNotification',
                    message: '已添加到待办事项',
                  },
                  (response) => {
                    if (chrome.runtime.lastError) {
                      console.log('发送消息失败:', chrome.runtime.lastError);
                      // 如果消息发送失败，使用 chrome.notifications API 显示通知
                      chrome.notifications.create({
                        type: 'basic',
                        iconUrl: 'icon.png',
                        title: '待办事项',
                        message: '已添加到待办事项列表',
                      });
                    }
                  }
                );
              } catch (error) {
                console.log('发送消息出错:', error);
              }
            }
          }
        );
      });
    });
  }
});

// 监听来自 content.js 的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'textSelected') {
    selectedText = message.text;
  }
});
javascript 复制代码 
// content.js
// 监听文本选择事件
document.addEventListener('selectionchange', () => {
  const selectedText = window.getSelection().toString().trim();
  // 将选中的文本发送给 background.js
  if (selectedText) {
    chrome.runtime.sendMessage({
      type: 'textSelected',
      text: selectedText,
    });
  }
});

// 监听来自 background.js 的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'showNotification') {
    try {
      // 创建通知元素
      const notification = document.createElement('div');
      notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        border-radius: 4px;
        z-index: 999999;
        animation: slideIn 0.3s ease-out;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      `;

      // 添加动画样式
      const style = document.createElement('style');
      style.textContent = `
        @keyframes slideIn {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }
      `;
      document.head.appendChild(style);

      notification.textContent = message.message;
      document.body.appendChild(notification);

      // 3秒后移除通知
      setTimeout(() => {
        notification.style.animation = 'slideIn 0.3s ease-out reverse';
        setTimeout(() => {
          notification.remove();
          style.remove();
        }, 300);
      }, 3000);

      // 发送响应表示成功
      sendResponse({ success: true });
    } catch (error) {
      console.error('显示通知时出错:', error);
      sendResponse({ success: false, error: error.message });
    }
    // 返回 true 表示会异步发送响应
    return true;
  }
});

我们现在已经实现了我们想要的全部功能，我们现在准备...

调试与发布

我们可以在 chrome://extensions 中直接加载已解压的扩展程序

但我们还有一些其他问题...

  • 我要如何调试我的 Chrome 扩展？

    • popup.js 中的输出可以直接在弹出层中点击检查
    • content.js 中的输出可以直接在页面的控制台中切换上下文
    • background.js 中的输出可以点击在 Chrome 的设置中扩展详情中的 Service Worker 之后弹出的 Devtool 中看到
    • option.js 中的输出可以直接在 option 页面中点击检查

  • 我要如何发布我的 Chrome 扩展？

WXT | Next-gen Web Extension Framework

就像是 Vue 和 React 之于 Web 开发一样，WXT 是 Chrome 的下一代 Web 扩展框架，它可以帮助开发者更快速、更高效地开发 Chrome 扩展

pnpm dlx wxt@latest init

WXT 支持 vue、react、svelte、solid 等多种前端框架

项目结构

WXT 的目录结构和大多数 node 项目无异

lua 复制代码 
| {rootDir}/  
| ├── .output/  
| ├── .wxt/  
| ├── (src/)  
| ├──|-├── assets/  
| ├──|-├── components/  
| ├──|-├── composables/  
| ├──|-├── entrypoints/  
| ├──|-├── hooks/  
| ├──|-├── modules/  
| ├──|-├── public/  
| ├──|-├── utils/  
| ├── .env  
| ├── .env.publish  
| ├── app.config.ts  
| ├── package.json  
| ├── tsconfig.json  
| ├── web-ext.config.ts  
| └── wxt.config.ts

我们可以在wxt.config.ts中配置srcDir: 'src'来使用src目录管理项目

Some Tips

WXT 通常使用{rootDir}/src/entrypoints/(sidepanel | popup)/index.html来管理入口文件

WXT 使用{rootDir}/src/entrypoints/background.ts | content.ts | option.ts来管理 background、content、option 的逻辑

WXT 支持使用wxt/storage来管理存储，支持 i18n，支持使用第三方库来处理消息传递

WXT 通过运行 wxt zip 和 wxt publish 来打包和发布

以 Paperboy 这个项目为例，我们在 background.ts 中请求 feeds 信息之后使用 wxt.storage 来将 feeds 信息保存到 storage 中，然后在 WechatRssViewer.tsx 中监听 storage 的变化来更新页面

可以访问官方网站来查看更多：wxt.dev/

三、总结

OK，今天这篇文章我们从日常开发中那些提升效率的 Chrome 插件讲起，一路聊到了怎么手把手写一个自己的扩展，甚至还顺带介绍了一下新一代的开发框架 WXT。

如果你以前只是用插件、没想过自己动手写一个，希望这篇文章能帮你把 Chrome 扩展这件事变得不那么遥远。如果你已经写过一些扩展，那 WXT 也许是你可以尝试的下一步。

下期再见👋。

相关推荐
F_Director1 分钟前
傻子都能理解的 React Hook 闭包陷阱
前端·react.js·源码阅读
aze4 分钟前
恩师AI之Next.js 静态导出中 "use client" 指令的作用
前端·next.js
江城开朗的豌豆8 分钟前
Git分支管理：从'独狼开发'到'团队协作'的进化之路
前端·javascript·面试
GIS之家9 分钟前
vue+cesium示例：3D热力图(附源码下载)
前端·vue.js·3d·cesium·webgis·3d热力图
幽蓝计划10 分钟前
鸿蒙Next仓颉语言开发实战教程：下拉刷新和上拉加载更多
前端
红衣信11 分钟前
电影项目开发中的编程要点与用户体验优化
前端·javascript·github
LeeAt16 分钟前
npm：详细解释前端项目开发前奏！！
前端·node.js·html
山有木兮木有枝_18 分钟前
JavaScript对象深度解析：从创建到类型判断 （上）
前端
crary,记忆25 分钟前
MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释
前端·学习·webpack
清风~徐~来28 分钟前
【Qt】控件 QWidget
前端·数据库·qt
热门推荐
01【图像处理与机器视觉】XJTU期末考点02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07零代码入门 | Coze——让大模型接入自己的数据库08海康Visionmaster-常见问题排查方法-启动阶段09DeepSeek各版本说明与优缺点分析10R-tree详解