Firefox扩展开发 - 入门篇
Firefox扩展开发 - 入门篇
本文目标:创建第一个Firefox扩展(又叫附加组件,Addons),这个扩展的功能只有一个:为 https://www.baidu.com 这个网站添加一个红色的边框。
系统环境:本文同时适用于Windows、Linux和Macos系统,文中截图使用的是Macos,Firefox版本为:89.0.2,建议你安装最新版的Firefox浏览器,下载链接:
下面我们开始正式的教程。
创建manifest.json
首先在本地任意位置创建一个文件夹,我们以firefox-first-extension为例,然后在firefox-first-extension文件夹中创建一个名为“manifest.json“的文本文件,注意,文件的扩展名为".json"。文件的内容如下:
{
"manifest_version": 2,
"name": "我的第一个扩展",
"version": "1.0",
"description": "这里是一些对扩展的描述,例如:为百度首页添加红色边框。",
"content_scripts": [
{
"matches": ["*://www.baidu.com/*"],
"js": ["content_script.js"]
}
]
}
以上内容你可以先保持不变,先让我们的扩展运行起来,稍后再来做详细的解释以及细节的修改。
创建content_script.js
在firefox-first-extension文件夹下,创建一个名为“content_script.js”的新文件,文件内容如下:
document.body.style.border = "1px solid red";
![](https://pic4.zhimg.com/80/v2-d2cab6e5c6945f1c28e026d5d124a98b_1440w.jpg)
以调试模式加载扩展
打开firefox浏览器,点击工具栏右侧的应用程序菜单,如下图所示:
![](https://pic4.zhimg.com/80/v2-ff2de8a7931257ab70fba5702381d153_1440w.jpg)
然后在新打开的页面中点击设置按钮,如下图
![](https://pic4.zhimg.com/80/v2-24aa8c7fcd96f057ecc056f279d802d3_1440w.jpg)
点击“调试附加组件”菜单
![](https://pic2.zhimg.com/80/v2-f1164164b393322e7de62bd2e7dbd4bd_1440w.jpg)
点击“临时载入附加组件”按钮
![](https://pic1.zhimg.com/80/v2-00bc61e83ac520d4e0245762f17fbf34_1440w.jpg)
在弹出的选择框中,找到并选中我们刚才创建的manifest.json文件,然后点击打开:
![](https://pic2.zhimg.com/80/v2-2dfa29987ef95ecd3bda1c3faa8c7e01_1440w.jpg)
如果前面的操作都没有错,会打开下面的页面
![](https://pic2.zhimg.com/80/v2-2066c29c4f2925410ee92d7fbe052d51_1440w.jpg)
验证效果
让我们打开一个新的标签页,输入网址:https://www.baidu.com,看看效果
![](https://pic4.zhimg.com/80/v2-5933d0b8d24f680bd5377c2291c32c57_1440w.jpg)
红色的边框已经出现了。
修改显示效果
我们尝试进行第一次简单的效果修改,使用编辑器修改文件content_script.js,新的文件内容如下:
document.body.style.border = "1px solid green";
![](https://pic2.zhimg.com/80/v2-cebcdda6025d36fe8c718173701d8e55_1440w.jpg)
实际上,我们只是把红色边框改为了绿色。
回到firefox浏览中来,进入我们的扩展调试页面,也就是这个
![](https://pic4.zhimg.com/80/v2-b97040a9bd1f4d3bfabbe9e23b65e993_1440w.jpg)
点击红色框中的“重载”按钮,由于我们的文件很少,重载过程非常短暂,你可能看不到任何提示,不要担心,让我们回去检查一下http://baidu.com的页面:
![](https://pic3.zhimg.com/80/v2-aec7e2edeb54494d9b01ceab4e343122_1440w.jpg)
边框已经变成了绿色了。
manifest.json说明
"manifest_version": 2
manifest的版本号,不能省略,且只能是数字2
"name": "我的第一个扩展"
扩展的名字,你可以根据自己的需要进行修改
"version": "1.0"
扩展的版本号,这个是根据你的具体需求还填写的,可以简单的做递增,下一个版本号写成1.1,1.2,1.3等等
"description": "这里是一些对扩展的描述,例如:为百度首页添加红色边框。"
扩展功能概述
"content_scripts": [
{
"matches": ["*://www.baidu.com/*"],
"js": ["content_script.js"]
}
]
将要被注入到网页中的脚本,是一个数组,可以指定多组规则。
matches是注入规则,这里先不详细讲。
js是注入的脚本文件,可以同时注入多个脚本,脚本的执行顺序取决于脚本在这个数组中的顺序。注入到网页中的脚本,就拥有了和网页中原有js脚本相同的权限,你可以根据自己的需要编写特定的脚本来对网页进行修改。
结束语
现在,我们创建了第一个扩展,实现了对https://www.baidu.com的简单修改,后面我们将要开发更多更高级的功能,并尝试将我们创建的扩展提交到firefox扩展市场供其他的小伙伴使用,是不是很期待?我们下次见吧。
本文创建于2021.07.16,内容具有时效性,如果您发现本文存在错误、遗漏或过时的内容,欢迎在评论区留言指正,让我们一起进步。