浏览器插件开发极简教程

浏览器插件开发极简教程本教程带你从零开发一个简单的 Chrome 扩展同样适用于 Edge、Brave 等 Chromium 内核浏览器。最终效果点击插件图标可将当前网页背景色改为浅蓝色。1. 核心文件结构一个最简单的插件只需要两个文件my-extension/├── manifest.json # 配置文件必须└── popup.html # 点击图标弹出的界面如果要有“修改网页”的功能还需要一个 内容脚本。我们加上它my-extension/├── manifest.json├── popup.html├── popup.js # 弹窗中的逻辑└── content.js # 注入到网页中的脚本2. 编写 manifest.json这是插件的“身份证”告诉浏览器它的权限、名称、版本等。{manifest_version:3,name:背景色修改器,version:1.0,description:一键修改网页背景色,permissions:[activeTab],action:{default_popup:popup.html,default_title:点击改变背景色},content_scripts:[{matches:[all_urls],js:[content.js]}]}关键字段解释manifest_version扩展规范的版本号用 3就好了除非要适配特别旧的浏览器。permissions申请权限activeTab 允许操作当前标签页详细的权限列表可参考官方权限列表文档。action定义工具栏图标的行为default_popup 即点击后弹出的页面。content_scripts指定在哪些网页matches自动注入脚本。all_urls 表示所有 http/https 页面。3. 弹窗界面popup.html一个简单的按钮用来触发改色。!DOCTYPEhtmlhtmlheadstylebody{width:150px;padding:10px;}button{width:100%;padding:8px;cursor:pointer;}/style/headbodybuttonidchangeBg改为浅蓝色背景/buttonscriptsrcpopup.js/script/body/html4. 弹窗逻辑popup.js点击按钮时向当前网页注入一段改变背景色的代码。// popup.jsdocument.getElementById(changeBg).addEventListener(click,(){// 获取当前活动标签页chrome.tabs.query({active:true,currentWindow:true},(tabs){// 向该标签页注入执行脚本chrome.scripting.executeScript({target:{tabId:tabs[0].id},func:changeBackgroundColor// 要执行的函数});});});// 这个函数会被注入到网页中运行functionchangeBackgroundColor(){document.body.style.backgroundColor#e0f7fa;}注意在 popup.js 中不能直接操作 DOM因为弹窗和网页是隔离的。必须通过 chrome.scripting.executeScript 把代码送入网页环境执行。5. 内容脚本content.js事实上上一步我们已经通过动态注入实现了功能不需要单独的 content.js。但如果你希望插件自动在页面加载时就执行某些操作而不需要点击弹窗可以在 content.js 中写代码浏览器会根据 manifest.json 中的 content_scripts 自动注入。例如我们让页面加载后自动把背景改成浅灰色// content.jsdocument.body.style.backgroundColor#f0f0f0;若想保留原有“点击按钮改浅蓝”的功能可以删除 content_scripts 配置或者保留但将其注释掉。6. 加载插件到浏览器打开 Chrome地址栏输入 chrome://extensions/ 并回车。开启左下角不同浏览器可能位置不同的 “开发者模式”。点击上方 “加载已解压的扩展程序”。选择你的 my-extension 文件夹。加载成功后浏览器工具栏会出现你的插件图标。随便打开一个网页如DeepSeek点击图标再点击按钮网页背景立刻变成浅蓝色。7. 进阶小提示调试在 chrome://extensions/ 中点击你的插件下的“背景页”或“弹窗”链接可以打开 DevTools 调试。图标可以在 manifest.json 的 action 中添加 default_icon 字段指向一个图标文件16x16、32x32 等。权限需要操作特定网站时建议把 all_urls 改为具体网址模式如/.baidu.com/*。8. 完整项目代码可复制manifest.json{manifest_version:3,name:背景色修改器,version:1.0,action:{default_popup:popup.html,default_title:点击改变背景色},permissions:[activeTab,scripting]}popup.html!DOCTYPEhtmlhtmlheadstylebutton{width:120px;padding:8px}/style/headbodybuttonidchangeBg浅蓝背景/buttonscriptsrcpopup.js/script/body/htmlpopup.jsdocument.getElementById(changeBg).onclick(){chrome.tabs.query({active:true,currentWindow:true},tabs{chrome.scripting.executeScript({target:{tabId:tabs[0].id},func:()document.body.style.backgroundColor#e0f7fa});});};总结浏览器插件的核心开发流程定义 manifest.json 提供元数据和权限。使用弹窗页面popup.html .js响应用户操作。通过 chrome.scripting.executeScript 动态修改网页内容。