快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个入门级浏览器扩展教学项目，功能包括：1) 修改网页背景色 2) 添加简单浮动按钮 3) 显示当前时间。要求：1) 每步操作都有图文说明 2) 提供可交互的代码示例 3) 包含常见问题解答 4) 设置'试一试'实时预览区域。使用最基础的JavaScript语法，避免复杂概念。- 点击'项目生成'按钮，等待项目生成完整后预览效果
零基础学会开发MG51.TY式浏览器插件
最近想尝试开发浏览器插件，但看到各种专业文档就头大？作为同样从零开始摸索的新手，我记录了这个超级简单的入门教程。只需跟着步骤操作，用最基础的JavaScript就能做出能改变网页背景色、显示浮动按钮和时间的插件。
一、准备工作
浏览器插件本质上就是一些HTML、CSS和JS文件的组合，打包后能被浏览器识别。我们只需要创建一个文件夹存放这些文件即可。
每个插件都必须有一个manifest.json配置文件，相当于插件的"身份证"。这个文件会告诉浏览器插件叫什么、有哪些权限、要加载哪些脚本等基本信息。
现代浏览器如Chrome、Edge都支持插件开发，调试时建议使用Chrome浏览器，它的开发者工具对插件调试最友好。
二、创建基础文件结构
新建一个文件夹，命名为"MyFirstExtension"（名字可以自定）。
在文件夹内创建manifest.json文件，内容如下：
{ "manifest_version": 3, "name": "我的第一个插件", "version": "1.0", "action": { "default_popup": "popup.html" }, "permissions": ["activeTab"] }- 创建popup.html文件，这是点击插件图标时弹出的界面。我们先写个简单版本：
<!DOCTYPE html> <html> <body> <h2>我的插件</h2> <button id="changeColor">改变背景色</button> <button id="showTime">显示时间</button> </body> </html>三、实现改变背景色功能
在popup.html同目录下创建popup.js文件，这是处理按钮点击的逻辑。
在popup.html的body结束标签前添加：
<script src="popup.js"></script>- 在popup.js中添加代码：
document.getElementById('changeColor').addEventListener('click', () => { chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { chrome.scripting.executeScript({ target: {tabId: tabs[0].id}, func: () => { document.body.style.backgroundColor = '#f0f0f0'; } }); }); });- 现在点击"改变背景色"按钮，当前网页背景会变成浅灰色。
四、添加浮动按钮功能
在manifest.json的"permissions"数组中添加"scripting"权限。
在popup.js中添加新的事件监听：
document.getElementById('showButton').addEventListener('click', () => { chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { chrome.scripting.executeScript({ target: {tabId: tabs[0].id}, files: ['content.js'] }); }); });- 创建content.js文件：
const button = document.createElement('button'); button.textContent = '点击我'; button.style.position = 'fixed'; button.style.bottom = '20px'; button.style.right = '20px'; button.style.zIndex = '9999'; document.body.appendChild(button);五、显示当前时间
- 在popup.html中添加一个显示时间的区域：
<div id="timeDisplay"></div>- 在popup.js中添加：
document.getElementById('showTime').addEventListener('click', () => { const now = new Date(); document.getElementById('timeDisplay').textContent = now.toLocaleTimeString(); });六、测试和调试
在Chrome浏览器地址栏输入chrome://extensions/，打开开发者模式。
点击"加载已解压的扩展程序"，选择你创建的插件文件夹。
现在可以在任意网页点击插件图标测试功能了。
常见问题解答
- 为什么点击按钮没反应？
- 检查manifest.json的permissions是否包含"activeTab"和"scripting"
- 确认popup.js是否正确链接到popup.html
在chrome://extensions/页面点击"刷新"按钮重新加载插件
如何修改插件图标？
- 准备一个128x128像素的PNG图片
- 在manifest.json中添加：
"icons": { "128": "icon.png" }- 插件能在其他浏览器使用吗？
- 基于Chromium的浏览器(Edge、Opera等)都可以
- Firefox需要稍作修改并打包为.xpi格式
进阶建议
- 给浮动按钮添加更多交互功能
- 使用chrome.storage API保存用户设置
- 添加选项页面让用户自定义背景色
- 发布到Chrome应用商店分享给更多人
这个入门项目虽然简单，但包含了插件开发的核心概念。我在InsCode(快马)平台上尝试时，发现它的一键部署功能特别适合新手快速验证代码效果，不用折腾本地环境配置。
刚开始可能会遇到各种小问题，但每个开发者都是这样过来的。记住浏览器插件开发的黄金法则：保持简单，逐步添加功能。当你看到第一个自己开发的插件正常工作时，那种成就感绝对值得！
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个入门级浏览器扩展教学项目，功能包括：1) 修改网页背景色 2) 添加简单浮动按钮 3) 显示当前时间。要求：1) 每步操作都有图文说明 2) 提供可交互的代码示例 3) 包含常见问题解答 4) 设置'试一试'实时预览区域。使用最基础的JavaScript语法，避免复杂概念。- 点击'项目生成'按钮，等待项目生成完整后预览效果
