feat: add firefox support (#185)

Author: ignatiusmb

.github/workflows/release.yaml

@@ -19,12 +19,12 @@ jobs:
 
       - run: pnpm install
       - run: pnpm build
-      - run: cd build && zip -r svelte-devtools-${{ github.sha }} *
+      - run: cd build && zip -r svelte-devtools *
 
       - uses: actions/upload-artifact@v3
         with:
           name: extension-${{ github.sha }}
-          path: build/svelte-devtools-${{ github.sha }}.zip
+          path: build/svelte-devtools.zip
 
   # publish:
   #   runs-on: ubuntu-latest

README.md

@@ -7,10 +7,12 @@
 	</picture>
 </a>
 
-Svelte DevTools is a Chrome extension for the [Svelte](https://svelte.dev/) framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools.
+Svelte DevTools is a browser extension for the [Svelte](https://svelte.dev/) framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools.
 
 After installing you will see a new tab in Developer Tools. This tab displays a tree of Svelte components, HTMLx blocks, and DOM elements that were rendered on the page. By selecting one of the nodes in the tree, you can inspect and edit its current state in the panel to the right.
 
+> For Firefox users, you can grab the [`.zip` file of the latest version from the GitHub releases page](https://github.com/sveltejs/svelte-devtools/releases/latest) and load it as a temporary extension. Note that you may need to enable "Always Allow on localhost" in the extension settings.
+
 ![2.0.0 Screenshot](./.github/assets/screenshot-2.0.0.png '2.0.0 Screenshot')
 
 ## Requirements

package.json

@@ -5,7 +5,9 @@
 		"dev": "pnpm run --parallel \"/dev:*/\"",
 		"dev:app": "vite build --watch",
 		"dev:scripts": "rollup -cw",
-		"build": "vite build && rollup -c",
+		"build": "rollup -c && vite build",
+		"build:zip": "cd build && zip -r svelte-devtools.zip *",
+		"build:tar": "cd build && tar -czf svelte-devtools.tar.gz *",
 		"format": "prettier -w .",
 		"check": "pnpm run --parallel \"/check:*/\"",
 		"check:style": "prettier -c .",

rollup.config.js

@@ -7,12 +7,6 @@ export default defineConfig([
 			file: 'build/background.js',
 		},
 	},
-	{
-		input: 'static/sensor.js',
-		output: {
-			file: 'build/sensor.js',
-		},
-	},
 	{
 		input: 'src/client/index.js',
 		output: [

src/app.d.ts

@@ -58,7 +58,7 @@ declare global {
 		children: SvelteBlockDetail[];
 		/** `type: 'element' | 'component'` */
 		parent?: SvelteBlockDetail;
-		/** like `parent` but `type: 'component'`  */
+		/** like `parent` but `type: 'component'` */
 		container?: SvelteBlockDetail;
 
 		block: SvelteComponentDetail['component']['$$']['fragment'];

static/background.js

@@ -108,27 +108,36 @@ function courier(tabId, changed) {
 
 chrome.tabs.onActivated.addListener(({ tabId }) => sensor(tabId));
 chrome.tabs.onUpdated.addListener(
-	(tabId, changed) => changed.status === 'unloaded' && sensor(tabId),
+	(tabId, changed) => changed.status === 'complete' && sensor(tabId),
 );
 
 /** @param {number} tabId */
 async function sensor(tabId) {
 	try {
+		// add SvelteDevTools event listener
 		await chrome.scripting.executeScript({
 			target: { tabId },
-
 			func: () => {
-				const source = chrome.runtime.getURL('/sensor.js');
-				document.querySelector(`script[src="${source}"]`)?.remove();
-				const script = document.createElement('script');
-				script.setAttribute('src', source);
-				document.head.appendChild(script);
-
 				document.addEventListener('SvelteDevTools', ({ detail }) => {
 					chrome.runtime.sendMessage(detail);
 				});
 			},
 		});
+		// capture data to send to listener
+		await chrome.scripting.executeScript({
+			target: { tabId },
+			world: 'MAIN',
+			func: () => {
+				// @ts-ignore - injected if the website is using svelte
+				const [major] = [...(window.__svelte?.v ?? [])];
+
+				document.dispatchEvent(
+					new CustomEvent('SvelteDevTools', {
+						detail: { type: 'bypass::ext/icon:set', payload: major },
+					}),
+				);
+			},
+		});
 	} catch {
 		// for internal URLs like `chrome://` or `edge://` and extension gallery
 		// https://chromium.googlesource.com/chromium/src/+/ee77a52baa1f8a98d15f9749996f90e9d3200f2d/chrome/common/extensions/chrome_extensions_client.cc#131

static/manifest.json

@@ -21,13 +21,11 @@
 		}
 	},
 	"background": {
+		"scripts": ["background.js"],
 		"service_worker": "background.js"
 	},
 	"devtools_page": "register.html",
 	"host_permissions": ["*://*/*"],
 	"permissions": ["activeTab", "scripting"],
-	"web_accessible_resources": [
-		{ "matches": ["*://*/*"], "resources": ["courier.js"] },
-		{ "matches": ["*://*/*"], "resources": ["sensor.js"], "world": "MAIN" }
-	]
+	"web_accessible_resources": [{ "matches": ["*://*/*"], "resources": ["courier.js"] }]
 }

static/register.html

@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
 	<body>
 		<script src="register.js"></script>