Extremely stupid hack with per-tab panels

package.json

@@ -9,7 +9,7 @@
     },
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
+        "build": "vite build && node script/post-build.js",
         "check": "svelte-check --tsconfig ./tsconfig.json"
     },
     "devDependencies": {

script/post-build.js

@@ -0,0 +1,11 @@
+console.log('Removing side_panel from manifest, be ready...')
+
+import manifest from '../dist/manifest.json' assert { type: "json" };
+import fs from 'fs/promises'
+
+const newManifest = {...manifest}
+delete newManifest.side_panel
+
+fs.writeFile('./dist/manifest.json', JSON.stringify(newManifest, null, 2))
+
+console.log('side_panel eliminated')

src/background/index.ts

@@ -1,6 +1,7 @@
 import {storageLocal, storageSync} from "../storage";
 // @ts-ignore
 import contentScript from '../content?script'
+// import panel from '../sidepanel/sidepanel.html?url'
 
 // Background service workers
 // https://developer.chrome.com/docs/extensions/mv3/service_workers/
@@ -12,6 +13,23 @@ chrome.runtime.onInstalled.addListener(() => {
 
 chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
    .catch((error) => console.error(error));
+
+// Completely stupid hack, openPanelOnActionClick: true is only able to open a panel that persists through all the tabs
+// the only way to avoid this is to remove side_panel.default_path from manifest, set openPanelOnActionClick to true and then
+// for every tab you navigate to you would set tabId for the side panel in the listener
+//
+// It is also not possible to use chrome.sidePanel.open with the needed tab.id because it demands user interaction first.
+// Clicking on the action (chrome.action.onClicked) is not considered a user interaction... however it works on the second attempt
+chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
+    if (!tab.url) return;
+    const url = new URL(tab.url);
+    await chrome.sidePanel.setOptions({
+        tabId: tab.id,
+        path: 'src/sidepanel/sidepanel.html',
+        enabled: true
+    });
+});
+
 chrome.runtime.onMessage.addListener(
     async function(request, sender, sendResponse) {
         const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});

src/components/SidePanel.svelte

@@ -10,6 +10,7 @@
     let talks: Talk[] = [];
     let lastSyncTime: string = "never";
     let selectedTalk: Talk;
+    let submitInitialized = false;
 
     onMount(() => {
         storageLocal.get().then(({ talkList, lastSyncedAt }) => {
@@ -24,19 +25,27 @@
     const onRoll = async () => {
         await storageLocal.set({ selectedTalk: selectedTalk.id })
         await chrome.runtime.sendMessage({ submitTalk: selectedTalk.id });
+        submitInitialized = true
     }
 </script>
 
 <section class="container">
-    <h1>What are we submitting today?</h1>
-    {#if lastSyncTime === "never"}<i>Looks like you have not yet set up Github sync or have never synced. You can do that in extension options.</i>{/if}
-    {#if talks.length === 0 && lastSyncTime !== "never"}<i>Looks like you have not added any talks. You can do that by pushing any suitable markdown files to your repo.</i>{/if}
-    {#if talks.length > 0}
-        <Select options={talks} bind:value={selectedTalk} displayFn={getTalkName} />
+    {#if !submitInitialized}
+        <h1>What are we submitting today?</h1>
+        {#if lastSyncTime === "never"}<i>Looks like you have not yet set up Github sync or have never synced. You can do that in extension options.</i>{/if}
+        {#if talks.length === 0 && lastSyncTime !== "never"}<i>Looks like you have not added any talks. You can do that by pushing any suitable markdown files to your repo.</i>{/if}
+        {#if talks.length > 0}
+            <Select options={talks} bind:value={selectedTalk} displayFn={getTalkName} />
+        {/if}
+    {:else}
+        <h1>You're on your way to submit your next CFP, way to go!</h1>
     {/if}
+
     {#if selectedTalk}
         <hr/>
-        <Button on:click={onRoll} label="Let's roll"/>
+        {#if !submitInitialized}
+            <Button on:click={onRoll} label="Let's roll"/>
+        {/if}
         <br/>
         <hr/>
         <TalkView talk={selectedTalk} />

src/manifest.config.ts

@@ -29,6 +29,7 @@ export default defineManifest(async (env) => ({
         page: "src/options/options.html",
         open_in_tab: false,
     },
+    // This needs to be built and bundled, then later removed from the manifest in production build
     side_panel: {
         default_path: "src/sidepanel/sidepanel.html",
     },

src/manifest.dev.config.ts

@@ -0,0 +1,46 @@
+import { defineManifest } from "@crxjs/vite-plugin";
+import packageJson from "../package.json";
+
+const { version, name, description } = packageJson;
+
+// Convert from Semver (example: 0.1.0-beta6)
+const [major, minor, patch] = version
+    // can only contain digits, dots, or dash
+    .replace(/[^\d.-]+/g, "")
+    // split into version parts
+    .split(/[.-]/);
+
+export default defineManifest(async (env) => ({
+    manifest_version: 3,
+    name: name,
+    description: description,
+    version: `${major}.${minor}.${patch}`,
+    version_name: version,
+    icons: {
+        "16": "src/assets/icons/icon-16.png",
+        "32": "src/assets/icons/icon-32.png",
+        "48": "src/assets/icons/icon-48.png",
+        "128": "src/assets/icons/icon-128.png",
+    },
+    background: {
+        service_worker: "src/background/index.ts",
+    },
+    options_ui: {
+        page: "src/options/options.html",
+        open_in_tab: false,
+    },
+    // This has to be removed due to that stupid sidepanel bug
+    // side_panel: {
+    //     default_path: "src/sidepanel/sidepanel.html",
+    // },
+    action: {
+        default_icon: {
+            "16": "src/assets/icons/icon-16.png",
+            "32": "src/assets/icons/icon-32.png",
+            "48": "src/assets/icons/icon-48.png",
+            "128": "src/assets/icons/icon-128.png",
+        },
+    },
+    host_permissions: ["<all_urls>"],
+    permissions: ["storage", "sidePanel", "activeTab","scripting"] as chrome.runtime.ManifestPermissions[],
+}));

src/sidepanel/index.ts

@@ -10,13 +10,4 @@ async function render() {
     }
 }
 
-chrome.storage.onChanged.addListener((changes, namespace) => {
-    for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
-        console.log(
-            `Storage key "${key}" in namespace "${namespace}" changed.`,
-            `Old value was "${oldValue}", new value is "${newValue}".`
-        );
-    }
-});
-
 document.addEventListener("DOMContentLoaded", render);

tsconfig.node.json

@@ -6,5 +6,5 @@
         "module": "ESNext",
         "moduleResolution": "bundler"
     },
-    "include": ["vite.config.ts", "src/manifest.config.ts", "package.json"]
+    "include": ["vite.config.ts", "src/manifest.config.ts", "src/manifest.dev.config.ts", "package.json"]
 }

vite.config.ts

@@ -1,11 +1,17 @@
-import { crx } from "@crxjs/vite-plugin";
+import {crx, ManifestV3Export} from "@crxjs/vite-plugin";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { defineConfig } from "vite";
 import manifest from "./src/manifest.config";
+import devManifest from "./src/manifest.dev.config";
+
+// @ts-ignore
+console.log('Running a ',process.env.NODE_ENV, ' build...')
+// @ts-ignore
+const isDev = process.env.NODE_ENV === 'development'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [svelte(), crx({ manifest })],
+    plugins: [svelte(), crx({ manifest: isDev ? devManifest : manifest })],
     // HACK: https://github.com/crxjs/chrome-extension-tools/issues/696
     // https://github.com/crxjs/chrome-extension-tools/issues/746
     server: {