WebExtension是一个打包好的、可供发布的安装包，该安装包中包含若干文件，主要用于跨浏览器开发附加组件的工具。
火狐自45版本开始全面支持WebExtension开发浏览器扩展，并逐渐边缘化XPCOM 和 XUL，预计到2017年，WebExtension将成为火狐唯一合法的扩展开发方式。
用了火狐很多年，一直没了解过其扩展开发流程，这次正好简单熟悉一下。
WebExtension扩展必须包含一个名为manifest.json的文件，文件内包含有关扩展的基本元数据，例如它的名称，版本和它需要的权限。它也提供了指向扩展需要的其他文件。这也是之后通过about:debugging测试所需添加的唯一文件。
manifest.json可以指向以下几种类型的文件：
111.png
我们今天要做一个简单的插件，能实现以下功能：
1.在工具栏增加了一个新的按钮
2.当用户点击该按钮，我们会显示弹出使他们能够选择一种动物。
3.一旦他们选择的动物，我们将取代当前页面的与所选动物的图片内容。
根据需求，我们可以得出插件的结构图：
222.png
首先编写最重要的manifest.json文件
{
"manifest_version": 2,
"name": "Beastify",
"version": "1.0",
"description": "添加一个可以通过点击选择更换页面内容的插件",
"icons": {
"48": "icons/48.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icons/32.png",
"default_title": "Beastify",
"default_popup": "popup/choose_beast.html"
},
"web_accessible_resources": [
"beasts/frog.jpg",
"beasts/turtle.jpg",
"beasts/snake.jpg"
]
}
其中参数manifest_version，name和version这三个参数都是必填的：
manifest_version 必填，值固定为2，额，你使用的版本就是第二代，总不能填3吧^ v ^
name 必填，是你插件的名字，这个随便你取，到时候显示在浏览器上的就是这个名字
version 必填，是你插件的版本，看你自己的情况定。
description 选填，是对你插件功能的描述
icons 选填，是插件的图标，注意，这里定义的图标是显示在附加组件里面的，而不是工具栏上的，一般默认大小是48x48
permissions是设置列表权限的，这里我们只需要简单的actionTab功能即可
browser_action是对工具栏操作的具体描述：
default_icons 必填，展示在工具栏上的图标，一般大小为32x32
default_title 选填，鼠标悬停在图标上显示名字
default_popup用于点击插件按钮后展示的页面，在这里必填，如果只有一个功能可以不填（即点击即用）
web_accessible_resources列出了我们要替换网页的文件，在这里必填
有了manifest.json文件后，我们就可以对所需文件进行一一配置。
在同目录下，创建beasts，icons，popup这三个文件夹，分别用于存放用于替换的动物图片，48和32两类插件图标和插件的操作界面
创建完后大概像这样：
333.png
动物图和图标就大家自己去弄了哈，把自己喜欢的图片添加进去就行了，但是注意哦，插件图标的大小是48和32两种格式哦，当然，在附加组件里面的图标可以使用96x96的。
这里我们再来说说popup这个文件，里面存放的就是我们插件的操作界面
你可以根据自己的喜好设计，因为只是测试，就怎么简单怎么来啦！我反正就用了简单的三个文件。
444.png
HTML文件看起来是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="choose_beast.css"/>
</head>
<body>
<div class="beast">Frog</div>
<div class="beast">Turtle</div>
<div class="beast">Snake</div>
<script src="choose_beast.js"></script>
</body>
</html>
CSS加了点颜色和光标选择变化：
html, body {
width: 100px;
}
.beast {
margin: 3% auto;
padding: 4px;
text-align: center;
font-size: 1.5em;
background-color: #E5F2F2;
cursor: pointer;
}
.beast:hover {
background-color: #CFF2F2;
}
js则是点击选项后跳转到具体操作的脚本文件：
/*
给定一个动物的名字，得到相应的图像的网址
*/
function beastNameToURL(beastName) {
switch (beastName) {
case "Frog":
return browser.extension.getURL("beasts/frog.jpg");
case "Snake":
return browser.extension.getURL("beasts/snake.jpg");
case "Turtle":
return browser.extension.getURL("beasts/turtle.jpg");
}
}
/*
监听鼠标点击事件
如果点击了动物的名字
就给beastify.js发送一个消息根据点击的内容选择相应的图片
如果没有点击列表中的内容
If it's on a button wich contains class "clear":
Reload the page.
Close the popup. This is needed, as the content script malfunctions after page reloads.
*/
document.addEventListener("click", (e) => {
if (e.target.classList.contains("beast")) {
var chosenBeast = e.target.textContent;
var chosenBeastURL = beastNameToURL(chosenBeast);
browser.tabs.executeScript(null, {
file: "/content_scripts/beastify.js"
});
var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
gettingActiveTab.then((tabs) => {
browser.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
});
}
else if (e.target.classList.contains("clear")) {
browser.tabs.reload();
window.close();
}
});
创建一个新的目录下的附加根，被称为“content_scripts”，并创建一个新的文件叫“beastify.js”，这个文件用于处理choose_beast.js传来的信息
/*
beastify():
* 移除页面中的节点
* 插入选择的图片
* 然后让自己成为监听对象
*/
function beastify(request, sender, sendResponse) {
removeEverything();
insertBeast(request.beastURL);
browser.runtime.onMessage.removeListener(beastify);
}
/*
移除页面中的节点
*/
function removeEverything() {
while (document.body.firstChild) {
document.body.firstChild.remove();
}
}
/*
分配一个url给图片，
设置图片的各类参数 ，
最后把配置好的节点插入其中
*/
function insertBeast(beastURL) {
var beastImage = document.createElement("img");
beastImage.setAttribute("src", beastURL);
beastImage.setAttribute("style", "width: 100vw");
beastImage.setAttribute("style", "height: 100vh");
document.body.appendChild(beastImage);
}
/*
Assign beastify() as a listener for messages from the extension.
*/
browser.runtime.onMessage.addListener(beastify);
这样就大概完成了这个插件，如果要测试可以在浏览器中输入：about:debugging
会出现以下界面：
555.png
点开临时加载附加组件然后选择manifest.json这个文件
666.png
选择打开就可以看到自己附加组件里面多出了自己开发的插件。
777.png
如果想要其他人使用你的插件，你需要打包，并将其提交给Mozilla签名。有了证书之后，就可以和大家分享你的成果了！
本文的内容均根据Mozilla的官方教程而来，如果想要深入学习的，可以多花花时间去看看哦，附上链接：
https://developer.mozilla.org/en-US/
网友评论