Add demo/test extension

.gitignore

@@ -10,3 +10,4 @@ logs
 *.map
 index.js
 index.d.ts
+distribution

.parcelrc

@@ -0,0 +1,3 @@
+{
+	"extends": "@parcel/config-webextension"
+}

demo/action.html

@@ -0,0 +1,2 @@
+<meta name="color-scheme" content="dark light">
+<script type="module" src="main.js"></script>

demo/init/context-menu.js

@@ -0,0 +1,31 @@
+/* global chrome */
+import mainHtmlUrl from 'url:../main.html';
+import {isChrome} from '../../index.ts';
+
+if (globalThis.chrome?.contextMenus?.create) {
+	chrome.contextMenus.removeAll();
+	chrome.contextMenus.create({
+		id: 'OPEN_ALL',
+		title: 'Open all contexts',
+		contexts: ['action'],
+	});
+
+	chrome.contextMenus.onClicked.addListener((info, tab) => {
+		if (info.menuItemId === 'OPEN_ALL') {
+			chrome.sidePanel?.open({
+				windowId: tab.windowId,
+			});
+			chrome.runtime.openOptionsPage();
+			chrome.tabs.create({
+				url: mainHtmlUrl,
+			});
+			chrome.tabs.create({
+				url: 'https://ephiframe.vercel.app/?iframe=' + chrome.runtime.getURL('sandbox.html'),
+			});
+
+			chrome.tabs.create({
+				url: isChrome() ? 'chrome://extensions/' : 'about:debugging#/runtime/this-firefox',
+			});
+		}
+	});
+}

demo/init/devtools-tab.js

@@ -0,0 +1,7 @@
+import mainHtmlUrl from 'url:../main.html';
+
+globalThis.chrome?.devtools?.panels?.create(
+	'WEBEXT-DETECT',
+	'icon.png',
+	mainHtmlUrl,
+);

demo/init/offscreen.js

@@ -0,0 +1,8 @@
+/* global chrome */
+import mainHtmlUrl from 'url:../main.html';
+
+globalThis.chrome?.offscreen?.createDocument({
+	url: mainHtmlUrl,
+	reasons: [chrome.offscreen.Reason.DOM_PARSER],
+	justification: 'Testing',
+}).catch(() => {}); // eslint-disable-line unicorn/prefer-top-level-await -- shh

demo/main.html

@@ -0,0 +1,2 @@
+<meta name="color-scheme" content="dark light">
+<script type="module" src="main.js"></script>

demo/main.js

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-unassigned-import */
+import * as detect from '../index.ts';
+import './init/context-menu.js';
+import './init/devtools-tab.js';
+import './init/offscreen.js';
+
+const table = Object.entries(detect)
+	.filter(([key, exported]) => typeof exported === 'function' && key !== 'disableWebextDetectPageCache')
+	.map(([key, detection]) => [key, detection()])
+	.sort(([keyA, resultA], [keyB, resultB]) => {
+		if (resultA === resultB) {
+			return keyA.localeCompare(keyB);
+		}
+
+		return resultA === true ? -1 : 1;
+	});
+
+console.table(table);
+
+if ('document' in globalThis) {
+	globalThis.document.body.insertAdjacentHTML('beforeend', `
+		<fieldset>
+			<legend>${detect.getContextName()}</legend>
+			<ul>
+				${table.map(([key, result]) => `
+					<li>
+						<span>
+							${result === true ? '✅' : (result === false ? '❌' : '')}
+							${key}
+							${typeof result === 'string' ? `: ${result}` : ''}
+						</span>
+					</li>
+				`).join('')}
+			</ul>
+		</fieldset>
+	`);
+}

demo/mainworld.js

@@ -0,0 +1,4 @@
+// It needs to be a standalone file or else the browser won't try to inject once per world
+
+// eslint-disable-next-line import/no-unassigned-import
+import './main.js';

demo/manifest.json

