Quickstart
Get up and running with the Web Extension Ad-Filtering Solution.
Last updated
Was this helpful?
Get up and running with the Web Extension Ad-Filtering Solution.
Last updated
Was this helpful?
Before you begin building your extension, make sure to download the libraries you'll need and configure the manifest.json
file.
The Web Extension (WebExt) library comes in two parts, which you'll need to include in the extension's background page:
ewe-api.js
, which you'll include in your extension's background page
ewe-content.js
, which must be loaded as a content script
Make sure you've downloaded of both.
Your extension's manifest.json
file requires one of the following configurations; choose between the Manifest V2 and Manifest V3-compatible code, depending on your project:
For more on the permissions in the extension manifest, read Required permissions.
For installation, make sure you have Node 16.10.0 or higher on your system.
1. Now that you've downloaded the libraries and configured the manifest.json
file, run the following command to update and install the dependencies.
2. Next, run the following command to build the libraries:
3. To lint your code, run the following command:
4. Last, to start the extension build, run the following command.
With the libraries and dependencies installed, you're now ready to start blocking ads.
Access the API in your own background scripts through the global EWE
object. Call EWE.start()
to start blocking ads.
Now that you've got an extension up and running, be sure to test it to ensure it's functioning as expected.
Whether you manually load the test extension or use the test runner, the test suite requires locally served test pages. Run them with the following command.
The test extension is built on both the /dist/test-mv2
and /dist/test-mv3
folders. You can load both folders as unpacked extensions under chrome://extensions
in Chromium-based browsers, and under about:debugging
in Firefox.
Once you've loaded the extension, the test suite opens in a new tab. To test the API manually through the global EWE
object, you can inspect your extension's background page.
Keep the following in mind when testing your extension:
For popup tests, disable your browser's built-in popup blocking on localhost
.
Test options
The timeout
option overrides the per-test timeout in milliseconds.
The grep
uses a regular expression to filter the tests to be run.
Using the test runner
Run the following command to enable the test runner.
Testing the bundle
Run the following command to make sure users can import and re-bundle your code.
For more information on testing, view the WebExt Ad-Filtering Solution Testing documentation.
With your build running, you may want to consider other features available for your extension.
Because ewe-api.js
runs as a Universal Module Definition (UMD) module, you can use it with module bundlers.
If you use a module bundler, omit ewe-api.js
from your manifest.json
file. As a result, your build won't contain a global EWE
object.
Review the following snippets to see the ewe-api.js
as both a CommonJS and ESM module.
CommonJS
ESM
For more on snippets, view the Snippets documentation.
You'll find a models
folder included with the library bundles you downloaded. To support machine learning enabled snippets, make sure to include the models
folder and its contents in your extension bundle. Include the folder in the same directory as ewe-api.js
.
test-mv2
contains a Manifest Version 2 extension, and test-mv3
contains a extension.
To enable support for , download the and make it available to the EWE
object with the following command: