+-----------------------------------------------------------------------------------------+
|                  Manifest V2 vs Manifest V3 Architecture                                |
+-----------------------------------------------------------------------------------------+

MANIFEST V2 (Legacy - Persistent Background Page):
[Background Page (background.html)] ===(Runs continuously 24/7 in RAM!)===> [Consumes 150MB RAM]
* Inefficient memory drain; Stored global state in RAM; Blocking webRequest paused every network packet!

MANIFEST V3 (2026 Standard - Event-Driven & Stateless):
[EVENT ARRIVES: Alarm / User Click] ──> [SERVICE WORKER WAKES UP IN 2ms]
                                                  │
                                                  ├── 1. Restores state from 'chrome.storage.session'
                                                  ├── 2. Executes task in 100ms
                                                  └── 3. Terminates after 30s idle time (0 MB RAM!)
                                                  
[FOR DOM / AUDIO WORKLOADS]: ──> Spawns ephemeral [OFFSCREEN DOCUMENT] ──> Closes immediately!
[FOR NETWORK FILTERING]:     ──> Evaluates native [declarativeNetRequest (DNR)] rules natively!

+-----------------------------------------------------------------------------------------+
|                  Manifest V3 Service Worker Lifecycle & State Persistence               |
+-----------------------------------------------------------------------------------------+

[CHROME BROWSER IDLE]
  │
  ▼ (User clicks Extension Icon or Alarm fires)
[SERVICE WORKER SPAWNED]
  │
  ├── 1. Synchronously registers all top-level event listeners.
  ├── 2. Reads session state: 'await chrome.storage.session.get("authToken")'
  ├── 3. Executes API request / business logic.
  │
  ▼ (No new events for 30 Seconds)
[SERVICE WORKER TERMINATED BY BROWSER]
  └── In-memory variables are wiped. Next event triggers clean re-hydration from storage!

{
  "manifest_version": 3,
  "name": "MojoStudio Web Inspector Pro",
  "version": "2.4.0",
  "description": "High-performance enterprise web productivity and DOM analysis extension.",
  "permissions": [
    "storage",
    "alarms",
    "offscreen",
    "declarativeNetRequest",
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "https://*.mojostudio.in/*"
  ],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "128": "icons/icon-128.png"
    }
  },
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ad_and_tracker_rules",
        "enabled": true,
        "path": "rules/security_rules.json"
      }
    ]
  }
}

// src/background.ts
import { spawnOffscreenDOMParser } from "./offscreenManager";

// 1. TOP-LEVEL SYNCHRONOUS LISTENER REGISTRATION (Mandatory in MV3!)
chrome.runtime.onInstalled.addListener(async () => {
  console.log("🚀 [MV3 EXTENSION] Extension installed!");
  
  // Set up periodic background alarm (Replaces setInterval!)
  chrome.alarms.create("sync_data_alarm", { periodInMinutes: 15 });
  
  // Initialize default session storage
  await chrome.storage.session.set({ activeTaskCount: 0, lastSyncTime: Date.now() });
});

// 2. Alarm Event Handler (Wakes up service worker!)
chrome.alarms.onAlarm.addListener(async (alarm) => {
  if (alarm.name === "sync_data_alarm") {
    // Restore state from storage
    const data = await chrome.storage.session.get(["activeTaskCount"]);
    console.log(`⏰ [ALARM TRIGGERED] Active tasks: ${data.activeTaskCount}`);
    
    // Perform background sync...
  }
});

// 3. Message Handler receiving requests from Popup or Content Scripts
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "PARSE_REMOTE_HTML") {
    // Offload DOM parsing to Offscreen Document!
    spawnOffscreenDOMParser(message.rawHtml).then((parsedData) => {
      sendResponse({ success: true, data: parsedData });
    });
    return true; // Keep message channel open for async response!
  }
});

// src/offscreenManager.ts

let creatingOffscreenPromise: Promise<void> | null = null;

export async function spawnOffscreenDOMParser(rawHtml: string): Promise<any> {
  const offscreenUrl = chrome.runtime.getURL("offscreen.html");

  // 1. Check if Offscreen Document already exists
  const existingContexts = await chrome.runtime.getContexts({
    contextTypes: [chrome.runtime.ContextType.OFFSCREEN_DOCUMENT],
    documentUrls: [offscreenUrl],
  });

  if (existingContexts.length === 0) {
    if (creatingOffscreenPromise) {
      await creatingOffscreenPromise;
    } else {
      creatingOffscreenPromise = chrome.offscreen.createDocument({
        url: offscreenUrl,
        reasons: [chrome.offscreen.Reason.DOM_PARSER],
        justification: "Parse raw HTML string using standard DOMParser in isolated context.",
      });
      await creatingOffscreenPromise;
      creatingOffscreenPromise = null;
    }
  }

  // 2. Send Message to Offscreen Document for DOM Processing
  const response = await chrome.runtime.sendMessage({
    target: "offscreen",
    type: "EXECUTE_DOM_PARSE",
    html: rawHtml,
  });

  // 3. Close Offscreen Document to free RAM immediately!
  await chrome.offscreen.closeDocument();
  return response;
}

<!-- public/offscreen.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="offscreen.js"></script>
  </head>
  <body></body>
</html>

// src/offscreen.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.target === "offscreen" && message.type === "EXECUTE_DOM_PARSE") {
    // DOMParser is 100% AVAILABLE in Offscreen Documents!
    const parser = new DOMParser();
    const doc = parser.parseFromString(message.html, "text/html");
    const extractedTitle = doc.querySelector("title")?.textContent || "No Title";
    const links = Array.from(doc.querySelectorAll("a")).map((a) => a.href);

    sendResponse({ title: extractedTitle, links });
  }
});

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "block"
    },
    "condition": {
      "urlFilter": "||ad-tracker.example.com/*",
      "resourceTypes": ["script", "image", "xmlhttprequest"]
    }
  },
  {
    "id": 2,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "requestHeaders": [
        {
          "header": "X-Client-Platform",
          "operation": "set",
          "value": "MojoStudio-MV3-Extension"
        }
      ]
    },
    "condition": {
      "urlFilter": "https://api.mojostudio.in/*",
      "resourceTypes": ["xmlhttprequest"]
    }
  }
]

       +-------------------------------------------------------------+
       |             24-Hour Idle Memory Footprint (Megabytes)       |
       +-------------------------------------------------------------+
 Manifest V2 (Persistent Background Page) | ==================================== [240.0 MB]
 Manifest V3 (Stateless Service Worker)   | = [0.0 MB / Terminated] (100% Memory Saved!)
                                          +-------------------------------------+
                                          0MB     60MB    120MB   180MB   240MB