Developing Browser Extensions

Browser Extensions

The purpose of this page is to collect all useful and helpful infromations for the development process of a browser extension. Either cross browser or only for one. The infromation is in no specific order, howerver can be searched easily and is sperated into smaller chunks or paragraphs. Also often code examples will be shown or further readings for specific themes. Feel free to enhance this page, but keep the style!!

doomsayer

---

Creating a Chrome Extension with Angular

Basics

It seems to be difficult to create a browser extension with Angular, however, it compiles anyway to plain js. The advantage is that we gain the modularity of Angular and the object-oriented programming experience with strong typechecks of Typescript. The use of Angular our life easier because the project acquires a well-defined structure. It can can be more easily maintained and enhanced due to the modularity of Angular. Also, TypeScript, brings the object-oriented programming experience with strict typing to the development.

A Chrome Extension can have three distinct front-end components:

1. Extension icon – this is an icon that is displayed next to the browser’s Omnibox (the adress bar)
2. Popup – This is a popup HTML page that is displayed when the icon is clicked. It can reference JavaScript and CSS files.
3. Extension pages – these are HTML pages hosted by the extension. Each page can reference both JavaScript and CSS files.

While this frontend part is important for the user, the backend part is more important for our development. The following important parts need to be considered (taken from developers api):

• Content script – a JavaScript file that runs in the context of a page displayed in the browser tab. It has limited access to Chrome extension API (eg. it cannot influence other tabs), but it can do a lot of things in context of the page, like:
  • Explore DOM elements
  • Inject new objects
  • Read the page’s local storage and even expand it with permissions to unlimited storage
• Event page (background script) – a page that runs in the background, that is developed either as and HTML page or as a single JavaScript file. It has full access to the Chrome extension API. It is typically used to receive the requests and send replies to other extension elements. External requests (eg. to external APIs or servers like HTTP) should be executed there.
• Extension/popup page script – a JavaScript file referenced by the HTML page hosted by the extension. It has full access to Chrome extension API.

Configuration aka Manifest

The configuration and all permissions needed, of our extension, needs to be defined in a special manifest.json file. In this file, we can define the different parts of our extension. It also allows us to specify what kind of premissions our extension requests. Below an example manifest structure:

{
    "manifest_version": 1,
    "name": "Simple Extension",
    "version": "1.0.0",
    "permissions": [ "tabs", "activeTab" ],
    "content_scripts": [
      {
        "matches": [ "http*://*/*" ],
        "js": [ "content-script.js" ]
      }
    ],
    "background": {
      "page": "index.html#/event-page",
      "persistent": false
    },
    "browser_action": {
      "default_title": "Show Popup",
      "default_popup": "index.html#/popup"
    },
    "default_icon": {
      "19": "button/geo-19.png",
      "38": "button/geo-38.png"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  }

Of course there are numerous options for the configuration of such a manifest file and further attributes. All available keys and another example can be viewed here: Manifest.Json
However, some in this example need further clarification maybe, which should be given here now: