extension 4.0.15 → 4.0.16

package/README.md

@@ -8,12 +8,12 @@
 [action-url]: https://github.com/extension-js/extension.js/actions
 [discord-image]: https://img.shields.io/discord/1253608412890271755?label=Discord&logo=discord&style=flat&color=0971fe
 [discord-url]: https://discord.gg/v9h2RgeTSN
-[snyk-image]: https://snyk.io/test/github/extension-js/extension/badge.svg?color=0971fe
-[snyk-url]: https://snyk.io/test/github/extension-js/extension
+[snyk-image]: https://snyk.io/test/github/extension-js/extension.js/badge.svg?color=0971fe
+[snyk-url]: https://snyk.io/test/github/extension-js/extension.js
 
 # Extension.js [![Version][npm-version-image]][npm-version-url] [![Downloads][npm-downloads-image]][npm-downloads-url] [![Stars][stars-image]][stars-url] [![CI][action-image]][action-url] [![Discord][discord-image]][discord-url] 
 
-> The cross-browser extension framework. Build for Chrome, Edge, and Firefox with no build config required.
+> The cross-browser extension framework. Build for Chrome, Edge, Firefox, and Safari with no build config required.
 
 <img alt="Logo" align="right" src="https://avatars.githubusercontent.com/u/172809806" width="14.1%" />
 
@@ -32,7 +32,7 @@ Works with `npm`, `pnpm`, `yarn`, `bun`, and `deno`.
 Browser extensions ship with the worst dev experience in modern web. Manifest V3 fragmentation, browser-specific quirks, no hot reload for content scripts, and a separate build pipeline for every target. Extension.js fixes that.
 
 - **Hot Module Replacement** for background, content, popup, and options scripts, including React, Vue, Svelte, and Preact components
-- **Manifest V3 by default**, with automatic adapters for Chrome, Edge, and Firefox targets
+- **Manifest V3 by default**, with automatic adapters for Chrome, Edge, Firefox, and Safari targets
 - **One CLI** for Chrome, Edge, Firefox, and any Chromium or Gecko binary
 - **Zero config**, no webpack, no rollup, no plugins to maintain
 - **First-class** TypeScript, React, Vue, Svelte, and Preact support
@@ -72,7 +72,7 @@ If you have used [Plasmo](https://www.plasmo.com), [WXT](https://wxt.dev), or [C
 
 Use these flags with `extension dev`, `extension start`, or `extension preview`:
 
-- Select a browser: `--browser <chrome | edge | firefox>`
+- Select a browser: `--browser <chrome | edge | firefox | safari>`
 - Custom Chromium binary: `--chromium-binary <path-to-binary>`
 - Custom Gecko (Firefox) binary: `--gecko-binary <path-to-binary>`
 
@@ -94,7 +94,7 @@ npx extension@latest dev --gecko-binary "/Applications/Firefox.app/Contents/MacO
 
 | <img alt="Chrome" src="https://media.extension.land/logos/browsers/chrome.svg" width="70"> | <img alt="Edge" src="https://media.extension.land/logos/browsers/edge.svg" width="70"> | <img alt="Firefox" src="https://media.extension.land/logos/browsers/firefox.svg" width="70"> | <img alt="Safari" src="https://media.extension.land/logos/browsers/safari.svg" width="70"> | <img alt="Chromium" src="https://media.extension.land/logos/browsers/chromium.svg" width="70"> | <img alt="Gecko" src="https://media.extension.land/logos/browsers/firefox.svg" width="70"> |
 | :-: | :-: | :-: | :-: | :-: | :-: |
-| Google Chrome<br>✅ Supported | Microsoft Edge<br>✅ Supported | Mozilla Firefox<br>✅ Supported | Apple Safari<br> 🧪 Alpha | Chromium-based<br>✅ Supported | Gecko-based<br>✅ Supported |
+| Google Chrome<br>✅ Supported | Microsoft Edge<br>✅ Supported | Mozilla Firefox<br>✅ Supported | Apple Safari<br>✅ Supported | Chromium-based<br>✅ Supported | Gecko-based<br>✅ Supported |
 
 </div>
 
@@ -165,6 +165,16 @@ npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-sampl
 
 [Watch demo](https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1)
 
+## Package managers
+
+<div align="center">
+
+| <img alt="npm" src="https://media.extension.land/logos/package-managers/npm.svg" width="70"> | <img alt="pnpm" src="https://media.extension.land/logos/package-managers/pnpm.svg" width="70"> | <img alt="Yarn" src="https://media.extension.land/logos/package-managers/yarn.svg" width="70"> | <img alt="Bun" src="https://media.extension.land/logos/package-managers/bun.svg" width="70"> | <picture><source media="(prefers-color-scheme: dark)" srcset="https://media.extension.land/logos/package-managers/deno-dark.svg"><img alt="Deno" src="https://media.extension.land/logos/package-managers/deno.svg" width="70"></picture> |
+| :-: | :-: | :-: | :-: | :-: |
+| npm<br>✅ Supported | pnpm<br>✅ Supported | Yarn<br>✅ Supported | Bun<br>✅ Supported | Deno<br>✅ Supported |
+
+</div>
+
 ## Community
 
 - Star the repo if Extension.js helped you ship faster

package/dist/49.cjs

@@ -18,20 +18,74 @@ exports.modules = {
             } catch  {}
             return removed;
         }
