really really basic domain whitelisting

src/background/messages/declarative-net-request.ts

@@ -1,7 +1,9 @@
 import type { PlasmoMessaging } from '@plasmohq/messaging';
+import { domainIsInWhitelist, validateDomainWhiteList } from '~utils/storage';
 
 interface RequestBody {
   ruleId: number;
+  requestDomain: string;
   domain: string;
   requestHeaders?: Record<string, string>;
   responseHeaders?: Record<string, string>;
@@ -19,6 +21,8 @@ const mapHeadersToDeclarativeNetRequestHeaders = (
 
 const handler: PlasmoMessaging.MessageHandler<RequestBody> = async (req, res) => {
   try {
+    await validateDomainWhiteList(req.body.requestDomain);
+
     await chrome.declarativeNetRequest.updateDynamicRules({
       removeRuleIds: [req.body.ruleId],
       addRules: [

src/background/messages/proxy-request.ts

@@ -1,7 +1,10 @@
 import type { PlasmoMessaging } from '@plasmohq/messaging';
+import { domainIsInWhitelist, validateDomainWhiteList } from '~utils/storage';
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   try {
+    await validateDomainWhiteList(req.body.requestDomain);
+
     const response = await fetch(req.body.url, {
       headers: req.body.headers,
     });

src/contents/movie-web.ts

@@ -3,7 +3,7 @@ import type { PlasmoCSConfig } from 'plasmo';
 import { relayMessage } from '@plasmohq/messaging';
 
 export const config: PlasmoCSConfig = {
-  matches: ['https://movie-web.app/*', 'https://dev.movie-web.app/*', 'http://localhost:5173/*'],
+  matches: ['<all_urls>'],
 };
 
 relayMessage({

src/popup.tsx

@@ -1,9 +1,60 @@
+import { useStorage } from '@plasmohq/storage/hook'
+import { useState } from 'react';
+import { DEFAULT_DOMAIN_WHITELIST } from '~utils/storage';
+
 function IndexPopup() {
+  const [domainInput, setDomainInput] = useState('');
+  const [domainWhiteist, setDomainWhitelist] = useStorage<string[]>('domainWhitelist', (v) => v ?? DEFAULT_DOMAIN_WHITELIST)
+
+  const [error, setError] = useState<string | null>(null)
+
+  const handleDomainSubmit = () => {
+    try {
+      const origin = new URL(domainInput).origin
+      setDomainWhitelist([...domainWhiteist, origin])
+      setDomainInput('')
+    } catch (e) {
+      setError('Invalid domain')
+    }
+  }
+
   return (
-    <div style={{ width: 180 }}>
-      <p>
-        Extension running at version {chrome.runtime.getManifest().version}
-      </p>
+    <div style={{ width: 300 }}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <h1 style={{flexGrow: 1}}>
+        movie-web
+      </h1>
+
+      <h3>
+        v{chrome.runtime.getManifest().version}
+      </h3>
+      </div>
+
+      <h2 style={{ marginTop: 0 }}>Domains</h2>
+
+      <div>
+        <div>
+          <input
+            type="text"
+            value={domainInput}
+            onChange={e => setDomainInput(e.target.value)}
+          />
+          <button onClick={handleDomainSubmit}>Save</button>
+        </div>
+          {error && <span style={{ fontWeight: 'bold' }}>{error}</span>}
+        <table>
+          <tbody>
+            {domainWhiteist.map((domain) => (
+              <tr key={domain}>
+                <td>{domain}</td>
+                <td>
+                  <button onClick={() => setDomainWhitelist(domainWhiteist.filter(d => d !== domain))}>Remove</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   )
 }

src/utils/storage.ts

@@ -0,0 +1,15 @@
+import { Storage } from '@plasmohq/storage';
+
+export const DEFAULT_DOMAIN_WHITELIST = ['https://movie-web.app', 'http://localhost:5173'];
+
+export const storage = new Storage();
+
+export const domainIsInWhitelist = async (domain: string) => {
+  const whitelist = await storage.get<string[]>('domainWhitelist');
+  return whitelist?.some((d) => d.includes(domain)) ?? false;
+};
+
+export const validateDomainWhiteList = async (domain: string) => {
+  const isWhiteListed = await domainIsInWhitelist(domain);
+  if (!isWhiteListed) throw new Error('Domain is not whitelisted');
+};