Firefox扩展开发 - 为扩展添加图标
Firefox扩展开发 - 为扩展添加图标
本文目标:为我们的第一个扩展添加一个个性图标,并在工具栏显示
系统环境:Windows、Linux和macOS任一,最新版的Firefox浏览器,本文创建时,Firefox版本为89.0.2。
上文中,我们创建了一个Firefox扩展,但是除了百度页面被加了一个边框外,我们的扩展好像不存在,现在我们开始为它添加一个工具栏图标,刷一波存在感吧。
添加图标文件
在文件夹firefox-first-extension中创建一个名为icons的新文件夹,并在文件夹中保存一个名为“icon-48.png”,大小为48x48像素的图片文件。如果你没有合适的文件,可以使用下面这个:

文件夹看起来像这个样子


编辑manifest.json
使用你喜欢代码编辑器打开manifest.json文件,添加代码,然后保存:
"icons": { "48": "icons/icon-48.png" },
"browser_action": { "default_title": "我的第一个扩展" },

预览效果
回到我们的扩展调试页面,如果你在此之前关闭了这个页面,也可以直接访问地址:about:debugging#/runtime/this-firefox,点击“重载按钮”:

如果你在完成上篇文章后重启过浏览器,则需要重新加载扩展。
留意看下右上角的浏览器工具栏:

在扩展图标上点击右键 -> 管理扩展,可以对我们的扩展的权限进行一些配置。


结束语
本文中,我们为扩展添加了一个示例的图标,并显示在浏览器工具栏中。下一步,我们将为这个按钮添加动作,没点击一次,百度首页的边框就会变化一个颜色,让我们一起期待吧。
本文创建于2021.07.16,内容具有时效性,如果您发现本文存在错误、遗漏或过时的内容,欢迎在评论区留言指正,让我们一起进步。
发布于 2021-07-16 17:39
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2021-07-09 性能测试总结(一)---基础理论篇
2020-07-09 shell判断字符串包含
2018-07-09 vim添加复制(crtl+c),粘贴(ctrl+v)ctrl+A 等快捷键