第 1 步：准备插件 “三要素”
一个基础的 Chrome 插件只需要 3 个核心文件，无需编程经验也能搞定：
- 图标文件：准备 1 张 PNG 图片（建议 48x48 像素），作为插件在浏览器上的显示图标。
- 示例：用画图工具画一个简单的笑脸，保存为
icon.png。
- 示例：用画图工具画一个简单的笑脸，保存为
- 网页文件：创建一个
index.html，写一句你想展示的内容（比如 “我的第一个插件”）。- 示例代码：
<html> <body>你好，这是我的Chrome插件！</body> </html>配置文件：创建
manifest.json，告诉 Chrome 这是一个插件及相关信息。 - 复制以下代码（只需修改名称和图标路径）：
{ "manifest_version": 3, "name": "我的第一个插件", "version": "1.0", "description": "简单的Chrome插件示例", "icons": {"48": "icon.png"}, "action": { "default_popup": "index.html", "default_icon": "icon.png" } }将这 3 个文件放在同一个文件夹（比如命名为 “my-first-extension”）。
第 2 步：在 Chrome 中加载插件
- 打开 Chrome 浏览器，在地址栏输入
chrome://extensions/，进入插件管理页面。 - 开启右上角的 “开发者模式”（开关按钮，打开后会显示 “加载已解压的扩展程序” 等按钮）。
- 点击 “加载已解压的扩展程序”，选择你存放 3 个文件的文件夹（“my-first-extension”）。
-
此时，浏览器右上角会出现你制作的插件图标（就是你准备的
icon.png）。第 3 步：测试并使用插件
点击浏览器右上角的插件图标，会弹出一个小窗口，显示你在
index.html中写的内容（“你好，这是我的 Chrome 插件！”）。到这里，你的第一个 Chrome 插件就制作完成了！
进阶小技巧：让插件更实用
如果想让插件更有用，可以修改
index.html添加简单功能，比如： - 放一个常用网址的链接（
<a href="https://www.baidu.com">百度一下</a>），点击插件即可快速跳转。 - 写一句励志语录，每次点击都能看到鼓励自己的话。
-
通过这种方式，即使没有编程基础，也能制作出满足个性化需求的 Chrome 插件。如果需要更复杂的功能（如修改网页内容、拦截请求等），再逐步学习简单的 JavaScript 知识即可。
（注：文中涉及的文件创建和代码复制，可在记事本、VS Code 等工具中完成，图标可通过在线图片生成工具制作）
- 示例代码：
扫一扫
1561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
