入门教程：如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例）

本文以一个简单的示例项目为例，手把手教您如何从零开始编写一个Chrome浏览器插件，实现点击按钮跳转到指定网站（jobleap.cn）。示例源码已开源于 GitHub：github.com/XiaomingX/j... 。

1. 准备开发环境

电脑安装好最新版的Chrome浏览器
文本编辑器（如VS Code）
Git工具（可选，用于克隆代码仓库）

开发 Chrome 扩展主要使用 HTML、CSS 和 JavaScript，无需复杂开发环境，浏览器即可调试。

2. 插件代码目录结构

示例项目的文件结构非常简洁：

bash 复制代码

text
jobleap-bookmark-extension/
├─ manifest.json       # 插件配置文件，定义权限、入口页面等
├─ popup.html          # 弹出窗口的HTML页面，包含界面元素
├─ popup.js            # 弹出页面的JS脚本，实现按钮点击跳转功能
└─ README.md           # 项目说明文档

其中，manifest.json 是 Chrome 插件的核心配置文件，告诉浏览器插件的基本信息和入口文件。

3. 关键文件示例介绍

manifest.json

该文件定义插件名称、版本、权限以及弹出页面入口。例如：

json 复制代码

json
{
  "manifest_version": 3,
  "name": "jobleap.cn收藏夹",
  "version": "1.0",
  "description": "一个轻量型Chrome扩展，快速访问jobleap.cn。",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "permissions": [
    "tabs"
  ]
}

这是插件点击图标后弹出的页面，简单展示按钮布局：

xml 复制代码

xml
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>JobLeap插件</title>
</head>
<body>
  <button id="btn1">访问 JobLeap 官网</button>
  <script src="popup.js"></script>
</body>
</html>

通过监听按钮点击事件，实现打开新标签页跳转到指定网址：

javascript 复制代码

js
document.getElementById('btn1').addEventListener('click', function() {
  chrome.tabs.create({ url: 'https://jobleap.cn' });
});

4. 本地安装和测试教程

完成代码后，如何让Chrome加载并测试插件呢？

打开Chrome浏览器，进入扩展管理页面：chrome://extensions/
右上角开启「开发者模式」
点击「加载已解压的扩展程序」
选择包含代码的插件根目录 jobleap-bookmark-extension/
成功加载后，浏览器右上角会显示插件图标
点击插件图标，弹出页面中点击按钮即可跳转到 jobleap.cn

开发中可以反复修改代码，点击扩展页面的「刷新」按钮即可加载最新代码，无需重新安装。

5. 总结

通过本教程，您掌握了Chrome插件的基本结构和最简单功能的实现，完整代码可在github.com/XiaomingX/j... 查看。基于此，您可以扩展实现更多个性功能。

祝您Chrome插件开发顺利，职场飞跃！