开发OneNav浏览器扩展：我的经验分享
开发OneNav浏览器扩展：我的经验分享
最近我们发布了OneNav浏览器扩展版本，这也是第二次重构后的版本，期间遇到了一些技术难点，不过最后得以解决，所以打算用这篇文章分享xiaoz在开发OneNav浏览器扩展中用到的技术和经验。
关于OneNav
OneNav是一款开源免费的书签（导航）管理程序，由xiaoz使用使用PHP + SQLite 3开发，界面简洁，安装简单，使用方便。OneNav可帮助你你将浏览器书签集中式管理，解决跨设备、跨平台、跨浏览器之间同步和访问困难问题，做到一处部署，随处访问。
还不了解OneNav的朋友可以参考这篇文章： 一篇文章带你快速了解开源免费的书签（导航）管理程序OneNav
两次重构与技术选型
OneNav浏览器扩展是发布以来的第三个版本，期间经历了两次重构。
第一个版本
首次重构
第二个版本进行了重构，使用“Vue3 + vitesse-webext + Vant 4”这样的技术组合，实际上线后发现存在以下问题：
最后不得不放弃“vitesse-webext + Vant 4”这样的方案。
二次重构
第三个版本，也就是现在的版本，再次进行了重构，这次采用的技术方案是“Vue3 ++ Element Plus”，WXT是下一代Web扩展框架，优点在于他可以通过一套代码编译出适用于Chrome/Firefox/Safari浏览器的扩展。这一点特性显得尤为重要，不然每个浏览器都去单独开发和适配，工作量属实不小。
在使用
vitesse-webext
方案的时候遇到了Firefox编译问题，而在中编译上非常轻松，不同的浏览器都顺利通过编译。
WXT开发浏览器扩展的一些经验
在实际使用WXT开发过程中并不是那么顺利，期间也遇到了不少问题，不过最后得以解决，于是整理了下面的经验。
编译代码
WXT默认编译的是Chrome扩展，直接使用命令：进行编译，编译后的目录在
.output/chrome-mv3
，如果需要编译Firefox扩展，只需要加上参数即可：
# WXT编译Firefox扩展
pnpm build --browser firefox --mv3Firefox默认使用的版本，为了避免后续升级问题，我直接添加了参数来指定最新的版本。
同理，如果需要编译Edge扩展，使用下面的命令：
pnpm build --browser edge本来xiaoz还打算支持Safari，奈何苹果过于封闭，没找到Safari安装第三方扩展的方法，导致无法调试，于是不得不放弃支持Safari浏览器。
WXT在Firefox中遇到的问题
在我编译Firefox扩展后，打算在Firefox下进行调试，发现Firefox无法安装第三方扩展，会提示“此附加组件无法安装，因为它未通过验证”，可以直接参考这篇文章《 Firefox提示“此附加组件无法安装，因为它未通过验证”解决办法 》进行解决。
Firefox浏览器扩展必须在
manifest.json
中指定ID，否则安装和上架的时候会提示ID不存在，导致无法安装。我找遍了WXT文档，并没有发现关于Firefox ID的指示，于是我是编译后手动修改
manifest.json
，添加了下面的内容来指定ID：
"applications": {"gecko": {"id": "oneNav@example.com"}}之所以Firefox扩展需要ID，ChatGPT是这样解释的：
Chrome浏览器不需要这个ID，否则会出现警告提示（不影响扩展运行）！！！
上架浏览器扩展
目前xiaoz已将OneNav浏览器扩展分别上架到了 Chrome WEB Store / Firefox ADD-ONS 以及Microsoft-Edge-Extensions，不过Microsoft-Edge-Extensions还在审核中，Chrome和Firefox已经上架。
Chrome/Edge/Firefox分别对应的开发者平台如下：
其中Chrome需要支付的一次性开发者费用，而Edge和Firefox则是免费的，不需要任何费用即可提交您的扩展。提交扩展时根据平台的规则指示操作即可，有以下几个地方需要注意：
给我的感受是Chrome平台最规范，最严格，每一个扩展权限开发者都必须做出明确的解释为什么要用到这个权限，而Edge和Firefox则要宽松很多。
辅助工具
开发过程中，xiaoz就用到了一个第三方辅助工具，是用来生成不同尺寸的扩展图标，地址是： Chrome Extension Icon Generator
结语
以上就是xiaoz在开发OneNav浏览器扩展的一些心得和经验分享，希望对各位开发者有所帮助。如果您打算支持多个浏览器，强烈推荐试一下这个下一代Web扩展框架，能提高不少效率。
另外我创建了一个浏览器扩展开发的交流群，有兴趣的朋友可以微信扫码加入。
如何开发Chrome浏览器扩展程序
先进入chrome 网上应用店，进入方法有多种，可以直接在浏览器地址栏输入应用店的地址或者点击“设置”→“扩展程序”→“安装扩展程序”
Chrome扩展开发入门 2.怎样使用Chrome Extensions API
Google提供的Chrome Extensions API是开发Chrome扩展用到的最权威资料之一，里面详细介绍Chrome扩展所能够实现的各方面的功能和Chrome浏览器所提供的接口（比如怎么调用用户书签）。 使用步骤如下：1. 后台HTML里的JS在浏览器被打开时就开始执行了，当浏览器关闭时停止工作。 你可以在这里写一些代码监视浏览器动作（比如在监视到用户创建了一个新标签页时邪恶的把它关闭,可以做定时任务（setInterval等），可以添加一段音乐。 2. 用户点击扩展栏图标时可以弹出一个页面，当用户点击网页部分时这个页面就被关闭了。 3. 可以使用js获取用户当前网页的DOM数据，监听用户键盘、鼠标动作。 这些代码是一个独立的JS文件（而不是像后台、弹出窗等是一个HTML文件里的嵌入js代码），通过扩展配置注入到相应的网页。 4. 读取用户计算机数据（NPAPI Plugins）。 这个功能要用到dll（动态链接库）知识，可以启动用户电脑的程序，删除用户文件等功能。 相当于一个小Windows程序。 利用Chrome提供的方法可以让扩展的后台页面与你的dll通信。
如何开发360浏览器插件
1、我们先创建一个文件夹，名字随便取2、然后在该文件夹下，创建一个文本文件，命名为，其内容为{ manifest_version: 2, name: One-click Kittens, description: This extension demonstrates a browser action with kittens., version: 1.0, permissions: [], browser_action: { default_icon: , default_popup: }}3、然后在创建一个名为的文本文件，再找一张图片，名为作为插件的图标。 4、在里的内容就是我们点击插件后显示的 内容，我在文件里面的 代码是
Wow!Handsome!
，大家也可以自己编写。 接下来我们就要加载插件了。 5、打开360极速浏览器，在右上角点击有三道横杠，在菜单中选择工具>扩展程序或 管理扩展，这会打开扩展管理的页面6、选中 开发人员模式，再点击 加载已解压的扩展程序，在弹出的 窗口选择你的文件夹7、最后在右上角便会出现你的图标，点击它就会显示我们的内容了！ 福建师范大学研究生信息系统 医生中专学历出路 西南石油大学在职研究生 商品销售收入 苏宁快递管理平台官网 压路机液压系统 汇源通集团 贵州专升本英汉互译本文地址： https://www.q16k.com/article/20fe8b484452d723fda3.html
开心电视网提供全面的机顶盒固件下载,电视盒子固件,联通机顶盒固件下载,电信机顶盒固件下载,移动魔百和固件下载,刷机救砖,电视ROM固件下载,第三方固件下载,智能电视ROM固件下载、官方刷机升级救砖固件下载，覆盖主流的海信电视固件,TCL电视固件,康佳电视固件,长虹电视固件,乐视电视固件,小米电视固件,魔百和固件,华为盒子固件,英菲克固件,迪优美特等等品牌固件,体验一站式刷机升级救砖服务,体验到刷机带来的乐趣
专注分享免费、绿色、无毒、无捆绑的实用软件资源！
PhotoshopPSD和Mockups!模板、手册、Photoshop元素及更多✓免费下载✓无版权，供个人和商业使用
该站点未添加描述description...
Ningbo Xingya Auto Parts Co., Ltd.
该站点未添加描述description...
会计之窗为您提供专业详细的会计电算化,注册会计师报名条件,会计科目表,会计资格评价网,会计基础教程,会计科目等信息。
该站点未添加描述description...
合肥365淘房为您提供合肥新房，合肥楼盘，合肥房价查询以及全面的合肥楼盘信息，合肥热门楼盘信息，合肥在售楼盘信息,合肥2018年房价信息。更多合肥新房楼盘信息，尽在合肥365淘房。
雷神号是一个专门为用户访客提供最新的手机应用下载，最火爆的手机游戏下载，最热门的新闻资讯浏览的综合型网站平台，在这里会每天不断更新最优质安全软件游戏以及最新的资讯，为用户带来最好的体验。
倒计时器提供计时器，倒计时，秒表计时，网页倒计时，在线计时器，秒表计时器，倒计时在线使用等。
旅法师营地是有温度的玩家聚集地。在这里你可以看到各种游戏内容，包括炉石传说、万智牌、月圆之夜、宝可梦、幻兽帕鲁、影之诗、博德之门3等游戏的资讯，超专业的攻略，超有趣的故事，超好用的工具。
lol精彩集锦戏命师@
型号查询系统的轴承数据是以国家标准和行业标准为依据，参照中外轴承书籍整理而成，本系统是由PHP程序语言开发二次，该系统囊括了数十万轴承型号，保护了国内外知名轴承品牌例如：GMN轴承、GRW轴承、FAG轴承、INA轴承等等知名品牌轴承，并且轴承程序再不断完善中。
Shandong Zhongji Intelligent Equipment Co.,LTd.
奋斗号每日发布各领域值得关注的干货信息,为努力奋斗的年轻人提供最前沿的资讯,致力于让迷茫的年轻人早日找到属于自己的人生方向。
户外炊具,驴友论坛(bbs.lvy.cn)是驴友活动、背包客穷游、自驾等户外活动论坛！
该站点未添加描述description...
我叫mt进化攻略护肤品对于美妆养颜具有一定的功效，随着人们经济能力的提升，对护肤品的要求也越来越高，在市面上的护肤品品牌也越来越多，其效果也是参差不齐，那么市面上哪些比较好的护肤品品牌呢？下面，就快和360常识网一起了解十大好口碑护肤品品牌排名吧！本文目录1、雅诗兰黛EsteeLauder2、兰蔻LANCOME3、SK-II4、欧莱雅LOREAL5、...
龙在2月2日抬头。记住要吃这些“龙粮”，并把它们送给有“龙神”的家庭。农历二月初二是中国的传统节日“龙头节”，也叫“龙节”。自古以来，就有“二月二日，龙抬头”和“二月二日，剃光头”的民间谚语。据说在这一天剪头发可以给人们带来一年的好运，寓意“龙抬头，走好运”。因此，每年2月2日，大大小小的理发店都充满了节奏，毕竟人们都想做出好的标志。...
冬天，你想锻炼身体，害怕寒冷。现在春天来了。当春天温暖，鲜花盛开的时候，你应该适当的锻炼来保持健康和苗条。如果你想减肥，你应该多锻炼。今天，这只小贪吃猫给我们带来了一种美味的食物，那就是芋头红薯汤。想减肥的男人和女人都可以吃。健康减肥餐，定期喝一碗，排便顺畅，红薯和芋头营养价值高，也是一种滋补食品。减肥的朋友不应该错过它。无论男女都喝...
黄瓜籽粉是一种保健食材，是人们收集黄瓜的成熟种子后经研磨加工得到的粉末状物质，他能为身体补充丰富营养，并能保健身体延缓衰老，想知道吃黄瓜籽粉的具体功效与作用，可参考下面对它做的详细介绍，能让大家知道吃黄瓜籽粉的好处有哪些。黄瓜籽粉人功效与作用1、促进骨骼发育促进骨骼发育，提高骨骼韧性与密度，是人们吃黄瓜籽粉的重要功效，因为黄瓜籽粉中含...
馒头是用牛奶和鸡蛋做成的，但是他们不知道如何用它来做面条。馒头更蓬松。大家好，我是傻姐姐的食物，只有食物和美丽的风景才能对得起。最近，每个人对面粉的热情都在上升。蛋糕、冷皮和煎饼在家忙吗？这就是为什么许多人喜欢意大利面。可以说吃面粉的最好方式是馒头，这是面食中的佼佼者。要学会做意大利面，必须学会蒸馒头。如果馒头做得好，就比蛋糕和面包好...
国际甜食展览会ISM每一年1月份为何在德国科隆举行呢？因为德国具有欧洲最大的甜食损耗墟市！手脚欧洲人均甜食损耗量第一的国度，德国在过去50年里人均甜食消磨从23公斤增至38公斤。德国甜食联合会（BDSI）的数字映现，德国人年均消磨11.69公斤巧克力，一样排名欧洲第一。相干浏览：浅谈德国巧克力衣袋里的巧克力RitterSport香甜之...
白花菜人们都不陌生，知道它是自然界中常见的野生草本植物，但对它的具体功效与作用人们了解的并不全面，其实白花菜既能当蔬菜食用又能入药，是一种利用价值极高的存在，它的实用功效与药用功效都极为出色，只是在食用时也存在一些禁忌，大家在食用它以前最好能多做了解。白花菜的功效与作用1、补充营养平时人们多吃些白花菜，能为身体补充丰富营养，因为白花菜...
俗话说吃啥补啥，冬季餐桌肯定少不了一起滋补养生菜，它就是青椒洋葱炒猪肝，猪肝肉质鲜嫩，比猪肉更受欢迎，搭配洋葱和青椒更加美味，吃起来不会油腻，猪肝想要鲜嫩爽滑，猪肝入味，一定要记住这几个诀窍，常食洋葱青椒炒猪肝，养肝护肝，改善视力，补血补铁等作用，女性吃了预防贫血，孩子吃了改善视力，你们有没有吃过青椒洋葱炒猪肝？一起谈一谈这道猪肝的正...
罗技G502在2014年就让游戏玩家惊叹不已，但后来又发生了变化，最终推出了新的改进版G502X。是的，它有一个升级的25K英雄传感器，可以很好地提高速度和精度，但G502X最令人印象深刻的是按钮被磨练到近乎完美的方式。很少有游戏鼠标有如此易用的按钮布局，这总是使这款新型号成为2023年你可以购买的最好的全能有线游戏鼠标之一。注：查看...
无意冒犯微软商店，但它并不是发现新Windows软件的最令人兴奋的地方。细读微软的官方应用商店，你会发现大多数显而易见的东西，Word、AdobePhotoshop和Zoom等应用程序占据了首页。虽然这家商店确实有一些隐藏的宝石，但大多数展出的东西感觉太干净了。如果你正在寻找惊喜和快乐，真正的行动就发生在Github身上。微软在201...
微软上个月警告我们，我们最喜欢的Windows升级漏洞已经被堵住了，但现在它是正式的：激活服务器不再允许你使用Windows7或8许可证密钥来激活Windows10或11。这一变化本周得到了TheVerge的确认，该公司早些时候发现，微软在9月20日发布声明后，并没有立即屏蔽Windows7和Windows8的按键。当然，免费升级的终...
微软似乎已经将其下一个人工智能增强功能隐藏在Windows11：自动超级分辨率的测试版本中，这可能是微软对NVIDIA的DLSS等图像增强技术的回应。然而，它似乎同样可能是一个重要的控件，就像动态照明功能一样。推特用户@PhantomofEarth是本周第一批报告这项隐藏在Windows11版本26052中的新功能的人之一。这一版本现...
像许多人一样，你的网络生活可能与谷歌紧密相连，从搜索和Gmail到谷歌日历和YouTube。您的电脑、手机和平板电脑可能会连接到您的Google帐户。你甚至可能拥有一部需要访问谷歌网站和服务的Android手机。作为一名谷歌用户，你如何才能控制住你账户上的所有信息，这样其他人就不能访问它了？谷歌提供了一个有用的安全检查工具，可以显示您...
你看到标题了吗？关于一份年薪33.5万美元而不需要计算机工程背景的人工智能工作？这可不是闹着玩的：“AI提示工程师”这个角色是一个真正的职业。但是，尽管在一个几乎没有经验的新兴领域赚到这么多钱会很令人惊讶，但事情并没有那么简单。生成性人工智能(AI)工具–包括ChatGPT、谷歌的Bard、MidTriff、Dall-E等–要求用户会...
2024没有喷气式背包和会飞的汽车，但对我们许多人来说，一个童年的幻想还没有成为现实：体育。在世界各地，人们玩电子游戏是有报酬的，职业游戏玩家之间激烈的金钱追逐产生了高度娱乐性的观看体验。竞技、专业的视频游戏充满了如此多的戏剧性和如此多的令人难忘的时刻，以至于它是纯粹的壮观和荒谬的最佳整体体育赛事之一。而且，考虑到这些面孔和高跟鞋，酷...
Instagram故事很容易创建，但如果您想让它们真正有趣，可能需要大量思考。值得庆幸的是，Meta提供了许多工具来帮助您的故事尽可能有趣，包括过滤器和贴纸。然而，你的故事可能仍然缺少一个重要元素：音乐。Instagram允许您从其自己的库或您最喜欢的音乐流媒体服务（例如Spotify、SoundCloud和Shazam）中添加歌曲。...
xlsx是一种流行的电子数据表格文件格式，由微软Excel创建和管理。在xlsx之前，使用的常用文件格式是xls，它是纯二进制文件格式，而xlsx的核心结构是xml类型的结构，占用的空间更小。本文详细介绍下xlsx是什么格式的文件？xlsx怎么打开？一、xlsx是什么格式xlsx是microsoftexcel电子表格文档的格式文件，也...
当前全球搜索引擎市场份额由Google主导，Bing和Yahoo的市场份额目前分别为2.55％和1.66％，总计不到5％，所以目前SEO操作多以Google为主，不过有些希望做到精益求精的朋友，会想知道该怎么做雅虎SEO排名，或是想了解雅虎关键词排名与Google有什么差异，今天狂人SEO整理出重点供大家参考，一、YahooSEO站长...。
大家好，关于庄周是法术还是物理很多朋友都还不太明白，今天小编就来为大家分享关于庄周的法术出装的知识，希望对各位有所帮助！本文目录一、庄周平a是什么伤害1、庄周平a敌人可以有500的法术伤害，用二技能黏住敌人，再平a可以有效提高伤害2、庄周技能主1副2，庄周的2技能冷却时间很短，线上的时候开启2技能上去耗血，然后用1技能消耗敌人的血量。...
贡菜的光彩苍翠，口感特地爽气，吃起来没有只甘旨，并且还特地解腻。生存旁边，大师烹调贡菜时，往往宠爱搭配一些肉类，如许恐怕补充贡菜的香味。那末此日小编即来为大师瓜分一路贡菜炒肉，这讲菜肴没有只做法简明，并且也很养分安康。底下我们即来一同看看这讲菜肴的简直烹制花样吧！天冷后，没有妨要多食它，甘旨下饭，解浓重，软化血管，血管流通了。【贡菜炒...
一到冬季，气候变凉此后，人们便相当爱好吃炖菜，有绝对于猪身上的部位干出来的炖菜深受人们的欢送，这个部位是猪身上最脏的一个部位，经历它来渗出的，大师恐怕皆猜到了，它即是猪大肠。这是一个典范的听起来臭吃起来香的部位，没有过想要猪大肠炖出菜来又香又好吃，是须要审慎的往责罚荡涤一下的，即使荡涤没有纯洁，猪肉的腥味即很大，更添臭，没有方法干出好...
要做这种酱，必须多吃一碗面条，和面糊一起烘烤。10分钟的早餐蛋糕是超软的~superqsuperdelicious红烧猪肉丸豆腐待炒以至于觉得米饭不够吃~如何用砂锅煮银耳胶(关键是要节约用火~)...
红薯又称地瓜、甘薯，此刻有些翻身当“白领”的认为，在几何外婆、奶奶辈的人眼里，那货色可实的没甚么好吃的，小功夫没货色吃常和饭煮在一统，干成红薯稀饭吃，吃得皆有些反胃了。最多也即是煮好后干成甘薯片，晒干后油煎着吃，那已算极至奢华了。然而，此刻的红薯，早已没有再是简明的填饿物了，它也常被干成时髦的点心或许饮品，发明在昂贵的餐厅里，更因其强...