4cddd8497c
By using the URL interface, the user is ascertained that the piece of code does not manipulate the DOM. Keeping them in the right mental context for the example. The apply-css example uses the protocol of the URL of the tab to determine if a pageAction should be shown. Any page that is hosted over http or https will receive the page action. The former implementation creates an anchor tag, assigns the URL to that, and fetches the protocol from there. This PR alters that to using the URL interface. This makes it clear to the user that we're staying in JavaScript land and will not start manipulating the visible DOM. I would argue this is cleaner all together, but I'm very open to learning about a different opinion. The URL interface is more broadly supported than the pageAction.setIcon which this example is also dependent on, so this change should not change compatibility of this Browser Extension.
webextensions-examples 
https://github.com/mdn/webextensions-examples
Maintained by the MDN team at Mozilla.
WebExtensions are a way to write browser extensions: that is, programs installed inside a web browser that modify the behavior of the browser or web pages loaded by the browser. WebExtensions are built on a set of cross-browser APIs, so WebExtensions written for Google Chrome, Opera, or Edge will, in most cases, run in Firefox too.
The "webextensions-examples" repository is a collection of simple, complete, and installable WebExtensions. The examples show how to use the WebExtensions APIs, and you can use them as a starting point for your WebExtensions.
For an index of all the examples, see the "Example extensions" page on MDN.
The examples are made available under the Mozilla Public License 2.0.
How to use "webextensions-examples"
To use the repository, first clone it.
Each example is in a top-level folder and includes a short README explaining what it does. To see how an example works, install it in Firefox by following the installation instructions.
To find your way around a WebExtension's internal structure, have a look at the Anatomy of a WebExtension page on MDN.
To use these examples in Firefox, use the most recent release of Firefox. However, most examples work with earlier releases.
A few examples rely on APIs that are only available in pre-release versions
of Firefox. Where this is the case, the example declares the minimum version
that it needs in the strict_min_version attribute of the
browser_specific_settings key
in the extension's manifest.json file.
Installing an example
Some examples work only on specific domains or pages. Details of any restrictions are provided in each example's README file. None of the examples work in private browsing windows by default, see Extensions in Private Browsing for details.
To run an example extension:
- Open Firefox and load the
about:debuggingpage. Click Load Temporary Add-on and select themanifest.jsonfile within the folder of an example extension. Here is a video that demonstrates how to do this. - Install the
web-ext
tool. At the command line, open the example extension's folder and type
web-ext run. This launches Firefox and installs the extension automatically. This tool provides some additional development features, such as automatic reloading.
Support for other browsers
These examples are tested in Firefox. They may work in other browsers, if the
browser supports the APIs used.
Note that these examples all use the browser namespace and promises to
work with asynchronous functions. This means the examples won't work in
Chrome unless you use the
polyfill provided by Mozilla.
See the overview of WebExtension APIs
for more information.
Learn more
To learn more about developing WebExtensions, see the WebExtensions documentation on MDN for getting started guides, tutorials, and full API reference docs.
Problems?
If you encounter an issue:
- post a query on the add-ons discourse forum
- email the dev-addons mailing list
- contact the add-ons team in the Add-ons room on Matrix
If you cannot resolve the issue, file a bug.
Contributing
We welcome contributions, whether they are new examples, new features, bug fixes, or translations of localizable strings. Please see the CONTRIBUTING.md file for more details.