火狐浏览器插件webextensions开发发送ajax请求案例

1.建好这样的一个目录结构，其中icons存放的是插件的图标，borderify.js是代码部分，install.rdf是安装文件，manifest.json是配置文件。

2.在icons下放入一张图片

火狐浏览器插件webextensions开发发送ajax请求案例

3.在manifest.json中写入如下代码

{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a red border to all 127.0.0.1",
"icons": {
"48": "icons/border-48.png"
},

"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["borderify.js"]
}
],
"permissions": ["tabs", "activeTab", "webRequest", "webRequestBlocking", "<all_urls>"]
}

其中，前三个是必须要有的，icons指向icons目录下的文件名，content_scripts中matches是匹配哪些网站会被插件拦截，js指向插件的代码逻辑。permissions是这个插件被赋予的权限，比如说http请求的权限等，<all_urls>说明插件对所有链接释放这些权限。

4.borderify.js插件的代码逻辑

我们先在本地开启一台nginx，并配置监听8888的端口，通过nginx的access.log来观察插件是否真的向nginx发送了ajax请求
setInterval(function() {
var req = new XMLHttpRequest();
req.open("GET", "http://127.0.0.1:8888", true);
req.addEventListener("load", function() {
console.log(req.response);
});
req.send(null);
}
},2000);

5.将插件放入火狐浏览器中进行调试，在浏览器地址栏输入about:debugging即可

火狐浏览器插件webextensions开发发送ajax请求案例

点击临时载入附加组件

选中那个js文件即可

火狐浏览器插件webextensions开发发送ajax请求案例

现在在浏览器中新建一个窗口就可以进行测试了，如果自己想新添一些功能的话，就直接修改js文件，保存后点击重新载入即可。

6.插件的打包

打包之前，要写入安装文件install.rdf

这是一个通用的安装文件，里面有很多必须属性和可选属性，可以去参考webextensions的开发手册

<?xml version="1.0"?>

<Description about="urn:mozilla:install-manifest">
<em:id>{Themes_UUID}</em:id>
<em:version>Themes_Version</em:version>

<em:targetApplication>
<Description>

<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>Min_FF_Version</em:minVersion>
<em:maxVersion>Max_FF_Version</em:maxVersion>
</Description>
</em:targetApplication>

<em:name>My_Theme</em:name>
<em:description>My_Theme</em:description>
<em:creator>Your_Name</em:creator>
<em:contributor>Contributors_Names</em:contributor>
<em:homepageURL>Themes_HomePage</em:homepageURL>
<em:updateURL> Url_of_Update_Location </em:updateURL>
<em:aboutURL> Url_of_About_Page </em:aboutURL>

<em:internalName>My_Theme</em:internalName>
</Description>

</RDF>

打包之前，还要在manifest.json文件中写入插件的id，id写你们自己的，这个不能重复

"applications": {
"gecko": {
"id": "[email protected]"
}
},

火狐浏览器插件webextensions开发发送ajax请求案例