@@ -0,0 +1,47 @@
+{
+	"$schema": "https://json.schemastore.org/chrome-manifest",
+	"manifest_version": 3,
+	"name": "webext-detect",
+	"version": "0.0.0",
+	"description": "Demonstrates the webext-detect module",
+	"permissions": [
+		"contextMenus",
+		"sidePanel",
+		"offscreen"
+	],
+	"background": {
+		"service_worker": "main.js",
+		"type": "module",
+		"scripts": ["main.js"]
+	},
+	"action": {
+		"default_popup": "action.html"
+	},
+	"options_ui": {
+		"page": "options.html"
+	},
+	"devtools_page": "main.html",
+	"side_panel": {
+		"default_path": "sidepanel.html"
+	},
+	"sandbox": {
+		"pages": ["sandbox.html"]
+	},
+	"web_accessible_resources": [
+    {
+      "resources": [ "sandbox.html" ],
+      "matches": [ "https://*/*" ]
+    }
+  ],
+	"content_scripts": [
+		{
+			"matches": ["<all_urls>"],
+			"js": ["main.js"]
+		},
+		{
+			"world": "MAIN",
+			"matches": ["<all_urls>"],
+			"js": ["mainworld.js"]
+		}
+	]
+}

demo/options.html

@@ -0,0 +1,2 @@
+<meta name="color-scheme" content="dark light">
+<script type="module" src="main.js"></script>

demo/readme.md

@@ -0,0 +1,26 @@
+# Demo for webext-detect
+
+1. Run `npm run demo:build` in the project root
+2. Load the extension in Chrome
+
+## Available context and how to open them
+
+Click the extension icon in the toolbar:
+
+- Popup
+
+Right-click the icon and select "Open all contexts":
+
+- Options
+- SidePanel
+- Generic extension page
+- Sandboxed iframe
+
+Open the devtools and select the "WEBEXT-DETECT" tab:
+
+- DevTools
+
+In `chrome://extensions`, see the open debuggable contexts:
+
+- Background
+- Offscreen

demo/sandbox.html

@@ -0,0 +1,5 @@
+<meta name="color-scheme" content="dark light">
+<h1>Dedicated sandbox.html page</h1>
+<p>This file is treated as a sandboxed page when loaded in an iframe.</p>
+<script type="module" src="main.js"></script>
+

demo/sidepanel.html

@@ -0,0 +1,2 @@
+<meta name="color-scheme" content="dark light">
+<script type="module" src="main.js"></script>

package.json

@@ -30,6 +30,8 @@
 	],
 	"scripts": {
 		"build": "tsc",
+		"demo:build": "NODE_NO_WARNINGS=1 parcel build --no-cache",
+		"demo:watch": "NODE_NO_WARNINGS=1 parcel watch --no-cache --no-hmr",
 		"prepare": "tsc --sourceMap false",
 		"test": "xo && tsc && node index.js",
 		"watch": "tsc --watch"
@@ -47,12 +49,36 @@
 		}
 	},
 	"devDependencies": {
+		"@parcel/config-webextension": "^2.12.1-canary.3358",
+		"@parcel/resolver-default": "^2.0.0-canary.1735",
 		"@sindresorhus/tsconfig": "^6.0.0",
 		"@types/chrome": "^0.0.268",
+		"parcel": "^2.0.0-canary.1733",
 		"typescript": "^5.5.2",
 		"xo": "^0.58.0"
 	},
 	"engines": {
 		"node": ">=18"
+	},
+	"@parcel/resolver-default": {
+		"packageExports": true
+	},
+	"targets": {
+		"main": false,
+		"default": {
+			"source": "demo/manifest.json",
+			"distDir": "./distribution",
+			"sourceMap": {
+				"inline": true
+			}
+		}
+	},
+	"webExt": {
+		"sourceDir": "distribution",
+		"run": {
+			"startUrl": [
+				"https://example.com"
+			]
+		}
 	}
 }