extension-testing-example

Browser extension example using ES Modules and browser testing with Mocha, Chai, Sinon and Webpack for bundling. Specifically testing in the browser to exercise the browser APIs available to extensions where possible. webextension-polyfill is used to standardize the browser API on Chrome.

Testing in Chrome and Firefox for now.

Getting Started

git clone [this repo]
cd extension-testing-example
npm install
npm run build

This will generate an extension in dist/development which can be loaded as a temporary extension. You must turn on extensions developer mode in Chrome or use about:debugging and "Load Temporary Add-on" in Firefox.

To generate a production build (without tests) run npm run build:prod, the extension will be generated in dist/production.

See also Chrome: Getting Started Tutorial and Mozilla: Your First Extension for information about developing and debugging extensions.

Builds

Production/minimized build:

npm run build

There is currently only one build target but in the future only the debug/dev build would include the tests so anyone can run them after installation.

Tests

Click the tests button in the extension popup to run the tests in separate html page (currently just shows TAP output, but can be updated to show HTML output).

To run the tests in headless Firefox via selenium (useful for CI):

npm run build
npm test

Integration

Integration tests or e2e is yet to really be introduced, plan is to use webdriverio. I'm open to suggestions.

Build artifacts (zip file of dist/) are being saved on CirlceCI but you might have to be logged into see them. I will add them to the release page.

Related Projects

About

Languages

Language:JavaScript 97.5%Language:HTML 2.5%