fix: statically inject courier content script (#238)

Author: ignatiusmb

workspace/extension/src/client/core.js

@@ -3,7 +3,7 @@ import { send } from './runtime.js';
 import { index as v4 } from './svelte-4.js';
 import { serialize } from './utils.js';
 
-// @ts-ignore - for the app to call with `eval`
+// @ts-ignore - https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools#selected-element
 window['#SvelteDevTools'] = {
 	/**
 	 * @param {string} id

workspace/extension/static/background.js

@@ -56,6 +56,8 @@ function courier(tabId, changed) {
 
 	chrome.scripting.executeScript({
 		target: { tabId },
+
+		// ensures we're listening to the events before they're dispatched
 		injectImmediately: true,
 
 		// no lexical context, `func` is serialized and deserialized.
@@ -69,15 +71,6 @@ function courier(tabId, changed) {
 		//	- chrome.i18n
 		//	- chrome.runtime
 		func: () => {
-			const source = chrome.runtime.getURL('/courier.js');
-			if (document.querySelector(`script[src="${source}"]`)) return;
-
-			// attach script manually instead of declaring through `files`
-			// because `detail` in the dispatched custom events is `null`
-			const script = document.createElement('script');
-			script.setAttribute('src', source);
-			document.head.appendChild(script);
-
 			chrome.runtime.onMessage.addListener((message, sender) => {
 				if (sender.id !== chrome.runtime.id) return; // unexpected sender
 				window.postMessage(message); // relay to content script (courier.js)

workspace/extension/static/manifest.json

@@ -24,6 +24,14 @@
 		"scripts": ["background.js"],
 		"service_worker": "background.js"
 	},
+	"content_scripts": [
+		{
+			"matches": ["<all_urls>"],
+			"js": ["courier.js"],
+			"run_at": "document_start",
+			"world": "MAIN"
+		}
+	],
 	"devtools_page": "register.html",
 	"host_permissions": ["*://*/*"],
 	"permissions": ["activeTab", "scripting"],