Key Concepts - Opera GX Extensions

Manifest File (manifest.json)

The manifest file is the heart of your extension. It provides metadata, permissions, and entry points information about your extension to the browser.

Key Components:

Example manifest.json:

{
  "manifest_version": 3,
  "name": "My Awesome Extension",
  "version": "1.0.0",
  "description": "Adds custom features to Opera GX.",
  "icons": {
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs",
    "storage",
    "notifications"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

Extension Architecture

Opera GX extensions typically consist of several components:

1. Service Worker: Handles background tasks and events.
2. Content Scripts: Inject JavaScript into web pages.
3. Popup: The user interface displayed when clicking the extension icon.
4. Options Page: A page for configuring extension settings.
5. Sidebar: A sidebar menu for managing extension.

Important APIs

Opera GX extensions can use a wide range of APIs. Here are some of the most commonly used:

• chrome.storage: For storing and retrieving data.
• chrome.tabs: For interacting with the browser's tab system.
• chrome.runtime: For listening to browser events and messaging between extension components.
• chrome.browserAction: For managing the extension's icon in the toolbar.

Example usage of chrome.storage API:

// Saving data
chrome.storage.sync.set({ key: value }, () => {
  console.log(`Value is set to ${value}`);
});

// Retrieving data
chrome.storage.sync.get(['key'], (result) => {
  console.log(`Value currently is ${result.key}`);
});

Permissions

Permissions determine what your extension can access. Always request only the permissions you need to minimize security risks.

Common permissions include:

• "storage": Allows use of the Storage API.
• "tabs": Grants access to the Tabs API.
• "http://*/*", "https://*/*": Allows access to all web pages.

Message Passing

Extensions use message passing to communicate between different components (e.g., between a content script and a background script).

// In content script
chrome.runtime.sendMessage({ greeting: 'hello' }, (response) => {
  console.log(response.farewell);
});

// In background script
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    if (request.greeting === 'hello')
      sendResponse({ farewell: 'goodbye' });
  }
);