• AHA Music - Music Identifier → Chrome | Edge
• Bitwarden → Chrome | Edge | Firefox
• Chrometana Pro/Foxtana Pro → Chrome | Firefox
• Dark Reader → Chrome | Edge | Firefox
• Google Translate/Simple Translate → Chrome | Firefox
• Grammar and Spell Checker - LanguageTool → Chrome | Edge | Firefox
• IBA Opt-out (by Google) → Chrome | Firefox
• Improve YouTube → Chrome | Edge | Firefox
• JetBrains Toolbox Extension → Chrome | Firefox
• Picture-in-Picture Extension (by Google) → Chrome
• SponsorBlock for YouTube - Skip Sponsorships → Chrome | Firefox
• uBlock Origin → Chrome | Edge | Firefox
• Video Speed Controller → Chrome | Firefox
• Windscribe - Free Proxy and Ad Blocker → Chrome | Edge | Firefox

Diese Erweiterung testet die Kommunikation (Messaging) zwischen einem Service Worker (Background Script) und einem Content Script, dass beim Klick auf die Erweiterung in die aktive Seite injected wird. Die Kommunikation kann man in den beiden DevTools (F12) Fenstern beobachten

• Service Worker: Erweiterungsseite > Developer mode > service worker untersuchen > Konsole
• Content Script: auf aktueller Seite die DevTools Konsole öffnen

manifest.json

{
    "manifest_version": 3,
    "name": "Test",
    "version": "1.0",
    "description": "",
    "background": {
        "service_worker": "service-worker.js",
        "type": "module"
    },
    "action": {
        "default_title": "",
        "default_icon": {}
    },
    "icons": {},
    "permissions": [
        "activeTab",
        "scripting"
    ]
}

service-worker.json

"use strict";
 
chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ["content-script.js"],
    });
});
 
chrome.action.onClicked.addListener((tab) => {
    chrome.tabs.sendMessage(tab.id, { payload: "SW -> CS" }, (response) => {
        console.log(`[SW] Response: ${response.payload}`);
    });
});
 
chrome.runtime.onMessage.addListener((request, sender, response) => {
    response({ payload: "Message recieved by SW!" });
    console.log(`[SW] Request: ${request.payload}`);
});

content-script.json

"use strict";
 
chrome.runtime.onMessage.addListener((request, sender, response) => {
    response({ payload: "Message recieved by CS!" });
    console.log(`[CS] Request: ${request.payload}`);
});
 
chrome.runtime.sendMessage({ payload: "CS -> SW" }, (response) => {
    console.log(`[CS] Response: ${response.payload}`);
});