零基础学会开发MG51.TY式浏览器插件

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

创建一个入门级浏览器扩展教学项目，功能包括：1) 修改网页背景色 2) 添加简单浮动按钮 3) 显示当前时间。要求：1) 每步操作都有图文说明 2) 提供可交互的代码示例 3) 包含常见问题解答 4) 设置'试一试'实时预览区域。使用最基础的JavaScript语法，避免复杂概念。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果

零基础学会开发MG51.TY式浏览器插件

最近想尝试开发浏览器插件，但看到各种专业文档就头大？作为同样从零开始摸索的新手，我记录了这个超级简单的入门教程。只需跟着步骤操作，用最基础的JavaScript就能做出能改变网页背景色、显示浮动按钮和时间的插件。

一、准备工作

1. 浏览器插件本质上就是一些HTML、CSS和JS文件的组合，打包后能被浏览器识别。我们只需要创建一个文件夹存放这些文件即可。

2. 每个插件都必须有一个manifest.json配置文件，相当于插件的"身份证"。这个文件会告诉浏览器插件叫什么、有哪些权限、要加载哪些脚本等基本信息。

3. 现代浏览器如Chrome、Edge都支持插件开发，调试时建议使用Chrome浏览器，它的开发者工具对插件调试最友好。

二、创建基础文件结构

1. 新建一个文件夹，命名为"MyFirstExtension"（名字可以自定）。

2. 在文件夹内创建manifest.json文件，内容如下：

{ "manifest_version": 3, "name": "我的第一个插件", "version": "1.0", "action": { "default_popup": "popup.html" }, "permissions": ["activeTab"] }

1. 创建popup.html文件，这是点击插件图标时弹出的界面。我们先写个简单版本：

<!DOCTYPE html> <html> <body> <h2>我的插件</h2> <button id="changeColor">改变背景色</button> <button id="showTime">显示时间</button> </body> </html>

三、实现改变背景色功能

1. 在popup.html同目录下创建popup.js文件，这是处理按钮点击的逻辑。

2. 在popup.html的body结束标签前添加：

<script src="popup.js"></script>

1. 在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'; } }); }); });

1. 现在点击"改变背景色"按钮，当前网页背景会变成浅灰色。

四、添加浮动按钮功能

1. 在manifest.json的"permissions"数组中添加"scripting"权限。

2. 在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'] }); }); });

1. 创建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);

五、显示当前时间

1. 在popup.html中添加一个显示时间的区域：

<div id="timeDisplay"></div>

1. 在popup.js中添加：

document.getElementById('showTime').addEventListener('click', () => { const now = new Date(); document.getElementById('timeDisplay').textContent = now.toLocaleTimeString(); });

六、测试和调试

1. 在Chrome浏览器地址栏输入chrome://extensions/，打开开发者模式。

2. 点击"加载已解压的扩展程序"，选择你创建的插件文件夹。

3. 现在可以在任意网页点击插件图标测试功能了。

常见问题解答

1. 为什么点击按钮没反应？
2. 检查manifest.json的permissions是否包含"activeTab"和"scripting"
3. 确认popup.js是否正确链接到popup.html

4. 在chrome://extensions/页面点击"刷新"按钮重新加载插件

5. 如何修改插件图标？

6. 准备一个128x128像素的PNG图片
7. 在manifest.json中添加：

"icons": { "128": "icon.png" }

1. 插件能在其他浏览器使用吗？
2. 基于Chromium的浏览器(Edge、Opera等)都可以
3. Firefox需要稍作修改并打包为.xpi格式

进阶建议

1. 给浮动按钮添加更多交互功能
2. 使用chrome.storage API保存用户设置
3. 添加选项页面让用户自定义背景色
4. 发布到Chrome应用商店分享给更多人

这个入门项目虽然简单，但包含了插件开发的核心概念。我在InsCode(快马)平台上尝试时，发现它的一键部署功能特别适合新手快速验证代码效果，不用折腾本地环境配置。

刚开始可能会遇到各种小问题，但每个开发者都是这样过来的。记住浏览器插件开发的黄金法则：保持简单，逐步添加功能。当你看到第一个自己开发的插件正常工作时，那种成就感绝对值得！

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

创建一个入门级浏览器扩展教学项目，功能包括：1) 修改网页背景色 2) 添加简单浮动按钮 3) 显示当前时间。要求：1) 每步操作都有图文说明 2) 提供可交互的代码示例 3) 包含常见问题解答 4) 设置'试一试'实时预览区域。使用最基础的JavaScript语法，避免复杂概念。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果