Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gasolin/awesome-webextension

A curated list of awesome articles, tutorials and resources dealing with web extention
https://github.com/gasolin/awesome-webextension

List: awesome-webextension

Last synced: about 1 month ago
JSON representation

A curated list of awesome articles, tutorials and resources dealing with web extention

Awesome Lists containing this project

README 

        
# awesome-webextension

A curated list of awesome articles, tutorials and resources dealing with web extention



Many thanks to everyone on the [contributor list](https://github.com/gasolin/awesome-webextension/graphs/contributors) :)



##　Content

* [Browsers](#browsers)

* [Articles](#articles)

* [Tools](#tools)

* [videos](#videos)

* [Social](#social)

* [References](#references)



## Browsers



* :star2: [Browser support for JavaScript APIs](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) Browsers Extension APIs compatibility table

* :flashlight: [Browser support for javascript syntaxes](http://kangax.github.io/compat-table/es6/)

* [Chrome Extensions](https://developer.chrome.com/extensions)

* [Firefox Web Extensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions)

* [Microsoft Edge Extensions](https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/)

* [Opera Extensions](https://dev.opera.com/extensions/)



## Articles



* [Understand Google Chrome Extensions](https://gist.github.com/jjperezaguinaga/4243341)

* [Chrome Extension Development – Background page and content script communication](https://ackshaey.wordpress.com/2016/02/15/chrome-extension-development-background-page-and-content-script-communication/)



### Howtos



All quotes are comming from [Anatomy of a WebExtension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension) 



### Content script

`Interact with web pages`



* [Your first Web Extension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension)

* [Create a Simple Web Extension](https://davidwalsh.name/web-extensions)



### Browser actions

`Add buttons to the toolbar`



* [Your second WebExtension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_second_WebExtension)



### Page actions

`Add buttons to the address bar`



### Toolbox page

`Add new panel to developer toolbox`



* [How to add a panel to Chrome Dev Tools](https://www.raymondcamden.com/2012/07/15/How-to-add-a-panel-to-Chrome-Dev-Tools)



### Extension-specific Settings Page

* [Implement a settings page](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Implement_a_settings_page)



### Permissions

`Some API require explicitly declare permissions in manifest.json`

* [Chrome permissions](https://developer.chrome.com/extensions/declare_permissions)

* [Firefox permissions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions)



### Chrome Related



* :beetle: [Debugging popups](https://developer.chrome.com/extensions/tut_debugging)

* [Chrome Platform APIs](https://developer.chrome.com/extensions/api_index)

* [Extending DevTools](https://developer.chrome.com/extensions/devtools)



### Firefox Related



* :flashlight: [Chrome incompatibilities](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities)

* [Mozilla WebExtensions wiki](https://wiki.mozilla.org/WebExtensions)

* [WebExtensions Experiments](https://webextensions-experiments.readthedocs.io/en/latest/) allowing writte unsupported WebExtensions APIs in an another extension

* [Communication](https://wiki.mozilla.org/Add-ons/developer/communication)

* [Porting a legacy Firefox add-on](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on)

* [Porting a Google Chrome extension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension)

* :beetle: [Debugging popups](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#Debugging_popups)



### Safari Related



* [From Chrome Extension to Safari Extension](https://chunlianglyu.com/From_Chrome_Extension_to_Safari_Extension)



## Tools



* [webextension-polyfill](https://github.com/mozilla/webextension-polyfill) A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

* [generator-chrome-extension-kickstart](https://github.com/HaNdTriX/generator-chrome-extension-kickstart) Advanced WebExtension generator that creates everything you need to get started with extension development (Chrome, Firefox, Opera)

* [chrome-extension-webpack-boilerplate](https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate) using Webpack to help you write modular and modern Javascript code, load CSS easily and automatic reload the browser on code changes



### Examples



* [webextensions-examples](https://github.com/mdn/webextensions-examples) Example Firefox add-ons created using the WebExtensions API 

* [Sample Extensions](https://developer.chrome.com/extensions/samples) Chrome Extensions Sample

* [Firefox Toolbox Extensions Examples](https://github.com/devtools-html/extension-examples)



## Videos



Assortment of conference and training videos.



### Talks



### Training & tutorials

* [Build Your Own WebExtension Add-on for Firefox](https://activate.mozilla.community/webextensions/)



## Social



* [#WebExtension on Twitter](https://twitter.com/hashtag/WebExtension)



## References



* Emojis are referd from [here](https://gist.github.com/rxaviers/7360908)