awesome-webextension

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

Many thanks to everyone on the contributor list :)

##　Content

• Browsers
• Articles
• Tools
• videos
• Social
• References

Browsers

• :star2: Browser support for JavaScript APIs Browsers Extension APIs compatibility table
• :flashlight: Browser support for javascript syntaxes
• Chrome Extensions
• Firefox Web Extensions
• Microsoft Edge Extensions
• Opera Extensions

Articles

• Understand Google Chrome Extensions
• Chrome Extension Development – Background page and content script communication

Howtos

All quotes are comming from Anatomy of a WebExtension

Content script

Interact with web pages

• Your first Web Extension
• Create a Simple Web Extension

Browser actions

Add buttons to the toolbar

• 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

Extension-specific Settings Page

• Implement a settings page

Permissions

Some API require explicitly declare permissions in manifest.json

• Chrome permissions
• Firefox permissions

Chrome Related

• :beetle: Debugging popups
• Chrome Platform APIs
• Extending DevTools

Firefox Related

• :flashlight: Chrome incompatibilities
• Mozilla WebExtensions wiki
• WebExtensions Experiments allowing writte unsupported WebExtensions APIs in an another extension
• Communication
• Porting a legacy Firefox add-on
• Porting a Google Chrome extension
• :beetle: Debugging popups

Safari Related

• From Chrome Extension to Safari Extension

Tools

• webextension-polyfill A lightweight polyfill library for Promise-based WebExtension APIs in Chrome
• 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 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 Example Firefox add-ons created using the WebExtensions API
• Sample Extensions Chrome Extensions Sample
• Firefox Toolbox Extensions Examples

Videos

Assortment of conference and training videos.

Talks

Training & tutorials

• Build Your Own WebExtension Add-on for Firefox

Social

• #WebExtension on Twitter

References

• Emojis are referd from here