fang5566
管理员
管理员
  • UID3719
  • 注册日期2005-03-07
  • 最后登录2019-11-21
  • 发帖数18369
  • 经验4721枚
  • 威望5点
  • 贡献值4292点
  • 好评度1063点
  • 社区居民
  • 最爱沙发
  • 忠实会员
  • 终身成就
阅读:1263回复:4

编写一个 WebExtensions 附加组件

楼主#
更多 发布于:2015-09-22 17:50
http://hacks.mozilla.org/2015/09/lets_write_a_webextension/

英文的。有兴趣的可以看看。


You might have heard about Mozilla’s WebExtensions,
 our implementation of a new browser extension API for writing
multiprocess-compatible add-ons. Maybe you’ve been wondering what it was
 about, and how you could use it. Well, I’m here to help!  I think the MDN’s WebExtensions docs are a pretty great place to start:

WebExtensions are a new way to write Firefox extensions.
The technology is developed for cross-browser compatibility: to a large extent the API is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these
browsers will in most cases run in Firefox with just a few changes. The
API is also fully compatible with multiprocess Firefox.



The only thing I would add is that while Mozilla is implementing most
 of the API that Chrome and Opera support, we’re not restricting
ourselves to only that API.  Where it makes sense, we will be adding new
 functionality and talking with other browser makers about implementing
it as well.  Finally, since the WebExtension API is still under
development, it’s probably best if you use Firefox Nightly for this tutorial, so that you get the most up-to-date,
standards-compliant behaviour. But keep in mind, this is still
experimental technology — things might break!

Starting off


Okay, let’s start with a reasonably simple add-on. We’ll add a button, and when you click it, it will open up one of my favourite sites in a new tab.
The first file we’ll need is a manifest.json, to tell Firefox about our add-on.
{ "manifest_version": 2, "name": "Cat Gifs!", "version": "1.0", "applications": { "gecko": { "id": "catgifs@mozilla.org" }
  }, "browser_action": { "default_title": "Cat Gifs!" }
}

Great!  We’re done!  Hopefully your code looks a little like this.
 Of course, we have no idea if it works yet, so let’s install it in
Firefox (we’re using Firefox Nightly for the latest implementation). You
 could try to drag the manifest.json, or the whole directory, onto Firefox, but that really won’t give you what you want.


Installing


To make Firefox recognize your extension as an add-on, you need to give it a zip file which ends in .xpi, so let’s make one of those by first installing 7-Zip, and then typing 7z a catgifs.xpi manifest.json. (If you’re on Mac or Linux, the zip command should be built-in, so just type zip catgifs.xpi manifest.json.) Then you can drag the catgifs.xpi onto Firefox, and it will show you an error because our extension is unsigned.

We can work around this by going to about:config, typing xpinstall.signatures.required in the search box, double-clicking the entry to set it to false, and then closing that tab.  After that, when we drop catgifs.xpi onto Firefox, we get the option to install our new add-on!
It’s important to note that beginning with Firefox 44 (later this year), add-ons will require a signature to be installed on Firefox Beta or Release versions of the browser, so
even if you set the preference shown below, you will soon still need to
run Firefox Nightly or Developer Edition to follow this tutorial.


Of course, our add-on doesn’t do a whole lot yet.

So let’s fix that!

Adding features


First, we’ll add the following lines to manifest.json, above the line containing browser_action:
 "background": { "scripts": ["background.js"], "persistent": false },

now, of course, that’s pointing at a background.js file that doesn’t exist yet, so we should create that, too.  Let’s paste the following javascript in it:
'use strict'; /*global chrome:false */ chrome.browserAction.setBadgeText({text: '(ツ)'});
chrome.browserAction.setBadgeBackgroundColor({color: '#eae'});

chrome.browserAction.onClicked.addListener(function(aTab) {
  chrome.tabs.create({'url': 'http://chilloutandwatchsomecatgifs.com/', 'active': true});
});

And you should get something that looks like this.  Re-create the add-on by typing 7z a catgifs.xpi manifest.json background.js (or zip catgifs.xpi manifest.json background.js), and drop catgifs.xpi onto Firefox again, and now, when we click the button, we should get a new tab!  
Firefox More than meets your experience
文科
千年狐狸
千年狐狸
  • UID39959
  • 注册日期2013-10-17
  • 最后登录2019-07-27
  • 发帖数2069
  • 经验1328枚
  • 威望4点
  • 贡献值340点
  • 好评度255点
  • 最爱沙发
  • 社区居民
  • 忠实会员
1楼#
发布于:2015-09-22 19:28
现在火狐已经可以使用WebExtensions 附加组件 ?
fang5566
管理员
管理员
  • UID3719
  • 注册日期2005-03-07
  • 最后登录2019-11-21
  • 发帖数18369
  • 经验4721枚
  • 威望5点
  • 贡献值4292点
  • 好评度1063点
  • 社区居民
  • 最爱沙发
  • 忠实会员
  • 终身成就
2楼#
发布于:2015-09-22 19:31
文科:现在火狐已经可以使用WebExtensions 附加组件 ?回到原帖
没试过,看截图 Nightly 可以用。因为这个扩展开发起来算入门的了。
Firefox More than meets your experience
文科
千年狐狸
千年狐狸
  • UID39959
  • 注册日期2013-10-17
  • 最后登录2019-07-27
  • 发帖数2069
  • 经验1328枚
  • 威望4点
  • 贡献值340点
  • 好评度255点
  • 最爱沙发
  • 社区居民
  • 忠实会员
3楼#
发布于:2015-09-22 19:41
fang5566:没试过,看截图 Nightly 可以用。因为这个扩展开发起来算入门的了。回到原帖
https://github.com/bwinton/catgif-extension/releases  似乎提供了扩展,但是最近连接github好慢,无法验证到底可不可以用
fang5566
管理员
管理员
  • UID3719
  • 注册日期2005-03-07
  • 最后登录2019-11-21
  • 发帖数18369
  • 经验4721枚
  • 威望5点
  • 贡献值4292点
  • 好评度1063点
  • 社区居民
  • 最爱沙发
  • 忠实会员
  • 终身成就
4楼#
发布于:2015-09-28 18:58
https://github.com/mdn/webextensions-examples
这里也有一个简单的 webextensions 扩展。
Firefox More than meets your experience
游客

返回顶部