Browser Extension Development

This note will mainly focus on the development of Chrome extension in Manifest V3.

What browser extension can do?

Popup Window

When clicking the extension icon in the browser toolbar, a popup window appears. This popup serves as the primary interface for the extension and allows for all UI and interaction to be implemented within the contained environment.

The popup does not directly modify the UI of the existing web page, though it can utilize styles or cached data if needed.

Enhance the web page user interface

Enhancing a web page user interface can involve adding new functionality, improving existing features, or customizing the page appearance.

• Adding extra buttons or controls
• Replace existed navigation with new navigations

Automate interactions

Automate interactions with web elements, such as automatically clicking buttons, populating input fields, or performing repetitive tasks like form submissions.

Background tasks

Background tasks involve running isolated background scripts that handle long-running processes, manage state, and interact with the web page and extension through Chrome APIs.

Extension structure

The manifest.json is the only mandatory file for a Chrome extension, it acts as the configuration and entry point for the extension.

A typical Chrome extension can interact and run in three main contexts: content scripts, background scripts, and popup/action.

manifest.json

The manifest.json file is essential for any Chrome extension. Here is an example:

{
    "name": "Anyname",
    "version": "1.16",
    "manifest_version": 3,
    "description":"Any description",
    "permissions": [
        "storage"
    ],
    "action": {
        "default_popup": "popup/options.html"
    },
    "content_scripts": [
        {
            "matches": [
                "https://jira.example.com/browse/WCAR-*",
                "https://jira.example.se/browse/*"
            ],
            "js": [
                "/lib/jquery/jquery-3.7.0.min.js",
                "/scripts/additional-feature.js"
            ]
        },
        {
            "matches":[
                "https://*.console.amazonaws.cn/*",
                "https://*.console.aws.amazon.com/*"
            ],
            "js": [
                "/lib/aws/awsc-head.js",
                "/scripts/aws_switch_role/template.js",
                "/scripts/aws_switch_role/role.js"
            ],
            "run_at":"document_end"
        }
    ],
    "host_permissions": [
        "https://*.example.com/*"
    ],
    "icons": {
        "16": "/icon/cx-logo.png",
        "32": "/icon/cx-logo.png",
        "48": "/icon/cx-logo.png",
        "128": "/icon/cx-logo.png"
    }
}

It defines the extension name, version, description, and other metadata.

• The manifest_version, name, version are the only mandatory keys.
• The action property specifies the entry point for the extension user interface, in this case, it defines the popup html.
• The permissions array lists the Chrome APIs required by the extension, in this case, access to the active tab.
• The content_scripts array specifies the content scripts that run in the context of web pages. In this example, the content script is injected into all URLs.

Use Cases

Create multiple service requests in JIRA issue page with one click

Requirement

For certain JIRA issues, there is a need to generate multiple service requests that will be assigned to different teams. Instead of manually creating these service requests one by one, a button can be added to the JIRA issue page, allowing users to create all sub issues with a single click.

Implementation

Knowledge needed

• Access to JIRA issue DOM to add a button to the JIRA issue navigation bar.
• Use the Atlassian User Interface to align with the styling.
• Knowledge of the JIRA API to programmatically create service requests.
• When sending requests to JIRA API, the credential information will be carried, so no authentication needed.
• Injecting scripts into the page.

Detail

TBD

Automatic Switching Role in AWS Management Console

Requirement

For users managing multiple AWS accounts under the same AWS SSO, switching to a new role often requires additional manual steps after logging in with an initial role. This extension aims to streamline the process by automatically switching roles based on predefined patterens, eliminating the need for repetitive manual actions.

Implementation

Knowledge needed

• Explore the management console meta data to fetch session information.
• Extract the switch role form for automatic submission.
• Extract the csrf token fetch call.

Detail

TBD

Firefox variant

The add-ons in Firefox is mostly compatible with the extension API supported by Chromium-based browsers.

When submitting to the AMO, add-on ID is needed. The add-on ID is specified in manifest.json by adding the following attribute

{
    "browser_specific_settings": {
        "gecko": {
            "id": "name@example.com"
        }
    }
}