-        async function loadUnpackedIfNeeded(cdp, outPath) {
+        function declaresBackgroundContext(outPath) {
             try {
-                const response = await cdp.sendCommand('Extensions.loadUnpacked', {
-                    extensionPath: outPath,
-                    options: {
-                        failOnError: false
-                    }
-                });
-                const id = String(response?.extensionId || '');
-                return id || null;
+                const manifest = JSON.parse(node_fs__rspack_import_0.readFileSync(node_path__rspack_import_1.join(outPath, 'manifest.json'), 'utf-8'));
+                const background = manifest?.background;
+                if (!background || 'object' != typeof background) return false;
+                return Boolean(background.service_worker || Array.isArray(background.scripts) && background.scripts.length || background.page);
             } catch  {
-                return null;
+                return false;
             }
         }
+        function parseCdpError(error) {
+            const raw = String(error?.message || error || '').trim();
+            try {
+                const parsed = JSON.parse(raw);
+                const message = String(parsed?.message || '').trim();
+                if (message) return {
+                    code: 'number' == typeof parsed.code ? parsed.code : void 0,
+                    message
+                };
+            } catch  {}
+            return {
+                message: raw
+            };
+        }
+        const PROTOCOL_ERROR_CODES = new Set([
+            -32601,
+            -32602
+        ]);
+        async function callLoadUnpacked(cdp, params) {
+            try {
+                const response = await cdp.sendCommand('Extensions.loadUnpacked', params);
+                const id = String(response?.id || response?.extensionId || '');
+                return {
+                    ok: true,
+                    id
+                };
+            } catch (error) {
+                return {
+                    ok: false,
+                    ...parseCdpError(error)
+                };
+            }
+        }
+        async function loadUnpacked(cdp, outPath) {
+            let result = await callLoadUnpacked(cdp, {
+                path: outPath
+            });
+            if (!result.ok && -32602 === result.code) result = await callLoadUnpacked(cdp, {
+                extensionPath: outPath
+            });
+            if (result.ok) return result.id ? {
+                status: 'loaded',
+                extensionId: result.id
+            } : {
+                status: 'unknown'
+            };
+            if (PROTOCOL_ERROR_CODES.has(result.code) || !result.message) return {
+                status: 'unknown'
+            };
+            return {
+                status: 'refused',
+                reason: result.message
+            };
+        }
+        async function loadUnpackedIfNeeded(cdp, outPath) {
+            const outcome = await loadUnpacked(cdp, outPath);
+            return 'loaded' === outcome.status ? outcome.extensionId : null;
+        }
         function readManifestInfo(outPath) {
             try {
                 const manifestPath = node_path__rspack_import_1.join(outPath, 'manifest.json');
@@ -45,8 +99,10 @@ exports.modules = {
             }
         }
         __webpack_require__.d(__webpack_exports__, {
-            M: ()=>readManifestInfo,
+            MB: ()=>readManifestInfo,
+            iF: ()=>loadUnpacked,
             loadUnpackedIfNeeded: ()=>loadUnpackedIfNeeded,
+            tg: ()=>declaresBackgroundContext,
             uninstallStaleUnpackedLoads: ()=>uninstallStaleUnpackedLoads
         });
     },
@@ -133,6 +189,7 @@ exports.modules = {
         var external_node_path_ = __webpack_require__("node:path");
         var banner = __webpack_require__("./browsers/browsers-lib/banner.ts");
         var messages = __webpack_require__("./browsers/browsers-lib/messages.ts");
+        var ready_stamp = __webpack_require__("./browsers/browsers-lib/ready-stamp.ts");
         var shared_utils = __webpack_require__("./browsers/browsers-lib/shared-utils.ts");
         var external_ws_ = __webpack_require__("ws");
         var external_ws_default = /*#__PURE__*/ __webpack_require__.n(external_ws_);
@@ -737,6 +794,50 @@ exports.modules = {
                     url
                 });
             }
