NexDocs logoNexDocs

Step-by-Step Guide for Opera GX Extensions

This guide will walk you through the process of creating an Opera GX extension using Manifest V3.

Introduction

This guide will help you create a comprehensive Opera GX extension that includes a popup interface, sidebar, options page, and service worker script. Follow these steps to build, test, and refine your extension.

Project Structure

Here’s what your project structure will look like:

my-opera-gx-extension/
│
├── manifest.json        // Manifest file defining your extension
├── popup.html           // Popup interface
├── sidebar.html         // Sidebar content
├── options.html         // Options page
├── scripts/
│   ├── popup.js         // JavaScript for the popup
│   ├── sidebar.js       // JavaScript for the sidebar
│   ├── options.js       // JavaScript for the options page
│   └── service-worker.js // Service worker script
├── styles/
│   ├── popup.css        // Styles for the popup
│   ├── sidebar.css      // Styles for the sidebar
│   ├── options.css      // Styles for the options page
├── icons/
│   ├── icon16.png       // Icon for the toolbar
│   ├── icon48.png       // Icon for extension listing
│   ├── icon128.png      // Icon for extension details

Create the Manifest File

  1. Create manifest.json in your project folder.
  2. Add the following content:
manifest.json 
{
  "manifest_version": 3,
  "name": "Advanced GX Extension",
  "version": "1.0",
  "description": "An advanced Opera GX extension with sidebar, options page, and service worker.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": [
    "storage",
    "tabs",
    "activeTab"
  ],
  "background": {
    "service_worker": "scripts/service-worker.js"
  },
  "sidebar_action": {
    "default_page": "sidebar.html",
    "default_icon": "icons/icon48.png",
    "default_title": "GX Sidebar"
  },
  "options_page": "options.html",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Add a Popup Interface

  1. Create popup.html:
  2. Add styles in styles/popup.css:
  3. Add JavaScript in scripts/popup.js:
popup.html
styles/popup.css
scripts/popup.js
<!DOCTYPE html>
<html>

<head>
  <title>GX Popup</title>
  <link rel="stylesheet" href="styles/popup.css">
</head>

<body>
  <h1>Welcome to GX!</h1>
  <button id="open-sidebar">Open Sidebar</button>
  <script src="scripts/popup.js"></script>
</body>

</html>

Add a Sidebar

  1. Create sidebar.html:
  2. Add styles in styles/sidebar.css:
  3. Add JavaScript in scripts/sidebar.js:
sidebar.html
styles/sidebar.css
scripts/sidebar.js
<!DOCTYPE html>
<html>

<head>
  <title>GX Sidebar</title>
  <link rel="stylesheet" href="styles/sidebar.css">
</head>

<body>
  <h2>GX Sidebar</h2>
  <p>This is your custom sidebar.</p>
  <script src="scripts/sidebar.js"></script>
</body>

</html>

Add an Options Page

  1. Create options.html:
  2. Add styles in styles/options.css:
  3. Add JavaScript in scripts/options.js:
options.html
styles/options.css
scripts/options.js
<!DOCTYPE html>
<html>

<head>
  <title>GX Options</title>
  <link rel="stylesheet" href="styles/options.css">
</head>

<body>
  <h2>Extension Options</h2>
  <label for="theme">Choose Theme:</label>
  <select id="theme">
    <option value="light">Light</option>
    <option value="dark">Dark</option>
  </select>
  <script src="scripts/options.js"></script>
</body>

</html>

Add a Service Worker

  1. Create scripts/service-worker.js:
scripts/service-worker.js 
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed!');
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'ping') {
    sendResponse({ response: 'pong' });
  }
});

Test and Debug

  1. Load the Extension:
    • Go to opera://extensions.
    • Enable Developer Mode.
    • Click "Load unpacked" and select your project folder.
  2. Test Features:
    • Click the toolbar icon to test the popup.
    • Open the sidebar from the popup or extensions menu.
    • Visit opera://extensions-options to test the options page.
  3. Debug:
    • Use the developer tools (Ctrl+Shift+I) to inspect elements and view console logs.

Package and Publish

  1. Package:
    • Zip the project folder.
  2. Publish:

Congratulations! 🎉 You've created a fully functional Opera GX extension with a popup, sidebar, options page, and service worker. Explore more GX-specific APIs to enhance your extension further.

Edit this page
Key Concepts for Opera GX Extensions
Understanding the core concepts of browser extensions is crucial for developing effective and efficient Opera GX extensions. This guide covers the fundamental components and APIs you'll be working with.
Best Practices for Opera GX Extensions