关于FireFox扩展插件的示例演示

如何使用WebExtension制作一个firefox浏览器的扩展?下面是详细步骤

（一）效果目标：

该扩展的目的是在火狐浏览器中的工具栏中添加一个新的按键（图1-1），当用户点击该按钮时，按钮下方弹出来一个下拉框，其中有三个选择键（图1-2），分别是青蛙、蛇以及乌龟。当选择任意一种动物时，页面展现出来相对应的图片（图1-3）。

图1-1

图1-2

图1-3

（二）目录结构：

beastify
	-beasts
		-frog.jpg
		-snake.jpg
		-turtle.jpg
	-button
		-beasts.png
	-content_scripts
		-beastify.js
	-icons
		-beasts-48.png
	-popup
		-choose_beast.css
		-choose_beast.html
		-choose_beast.js
	-manifest.json

首先需要创建这样一个目录文件，相关资源可以在这里进行下载（。。）

接下来一一介绍这些文件中的内容

1、manifest.json

{
  "manifest_version": 2,
  "name": "Beastify",
  "version": "1.0",

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

  "permissions": [
    "http://*/*",
    "https://*/*"
  ],  

  "browser_action": {
    "default_icon": "button/beasts.png",
    "default_title": "Beastify",
    "default_popup": "popup/choose_beast.html"
  },
  
  "icons": {
  "48": "icons/beasts-48.png"
},
  
  "web_accessible_resources": [
    "beasts/frog.jpg",
    "beasts/turtle.jpg",
    "beasts/snake.jpg"
  ]

}

代码中写在最前的三个属性: manifest_version, name, version, 是必须的并且包含了插件最基本的信息。
description 和 homepage_url 是可选的，但是推荐填写，但我没写哈哈。
icons 也是可选但最好是用推荐的，它决定了插件在附加组件中的图标。
permissions 列出了插件所需要的权限。在这里我们需要的是 activeTab permission。这个activeTab是API权限的关键字，还有好多关键字。
browser_action 确定了工具栏按钮的响应。我们支持下面三种信息:
- default_icon 是必须的，指定了按钮的图标。
- default_title 是可选的，用于按钮的提示。
- default_popup 是可选的，用于指定用户按下按钮后的弹出框，因此需要指定html文件。

web_accessible_resources 列出了页面可访问的资源。例如由于当前插件使用动物图像替换了页面原有的图像，当前的动物图像要可以被页面获得。

需要注意，所有路径是相对于 manifest.json 。

2、icons/beasts-48.png

从manitest.json文件中也可以看出这是一张图片，被当做按钮的图片，图片可以到这里下载。那个48的数字代表的意思是像素。

3、工具栏按钮button/beasts.png

你可能会问，这为什么又是这个，其实这里是一个按键的声明，你当然可以将代码中的这个目录换做你想要的任何，这里只是为了简便，

简单的将icons文件夹中的beasts-48.png改成了beasts.png.

另外你可以看到manifest中对于button的声明，我们要求的是点击按钮有弹窗，所以需要把相关的html文件配置进去，如果你没有弹出窗，用户点击的事件会直接分派到你的插件中；

如果你制作了弹出窗，用户点击会直接打开这个弹出窗，而不会被分派给插件。

4、说到弹窗就看弹窗

在popup文件夹中存放了关于弹窗的脚本文件，当点击按钮时，manifest就会执行其中的default_popup中的内容，也就是弹框的html文件，

那么在popup文件夹中放着的文件是什么呢，如果了结果前端知识就会很清楚：

choose_beast.html 定义了界面的主面板
choose_beast.css 美化内容
choose_beast.js 通过内容脚本处理用户事件

下面一一贴上文件中的代码

choose_beast.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>

choose_beast.css

html, body {
  height: 150px;
  width: 150px;
  margin: 0;
}

.beast {
  height: 25%;
  width: 80%;
  margin: 3% auto;
  padding-top: 6%;
  text-align: center;
  font-size: 1.5em;
  background-color: #E5F2F2;
  cursor: pointer;
}

.beast:hover {
  background-color: #CFF2F2;
}

choose_beast.js

/*
Given the name of a beast, get the URL to the corresponding image.
*/
function beastNameToURL(beastName) {
  switch (beastName) {
    case "Frog":
      return chrome.extension.getURL("beasts/frog.jpg");
    case "Snake":
      return chrome.extension.getURL("beasts/snake.jpg");
    case "Turtle":
      return chrome.extension.getURL("beasts/turtle.jpg");
  }
}

/*
Listen for clicks in the popup.

If the click is not on one of the beasts, return early.

Otherwise, the text content of the node is the name of the beast we want.

Inject the "beastify.js" content script in the active tab.

Then get the active tab and send "beastify.js" a message
containing the URL to the chosen beast's image.
*/
document.addEventListener("click", function(e) {
  if (!e.target.classList.contains("beast")) {
    return;
  }

  var chosenBeast = e.target.textContent;
  var chosenBeastURL = beastNameToURL(chosenBeast);

  chrome.tabs.executeScript(null, {
    file: "/content_scripts/beastify.js"
  });

  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
  });

});

到这里我们终于看到使用WebExtension API的地方了

chrome.tabs.executeScript 向当前标签页中插入指定位置的脚本，本例中为"/content_scripts/beastify.js"
chrome.tabs.query 根据条件查找标签页
chrome.tabs.sendMessage 向内容脚本发送信息。这里的信息包含了所选择图片的URL

5、 content_scripts/beastify.js

在 choose_beasts.js中，chrome.tabs.executeScript 向当前标签页中插入指定位置的脚本就是这里要介绍的，看看究竟里面写了什么

/*
beastify():
* removes every node in the document.body,
* then inserts the chosen beast
* then removes itself as a listener 
*/
function beastify(request, sender, sendResponse) {
  removeEverything();
  insertBeast(request.beastURL);
  chrome.runtime.onMessage.removeListener(beastify);
}

/*
Remove every node under document.body
*/
function removeEverything() {
  while (document.body.firstChild) {
    document.body.firstChild.remove();
  }
}

/*
Given a URL to a beast image, create and style an IMG node pointing to
that image, then insert the node into the document.
*/
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.
*/
chrome.runtime.onMessage.addListener(beastify);

内容脚本添加了监听信息的监听器。监听器做了以下工作:

将 document.body 中的所有元素移除

2.在 DOM 中创建指向图片URL的<img>标签

3.移除它自己

6、最后是三张动物的图片，说实话，这三个动物图片有点瘆人

下载图片

（三）测试发布

在FireFox的地址栏中输入"about:debugging"，然后点击“临时载入附加组件”（图3-1），注意，这样的测试只能一次生效，关闭浏览器后失效。

图3-1

安装：

1、将beastify文件夹中的内容压缩成zip格式，这里要注意，不是将文件夹压缩，而是将文件夹下的所有文件和文件夹进行压缩，确保打开压缩文件manifest.json文件在根目录下

2、将压缩文件后缀改为.xpi格式

3、打开火狐浏览器，将该.xpi文件，这里就是beastify.xpi了。直接拖进浏览器中，或者按下ctrl+o进行选择

4、遇到的安全警告接受它，如果你被提示无法安装非签名附加组件，试试下载开发者版或者nightly版本的火狐浏览器，然后在浏览器地址栏中

输入about：config ，搜索xpinstall.signatures.required，将它的值改为false。两个关键开发者版，更改签名要求配置。

（四）总结

源码下载

参考官方文档：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_second_WebExtension

关于FireFox扩展插件的示例演示

猜你喜欢