+            async verifyGuestLoaded() {
+                if (!this.cdp) return {
+                    status: 'unknown'
+                };
+                if (!external_node_fs_.existsSync(this.outPath)) return {
+                    status: 'unknown'
+                };
+                const expectedId = (0, banner.vy)(this.outPath);
+                if (expectedId && (0, ensure.tg)(this.outPath)) {
+                    const present = await this.waitForExtensionTarget(expectedId, 12, 200);
+                    if (present) {
+                        if (!this.extensionId) this.extensionId = expectedId;
+                        return {
+                            status: 'loaded',
+                            extensionId: expectedId
+                        };
+                    }
+                }
+                let outcome;
+                try {
+                    outcome = await (0, ensure.iF)(this.cdp, this.outPath);
+                } catch  {
+                    return {
+                        status: 'unknown'
+                    };
+                }
+                if ('loaded' === outcome.status && !this.extensionId) this.extensionId = outcome.extensionId;
+                if ('refused' === outcome.status) this.loadRefusalReason = outcome.reason;
+                return outcome;
+            }
+            getLoadRefusalReason() {
+                return this.loadRefusalReason;
+            }
+            async waitForExtensionTarget(extensionId, maxRetries, backoffMs) {
+                const prefix = `chrome-extension://${extensionId}/`;
+                for(let attempt = 0; attempt <= maxRetries; attempt++){
+                    try {
+                        const targets = await this.cdp?.getTargets();
+                        if ((targets || []).some((t)=>String(t?.url || '').startsWith(prefix))) return true;
+                    } catch  {}
+                    if (attempt < maxRetries) await new Promise((r)=>setTimeout(r, backoffMs));
+                }
+                return false;
+            }
             async ensureLoaded() {
                 if (!this.cdp) throw new Error('CDP not connected');
                 const exists = external_node_fs_.existsSync(this.outPath);
@@ -803,7 +904,7 @@ exports.modules = {
                         version = info?.extensionInfo?.version;
                     } catch (error) {
                         try {
-                            const manifest = (0, ensure.M)(this.outPath);
+                            const manifest = (0, ensure.MB)(this.outPath);
                             name = String(manifest?.name || '') || void 0;
                             version = String(manifest?.version || '') || void 0;
                         } catch (e2) {
@@ -947,6 +1048,7 @@ exports.modules = {
                 cdp_extension_controller_define_property(this, "logSink", void 0);
                 cdp_extension_controller_define_property(this, "cdp", null);
                 cdp_extension_controller_define_property(this, "extensionId", null);
+                cdp_extension_controller_define_property(this, "loadRefusalReason", null);
                 this.outPath = args.outPath;
                 this.cdpPort = args.cdpPort;
                 this.profilePath = args.profilePath;
@@ -1005,6 +1107,34 @@ exports.modules = {
                     }
                 }
             } catch  {}
+            const loadOutcome = await cdpExtensionController.verifyGuestLoaded?.() ?? {
+                status: 'unknown'
+            };
+            if ('refused' === loadOutcome.status) {
+                const refusedPath = extensionOutputPath || selectedExtensionPaths[0] || '';
+                console.error(messages.M6(refusedPath, loadOutcome.reason));
+                plugin.logSink?.({
+                    level: 'error',
+                    text: `extension_load_refused: ${refusedPath}${loadOutcome.reason ? ` - ${loadOutcome.reason}` : ''}`,
+                    source: 'browser'
+                });
+                (0, ready_stamp.sf)(extensionOutputPath, loadOutcome.reason);
+                plugin.extensionLoadRefused = loadOutcome.reason;
+                plugin.cdpController = cdpExtensionController;
+                plugin.printBannerOnRecovery = async ()=>{
+                    await (0, banner.ai)({
+                        outPath: extensionOutputPath,
+                        browser: plugin.browser,
+                        hostPort: {
+                            host: '127.0.0.1',
+                            port: chromeRemoteDebugPort
+                        },
+                        getInfo: async ()=>cdpExtensionController.getInfoBestEffort(),
+                        browserVersionLine: plugin.browserVersionLine
+                    });
+                };
+                return;
+            }
             const mode = compilation?.options?.mode || 'development';
             let earlyBannerPrinted = false;
             if ('development' === mode) try {