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

作者：Y11

2025-09-15
浙江
本文字数：1142 字
阅读完需：约 4 分钟

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

1. 准备开发环境

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

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

2. 插件代码目录结构

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

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

复制代码

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

3. 关键文件示例介绍

manifest.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"  ]}

复制代码

popup.html

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

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>

复制代码

popup.js

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

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

复制代码

4. 本地安装和测试教程

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

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

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

5. 总结

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

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

发布于: 刚刚阅读数: 2

Y11

关注

还未添加个人签名 2018-10-25 加入

还未添加个人简介

发布

暂无评论

创作场景

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

1. 准备开发环境

2. 插件代码目录结构

3. 关键文件示例介绍

manifest.json

popup.html

popup.js

4. 本地安装和测试教程

5. 总结

Y11

评论