fix(extension): #107: allow http for localhost (#129)

* fix(extension): #107: allow http for localhost

* fix(extension): #107: allow http for localhost only for dev environment

apps/extension/public/manifest.json

@@ -16,7 +16,7 @@
   },
   "content_scripts": [
     {
-      "matches": ["https://*/*"],
+      "matches": ["https://*/*", "http://localhost:*/*"],
       "js": [
         "injected-connection-port.js",
         "injected-disconnect-listener.js",
@@ -25,7 +25,7 @@
       "run_at": "document_start"
     },
     {
-      "matches": ["https://*/*"],
+      "matches": ["https://*/*", "http://localhost:*/*"],
       "js": ["injected-penumbra-global.js"],
       "run_at": "document_start",
       "world": "MAIN"

apps/extension/src/senders/validate.ts

@@ -6,13 +6,13 @@ type ValidSender = chrome.runtime.MessageSender & {
   frameId: 0;
   documentId: string;
   tab: chrome.tabs.Tab & { id: number };
-
-  // the relationship between origin and url is pretty complex.
-  // just rely on the browser's tools.
-  origin: `${ValidProtocol}//${string}`;
-  url: `${ValidProtocol}//${string}/${string}`;
+  origin: string;
+  url: string;
 };
 
+const isHttpLocalhost = (url: URL): boolean =>
+  url.protocol === 'http:' && url.hostname === 'localhost';
+
 export const assertValidSender = (sender?: chrome.runtime.MessageSender) => {
   if (!sender) {
     throw new Error('Sender undefined');
@@ -34,7 +34,13 @@ export const assertValidSender = (sender?: chrome.runtime.MessageSender) => {
   if (parsedOrigin.origin !== sender.origin) {
     throw new Error('Sender origin is invalid');
   }
-  if (!(parsedOrigin.protocol in ValidProtocol)) {
+
+  if (
+    !(
+      parsedOrigin.protocol in ValidProtocol ||
+      (globalThis.__DEV__ && isHttpLocalhost(parsedOrigin))
+    )
+  ) {
     throw new Error(`Sender protocol is not ${Object.values(ValidProtocol).join(',')}`);
   }