Skip to content

a sample browser extension on top of Ember and webextension-polyfill

Notifications You must be signed in to change notification settings

mtoygar/ember-browser-extension

Repository files navigation

ember-browser-extension

This repo is started to guide and facilitate developing a browser extension using Ember. It makes use of Ember and Mozilla's webextension-polyfill to create a maintainable and scalable extension.

Contained Examples

Popup

The ember app is booted inside a div(with id chrome-app) in popup.html using the popup.js. Click to access related code.

Basic Content Script

Contains an example of a content script applicable to both Firefox and Chrome thanks to webextension-polyfill. Click to access related code.

Content Script with Ember App

Contains an example of a content script build by Ember. The prepared example is inspired by the ZenHub's extension and works on this repo's url(https://github.com/mtoygar/ember-browser-extension/). When user visited the repo, extension simply adds a button to the navigation bar and this button triggers ember boot when clicked. Therefore, when user click the button ember is booted and a location hash is added to the url. After this point, all routing and state management is done by using Ember. One can see the possible routes on router.js

It is also beneficial to add that the sample extension uses HashLocation routing. This way, Ember uses the hash part of the URL for its routing purposes. Moreover, when the user reloads the page, the content script detects if the extension's hash location is on the URL and automatically renders the ember route on the GitHub container.

Screenshot

content script backed by Ember App

Installation

  • git clone <repository-url> this repository
  • cd ember-browser-extension
  • yarn install

Running / Development

  • ember serve
  • For Chrome:
    • Navigate to chrome://extensions in your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over More Tools and selecting Extensions.
    • Check the box next to Developer Mode.
    • Click Load Unpacked Extension and select the directory for your "Hello Extensions" extension.
  • For Firefox:
    • enter about:debugging in the URL bar
    • click "Load Temporary Add-on"
    • open the extension's directory and select any file inside the extension.

Further Reading / Useful Links