★ FEATURED ARTICLE 简介面向具备前端基础的开发者这份压缩包围绕自制Edge与Chrome标签页扩展插件的完整开发流程整理而成。内容以JavaScript、HTML、CSS及jQuery为核心从manifest.json配置与权限声明入手逐步覆盖后台脚本、内容脚本、弹窗界面等关键模块并深入讲解tabs、storage、webNavigation等常用API的实际用法帮助读者动手实现书签管理、网页增强等个性化标签页功能。同时兼顾跨浏览器兼容性差异介绍基于Chromium内核的Edge与Chrome在调试、打包及上架发布前的注意事项以及如何利用开发者工具排查脚本报错。另外还强调权限声明与用户数据安全避免过度索取权限遵循最小权限原则。压缩包约14.64MB已有1027人学习下载适合正在学习扩展开发并希望独立完成小工具的中级前端学习者可借此理清扩展工程的完整结构、API调用逻辑和发布路径。1. 自制 Edge、Chrome 标签页扩展插件一个空标签页的前端改造实验每天打开浏览器看到的都是默认的新标签页——一个大 logo、一个搜索框剩下的全是空白。某天我实在是看腻了决定自己做一个标签页扩展插件让每次新建标签页都变成一个有实用信息的面板。这个项目就是用前端技术栈HTML CSS jQuery开发的一个 Manifest V3 浏览器扩展同时兼容 Chrome 和 Edge 两款浏览器。它不是一个复杂的应用但把「浏览器扩展开发」这条链路完整走通了从 manifest 声明、页面渲染到 storage 持久化和权限配置。适合两类人一是想给自己浏览器换个样子的普通用户二是想入门浏览器扩展开发、又只有前端基础的同学。2. 项目结构与架构设计从 manifest.json 到新标签页渲染链路2.1 目录结构一个最小可运行的浏览器扩展长什么样整个项目解压之后就是一组静态文件没有构建工具、没有 Node 依赖本质上就是「网页文件 一份浏览器扩展清单」。我拆包之后先把目录结构列了一遍这决定了后面所有改动往哪里放newtab-extension/ ├── manifest.json # 扩展清单Chrome/Edge 都认这个文件 ├── newtab.html # 新标签页的 HTML 结构 ├── newtab.js # 页面逻辑jQuery 操作 DOM ├── newtab.css # 样式文件含暗黑模式变量 ├── background.js # 后台 service worker处理安装事件 └── icons/ ├── icon16.png ├── icon48.png └── icon128.png这份结构很干净——manifest.json 是扩展的身份证newtab.html 决定新标签页长什么样newtab.js 负责逻辑newtab.css 控制视觉。background.js 在 MV3 里是可选的 service worker只有需要监听浏览器事件时才必须存在。这里之所以保留它是因为扩展在安装时需要设置默认的新标签页配置没有它用户第一次打开新标签页会看到一片空白。manifest.json 的写法是整个项目的起点它决定浏览器以什么权限、什么方式加载这个扩展{ manifest_version: 3, name: 自定制新标签页, version: 1.0.0, description: 一个用 jQuery CSS 实现的自定义新标签页扩展, chrome_url_overrides: { newtab: newtab.html }, permissions: [storage], background: { service_worker: background.js }, icons: { 16: icons/icon16.png, 48: icons/icon48.png, 128: icons/icon128.png } }这段配置里最关键的是chrome_url_overrides.newtab字段它告诉浏览器「当用户新建标签页时用这个 HTML 文件替换默认页」。permissions里只声明了storage用来读写用户的个性化配置——这是 MV3 权限最小化的推荐做法能用 storage 解决的就不要申请tabs或activeTab这种敏感权限。2.2 双端兼容为什么同一份代码能在 Chrome 和 Edge 上跑Chrome 和 Edge 现在都是基于 Chromium 内核扩展机制完全统一所以这个项目能做到「一套代码双端通用」。加载方式也一样打开浏览器的扩展管理页面开启开发者模式点「加载已解压的扩展程序」选中项目目录即可。对比项ChromeEdge扩展管理页chrome://extensionsedge://extensionsManifest 版本MV3Chrome 88MV3Edge 对应版本调试方式F12 开发者工具F12 开发者工具应用商店发布Chrome 网上应用店Microsoft Edge 加载项实际开发中我一般会先用 Edge 调试因为 Edge 的开发者工具对扩展内页面的资源加载、Service Worker 状态展示得更直观排查问题效率高。但发布前一定会在两个浏览器里各跑一遍完整流程尤其是chrome_url_overrides这个字段——Edge 虽然兼容但某些旧版本对 override 页面的缓存策略和 Chrome 不同改完代码不重启扩展就会出现「页面还是旧版」的假象。background.js 在双端的行为也略有差异。虽然 MV3 统一了 service worker 的规范但 Edge 在「扩展被暂停时是否保留 worker」的处理上更激进所以我在这个文件里只处理安装和首次启动的逻辑不把定时器或长连接放进去// background.js chrome.runtime.onInstalled.addListener(() { // 首次安装时写入默认配置 // 日常调试中常被忽略修改这个文件后必须回扩展管理页点刷新 chrome.storage.local.get(settings, (data) { if (!data.settings) { const defaultSettings { userName: 访客, showDate: true, theme: light, quickLinks: [] }; chrome.storage.local.set({ settings: defaultSettings }); } }); });chrome.storage.local.get是异步的结果必须通过回调函数拿到。很多新手包括我第一次写都会直接const data chrome.storage.local.get(settings)然后读data.settings结果拿到的是 undefined——因为 API 返回值不是数据本身而是 Promise 对象MV3 也支持 Promise 写法。这里的回调风格是兼容性最好的写法两个浏览器都稳定支持。3. 核心模块拆解一个请求从进入到返回的完整链路3.1 新标签页渲染HTML 骨架与初始化流程newtab.html 是整个扩展唯一直接面对用户的页面。它的结构和普通网页几乎一样唯一需要注意的是在扩展环境下页面不能加载外部网络资源MV3 默认 CSP 限制所以 jQuery 要么打进包里要么走 CDN 但要在 manifest 里配置content_security_policy。这个项目采用的是本地引入省去配置麻烦!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 link relstylesheet hrefnewtab.css title新标签页/title /head body div classcontainer div classheader h1 idgreeting上午好/h1 p iddate/p /div div classsearch-box input typetext idsearchInput placeholder搜索或输入网址 /div div classquick-links idquickLinks !-- 由 newtab.js 动态渲染 -- /div /div script srcjquery.min.js/script script srcnewtab.js/script /body /html页面结构分三块问候区显示时间和日期搜索框实现地址栏功能快捷链接区域由 JavaScript 动态生成。jquery.min.js必须在newtab.js之前加载这是 jQuery 时代的铁律——脚本顺序错了后面代码里$(document)直接报错。newtab.js 的初始化流程是理解整个项目的钥匙。所有逻辑都挂在$(document).ready()里这是 jQuery 最常见的入口写法但在这里有个细节扩展页面的 DOM 加载时机比普通网页更早有时候ready事件已经触发过了代码还没执行所以更稳妥的写法是判断document.readyState// newtab.js $(document).ready(function () { init(); }); function init() { loadSettings(); bindEvents(); } function loadSettings() { chrome.storage.local.get(settings, function (data) { const settings data.settings || {}; // 渲染问候语 $(#greeting).text(getGreeting()); // 渲染日期如果用户关了就不显示 if (settings.showDate) { $(#date).text(formatDate(new Date())); } else { $(#date).hide(); } renderQuickLinks(settings.quickLinks || []); }); }getGreeting()按小时返回「早上好 / 下午好 / 晚上好」formatDate()把 Date 对象格式化成「2025 年 1 月 15 日 星期三」这样的中文格式这些都是一些纯函数。整个流程的核心是loadSettings()内部的回调——因为 storage API 是异步的所以 UI 渲染必须放在回调里。我在调整这个流程时遇到最典型的翻车场景是把渲染逻辑写在get()调用之后结果页面先加载了空数据、后拿到配置看起来就是「设置没保存成功」。3.2 快捷链接jQuery 动态渲染与持久化快捷链接是这个扩展「自定义」属性的核心体现。用户看到的九宫格图标本质上是一个数组配置每次增删都写回 chrome.storage。这个模块完整展示了「读取 → 渲染 → 交互 → 持久化」的前端闭环// 渲染快捷链接 function renderQuickLinks(links) { const $container $(#quickLinks); $container.empty(); // 先渲染用户添加的链接 links.forEach(function (link, index) { const $item $( a classlink-item href link.url target_blank span classlink-icon getFavicon(link.url) /span span classlink-name link.name /span /a ); // 右键点击可删除 $item.on(contextmenu, function (e) { e.preventDefault(); removeLink(index); }); $container.append($item); }); // 最后留一个「添加」按钮 const $addBtn $(div classlink-item add-btn/div); $addBtn.on(click, function () { const name prompt(请输入网站名称); const url prompt(请输入网址); if (name url) { addLink({ name: name, url: url }); } }); $container.append($addBtn); }这段代码看着简单但里面有三个细节值得说。第一href直接指向外部 URL 是安全的因为扩展页面的target_blank打开的新标签页不受父页面 CSP 限制第二删除操作用的是 jQuery 的on(contextmenu)右键菜单触发删除这在桌面端体验很自然但在触屏设备上不生效所以后面又加了一个「编辑模式」按钮作为补充第三getFavicon()函数是根据 URL 拼接 Google 的 favicon 服务地址还是本地缓存的图标这里我采用的方法是本地缓存——因为 MV3 的 CSP 会拦截一些跨域图片请求直接拼外部 URL 偶尔会翻车。持久化逻辑同样走 chrome.storage.local因为这种数据量很小不需要用storage.sync虽然 sync 能跨设备同步但对这种个人使用场景来说local 更快、更少触发配额问题// 新增链接并保存 function addLink(link) { chrome.storage.local.get(settings, function (data) { const settings data.settings || {}; if (!settings.quickLinks) { settings.quickLinks []; } settings.quickLinks.push(link); chrome.storage.local.set({ settings: settings }, function () { loadSettings(); // 保存成功后重新渲染整个页面 }); }); } // 删除指定位置的链接 function removeLink(index) { chrome.storage.local.get(settings, function (data) { const settings data.settings || {}; settings.quickLinks.splice(index, 1); chrome.storage.local.set({ settings: settings }, function () { loadSettings(); }); }); }这个实现里有个微妙的问题addLink和removeLink都是先get再set如果在短时间内连续操作「读完再写」会覆盖掉之前的结果。我调试的时候踩过这个坑——快速添加两个链接第二个把第一个覆盖了。解决方案是串行化操作或者直接维护一份内存中的 settings 副本每次操作都基于副本、最后统一写回。常见做法是前者代码改动最小。3.3 样式与主题CSS 变量让暗黑模式切换不刷新页面样式部分是这个项目里最能体现前端功力的地方。newtab.css 用 CSS 变量统一管理颜色切换主题只需要改>:root { --bg-color: #f5f5f5; --text-color: #333333; --card-bg: #ffffff; --link-hover: #e0e0e0; } [data-themedark] { --bg-color: #1e1e1e; --text-color: #e0e0e0; --card-bg: #2d2d2d; --link-hover: #404040; } body { background-color: var(--bg-color); color: var(--text-color); font-family: Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; transition: background-color 0.3s ease; } .link-item { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 8px; background-color: var(--card-bg); border-radius: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .link-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); background-color: var(--link-hover); }CSS 变量用:root定义默认值[data-themedark]选择器覆盖变量值页面里所有用到var(--bg-color)的地方自动跟着变。主题切换逻辑在 newtab.js 里// 主题切换 $(#themeToggle).on(click, function () { const currentTheme $(body).attr(data-theme) || light; const newTheme currentTheme light ? dark : light; $(body).attr(data-theme, newTheme); // 记住用户的选择下次打开还是暗黑模式 chrome.storage.local.get(settings, function (data) { const settings data.settings || {}; settings.theme newTheme; chrome.storage.local.set({ settings: settings }); }); });这段代码有个很容易忽略的点$(body).attr(data-theme, newTheme)用的是属性操作而不是.css()因为主题切换的本质是「改变 CSS 变量的作用域」class 或属性变化触发样式重算比直接操作 style 更优雅也更容易扩展。如果要加第三个主题比如护眼绿只需在 CSS 里加[data-themegreen]即可JS 一行不用改。4. 避坑与常见问题排查Edge、Chrome 双端开发踩坑实录4.1 改了代码浏览器里还是旧页面这是扩展开发里最典型的现象。明明 newtab.js 里改了背景色回浏览器新建标签页看到的还是更新前的样子。一开始我以为是缓存问题清了半天缓存也没用。原因浏览器扩展不是普通网页它有自己的加载机制。修改文件之后扩展管理页里的扩展不会自动重载新建标签页读取的还是内存里旧版本的页面文件。有些时候 Edge 会提示「扩展已更改请重新加载」但 Chrome 大多数时候不提示。解决每次修改文件后要么去扩展管理页点一下「重新加载」按钮要么用快捷键Chrome 和 Edge 都一样在扩展管理页直接刷新。我现在养成的习惯是改完代码立刻CtrlR刷新扩展卡片再新建标签页验证。4.2 chrome.storage.local.get 返回 undefined我第一次写 loadSettings 时直接const settings chrome.storage.local.get(settings)然后页面上全是空值。检查了半天发现问题不在数据写入而在读取方式是同步思维、异步现实。原因chrome.storage API 是异步的MV2 时代只支持回调MV3 开始同时支持 Promise。同步写法拿不到数据是因为函数返回的要么是 undefined、要么是 Promise 对象不是实际存储内容。解决回调写法最稳本文代码统一用回调也可以用 async/await但需要额外判断运行时环境——MV3 的 service worker 和扩展页面都支持chrome.storage.local.get返回 Promise但旧版 Edge 不一定。我一般统一用回调避免平台差异。4.3 图片资源加载不出来控制台报 CSP 错误给快捷链接配 favicon 时我最初直接在img标签里拼外部图标的 URL结果控制台报了一串Refused to load the image错误。这个问题的根因是 MV3 的默认内容安全策略CSP禁止扩展页面加载外部网络图片。原因Manifest V3 默认 CSP 是script-src self; object-src self这意味着扩展页面只能加载自身包内的资源任何来自外部的图片、脚本、样式都会被拦截。Search 框里搜 favicon 服务拼 URL 的做法在普通网页里没问题在扩展页面里就行不通。解决两个方向。一是把常用网站的图标直接打进 icons 目录用本地路径引用二是在 manifest 里显式声明宽松的 CSP不推荐会降低安全性。我采用的是本地缓存方案因为标签页的快捷链接数量有限十几个静态图标文件大小可以忽略。4.4 jQuery 文件引入顺序错了控制台报 $ is not definednewtab.html 里我把script srcnewtab.js放在了jquery.min.js前面打开页面后$直接报未定义整个页面逻辑全部失效。原因HTML 是顺序加载脚本的newtab.js 执行的时候jQuery 还没有被加载进全局作用域。这不是浏览器扩展特有的问题普通网页同样存在但因为扩展页面没有网络加载延迟问题出现得比较隐蔽——有时刷新一次就好了让你误以为是偶发 bug。解决把 jQuery 的script标签放在所有用它脚本的前面。这里还涉及一个细节MV3 的 CSP 不允许使用eval()所以某些压缩版的 jQuery CDN 文件在扩展环境里会报错用本地文件就没这个顾虑。4.5 Edge 里功能正常打包发布时却报包结构错误做完功能之后我想把它打包成 .crx 或 .zip 分享给朋友测试结果在扩展管理页直接点「打包扩展程序」报错提示 manifest.json 缺失。检查目录结构文件明明在那里。原因扩展打包要求的目录层级和我平时的开发目录不一样。我当时的目录是「项目文件夹/newtab-extension/manifest.json」但打包时选的是「项目文件夹」这一层浏览器在那一层找不到 manifest.json。解决打包时选中直接包含 manifest.json 的那一级目录。另外打包前把用不到的调试文件比如 README、截图删掉不然都会打进包里——虽然不影响运行但会白白增大体积。一个 git 仓库对应一个扩展包不要在一个仓库里放多个版本的 manifest。5. 二次开发改造从固定版标签页到可配置数据面板这个项目的扩展潜力比表面看起来大因为它的架构天然支持「数据与视图分离」——新增模块不需要改 HTML 骨架只要往 settings 里加字段、在 newtab.js 加一个渲染函数就行。我试过三个改造方向都跑通了。第一个是加天气展示从某个公开天气 API 拿数据存到settings.weather渲染到搜索框下方的独立区域。需要注意的是 MV3 跨域请求限制——扩展页面直接 fetch 外部 API 会触发 CORS 和 CSP 双重拦截常见做法是把请求发到 background 的 service worker由它转发或者申请对应的host_permissions。我选择在 manifest 里给天气 API 的域名加白名单这一行配置比绕道转发简单得多。第二个方向是搜索框接管浏览器地址栏行为。原生 newtab 页按回车就会去搜索结果我这里只做了简单的「检测输入是否包含.是则当 URL 打开否则转搜索引擎」。改造点在bindEvents()里加一个keydown监听用window.location.href跳转。搜索框的样式直接复用.search-box的 CSS不用加新样式。第三个方向是把配置导出导入。当快捷链接积累到十几个、主题还带偏好时重新安装浏览器后手动配置很痛苦。我给设置项加了个「导出 JSON」按钮JSON.stringify(settings)生成文件导入时用input typefile读取 JSON、JSON.parse后写回 storage。在动手改之前给想二次开发的同学一个验证清单改完 manifest 先回扩展管理页刷新再新建标签页按 F12 打开开发者工具看 Console 有没有报错storage 配置改完重启浏览器确认配置还在双端Chrome 和 Edge都得跑一遍重点验证chrome_url_overrides和 CSP 行为。这个项目让我最深的教训是浏览器扩展的调试链路和普通网页完全不一样它有一套自己的生命周期——加载、刷新、权限校验、CSP 拦截。从那以后我每次改完代码都强制走一遍「刷新扩展 → 新建标签页 → 查 Console → 重启验证」的完整流程再也不会盯着页面干瞪眼。希望帮到你这份扩展源码值得动手拆一遍。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
