feat(titlebar): make frameless window draggable (w/out extra dragarea)

scripts/patch-desktop-app.mjs

@@ -18,7 +18,11 @@ const injectTriggerOnce = (scriptId, scriptContent) =>
     : "");
 
 const mainScript = ".webpack/main/index",
-  rendererScript = ".webpack/renderer/tab_browser_view/preload",
+  rendererScripts = [
+    ".webpack/renderer/tab_browser_view/preload",
+    ".webpack/renderer/draggable_tabs/preload",
+    ".webpack/renderer/tabs/preload",
+  ],
   patches = {
     [mainScript]: (scriptContent) => {
       scriptContent = injectTriggerOnce(mainScript, scriptContent);
@@ -35,7 +39,7 @@ const mainScript = ".webpack/main/index",
 
       // restore node integration in the renderer process
       // so the notion-enhancer can be require()-d into it
-      replace("spellcheck:!0,sandbox:!0", "spellcheck:!0,nodeIntegration:true");
+      replace(/sandbox:!0/g, `sandbox:!1,nodeIntegration:!0,session:require('electron').session.fromPartition("persist:notion")`);
 
       // bypass webRequest filter to load enhancer menu
       replace("r.top!==r?t({cancel:!0})", "r.top!==r?t({})");
@@ -67,8 +71,10 @@ const mainScript = ".webpack/main/index",
 
       return scriptContent;
     },
-    [rendererScript]: (scriptContent) =>
+    ["*"]: (scriptId, scriptContent) => {
-      injectTriggerOnce(rendererScript, scriptContent),
+      if (!rendererScripts.includes(scriptId)) return scriptContent;
+      return injectTriggerOnce(scriptId, scriptContent);
+    },
   };
 
 export default (scriptId, scriptContent) => {

src/core/client.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { checkForUpdate } from "./updateCheck.mjs";
 import { sendTelemetryPing } from "./sendTelemetry.mjs";
 import { Modal, Frame } from "./islands/Modal.mjs";

src/core/electron.cjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 const getPreference = (key) => {
     const { preferences = {} } = globalThis.__notionStore?.getState()?.app;
     return preferences[key];

src/core/islands/MenuButton.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function MenuButton(
   { icon, notifications, themeOverridesLoaded, ...props },
   ...children

src/core/islands/Modal.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Modal(props, ...children) {
   const { html, extendProps, addKeyListener } = globalThis.__enhancerApi;
   extendProps(props, {

src/core/islands/Panel.mjs

@@ -5,6 +5,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Tooltip } from "./Tooltip.mjs";
 import { TopbarButton } from "./TopbarButton.mjs";
 import { Select } from "../menu/islands/Select.mjs";

src/core/islands/Tooltip.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Tooltip(props, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {

src/core/islands/TopbarButton.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function TopbarButton({ icon, ...props }) {
   const { html, extendProps, addMutationListener } = globalThis.__enhancerApi;
   extendProps(props, {
@@ -16,20 +18,20 @@ function TopbarButton({ icon, ...props }) {
     &[data-active]:bg-[color:var(--theme--bg-hover)]`,
   });
 
-  const notionTopbar = ".notion-topbar-favorite-button",
+  const topbarFavorite = ".notion-topbar-favorite-button",
     $button = html`<button ...${props}>
       <i
         class="i-${icon} w-[20px] h-[20px]
         fill-[color:var(--theme--fg-secondary)]"
       />
     </button>`,
-    addToTopbar = () => {
+    addToTopbar = (after = topbarFavorite) => {
       if (document.contains($button)) return;
-      document.querySelector(notionTopbar)?.after($button);
+      document.querySelector(after)?.after($button);
     };
-  $button.addToTopbar = () => {
+  $button.addToTopbar = (after = topbarFavorite) => {
-    addToTopbar();
+    addMutationListener(after, () => addToTopbar(after));
-    addMutationListener(notionTopbar, addToTopbar);
+    addToTopbar(after);
   };
   return $button;
 }

src/core/menu/index.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>notion-enhancer menu</title>
     <link rel="stylesheet" href="./menu.css" />
-    <link rel="stylesheet" href="../../_vendor/coloris.min.css" />
+    <link rel="stylesheet" href="../../vendor/coloris.min.css" />
-    <script src="../../_vendor/coloris.min.js" type="module"></script>
+    <script src="../../vendor/coloris.min.js" type="module"></script>
     <script src="./menu.mjs" type="module" defer></script>
   </head>
   <body>

src/core/menu/islands/Banner.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Popup } from "./Popup.mjs";
 import { Button } from "./Button.mjs";
 import { Description } from "./Description.mjs";

src/core/menu/islands/Button.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Button({ icon, variant, tagName, ...props }, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {

src/core/menu/islands/Checkbox.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Checkbox({ _get, _set, _requireReload = true, ...props }) {
   let _initialValue;
   const { html, extendProps, setState, useState } = globalThis.__enhancerApi,

src/core/menu/islands/Description.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Description(props, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {

src/core/menu/islands/Footer.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Button } from "./Button.mjs";
 
 function Footer({ categories }) {
@@ -30,7 +32,7 @@ function Footer({ categories }) {
     });
 
   useState(["view"], ([view]) => {
-    let footerOpen = $reload.style.display !== "none";
+    let [footerOpen] = useState(["databaseUpdated"]);
     for (const [ids, $btn] of $categories) {
       const modInCategory = ids.some((id) => id === view);
       if (modInCategory) footerOpen = true;
@@ -40,7 +42,7 @@ function Footer({ categories }) {
   });
   useState(["databaseUpdated"], ([databaseUpdated]) => {
     $reload.style.display = databaseUpdated ? "" : "none";
-    setState({ footerOpen: true });
+    if (databaseUpdated) setState({ footerOpen: true });
   });
 
   return html`<footer

src/core/menu/islands/Heading.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Heading(props, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {

src/core/menu/islands/Input.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 const updateHotkey = (event) => {
     const keys = [];
     for (const modifier of ["metaKey", "ctrlKey", "altKey", "shiftKey"]) {

src/core/menu/islands/List.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Description } from "./Description.mjs";
 import { Input } from "./Input.mjs";
 import { Mod } from "./Mod.mjs";

src/core/menu/islands/Mod.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Description } from "./Description.mjs";
 import { Toggle } from "./Toggle.mjs";
 

src/core/menu/islands/Onboarding.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Heading } from "./Heading.mjs";
 import { Description } from "./Description.mjs";
 import { Checkbox } from "./Checkbox.mjs";

src/core/menu/islands/Options.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Heading } from "./Heading.mjs";
 import { Description } from "./Description.mjs";
 import { Input } from "./Input.mjs";

src/core/menu/islands/Popup.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Popup(
   { trigger, mode = "left", width = 250, maxWidth, ...props },
   ...children

src/core/menu/islands/Profiles.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Heading } from "./Heading.mjs";
 import { Description } from "./Description.mjs";
 import { Checkbox } from "./Checkbox.mjs";

src/core/menu/islands/Select.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Popup } from "./Popup.mjs";
 
 function Option({ $icon = "", value = "", _get, _set }) {

src/core/menu/islands/Sidebar.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { Description } from "./Description.mjs";
 
 function SidebarHeading({}, ...children) {

src/core/menu/islands/Telemetry.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { collectTelemetryData } from "../../sendTelemetry.mjs";
 import { Option } from "./Options.mjs";
 

src/core/menu/islands/Tile.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Tile({ icon, title, tagName, ...props }, ...children) {
   const { html, extendProps } = globalThis.__enhancerApi;
   extendProps(props, {

src/core/menu/islands/Toggle.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function Toggle({ _get, _set, _requireReload = true, ...props }) {
   let _initialValue;
   const { html, extendProps, setState, useState } = globalThis.__enhancerApi,

src/core/menu/islands/View.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 function View({ id }, ...children) {
   const { html, setState, useState } = globalThis.__enhancerApi,
     // set padding on last child to maintain pad on overflow

src/core/menu/menu.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 import { checkForUpdate, isDevelopmentBuild } from "../updateCheck.mjs";
 import { Sidebar } from "./islands/Sidebar.mjs";
 import { Footer } from "./islands/Footer.mjs";
@@ -124,7 +126,7 @@ const renderMenu = async () => {
         categories=${categories}
       />`,
       $main = html`
-        <main class="flex-(& col) overflow-hidden transition-[height]">
+        <main class="flex-(& col) overflow-hidden transition-[height]" style="height: calc(100% + 65px)">
           <!-- wrappers necessary for transitions and breakpoints -->
           <div class="grow overflow-auto">
             <div class="relative h-full w-full">
@@ -182,7 +184,7 @@ const renderMenu = async () => {
 const importApi = () => {
     return (_apiImport ??= (async () => {
       const api = globalThis.__enhancerApi;
-      if (typeof api === "undefined") await import("../../_common/system.js");
+      if (typeof api === "undefined") await import("../../common/system.js");
       await import("../../load.mjs").then((i) => i.default);
     })());
   },

src/core/sendTelemetry.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 const pingEndpoint = "https://notion-enhancer.deno.dev/api/ping",
   collectTelemetryData = async () => {
     const { platform, version } = globalThis.__enhancerApi,

src/core/updateCheck.mjs

@@ -4,6 +4,8 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+"use strict";
+
 let _release;
 const repo = "notion-enhancer/notion-enhancer",
   endpoint = `https://api.github.com/repos/${repo}/releases/latest`,

src/extensions/titlebar/buttons.css

@@ -1,76 +0,0 @@
-/**
- * notion-enhancer: integrated titlebar
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-.integrated_titlebar--dragarea {
-  width: 100%;
-  display: block;
-  -webkit-app-region: drag;
-  background: var(--theme--bg_secondary);
-  height: var(--integrated_titlebar--dragarea-height);
-}
-
-.integrated_titlebar--buttons {
-  display: flex;
-  align-items: center;
-}
-.sidebar > .integrated_titlebar--buttons {
-  margin: -0.5rem 0 0.75rem auto;
-}
-
-.integrated_titlebar--buttons button {
-  user-select: none;
-  transition: background 20ms ease-in 0s;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: 3px;
-  height: 28px;
-  width: 33px;
-  padding: 0 0.25px 0 0;
-
-  margin-left: 2px;
-  border: none;
-  background: transparent;
-  font-size: 18px;
-  -webkit-app-region: no-drag;
-}
-.integrated_titlebar--buttons button svg {
-  display: block;
-  width: 20px;
-  height: 20px;
-  fill: var(--theme--icon);
-  color: var(--theme--icon);
-}
-
-.integrated_titlebar--buttons button:focus,
-.integrated_titlebar--buttons button:hover {
-  background: var(--theme--ui_interactive-hover);
-}
-.integrated_titlebar--buttons button:active {
-  background: var(--theme--ui_interactive-active);
-}
-#integrated_titlebar--close:focus,
-#integrated_titlebar--close:hover,
-#integrated_titlebar--close:active {
-  background: var(--theme--accent_red);
-  color: var(--theme--accent_red-text);
-}
-
-.notion-update-sidebar [style*='margin-top: 45px;'] {
-  margin-top: calc(45px + var(--integrated_titlebar--dragarea-height, 0px)) !important;
-}
-.notion-topbar {
-  height: calc(45px + var(--integrated_titlebar--dragarea-height, 0px)) !important;
-}
-.notion-frame {
-  height: calc(100vh - 45px - var(--integrated_titlebar--dragarea-height, 0px)) !important;
-}
-
-body > .body-container {
-  height: calc(100% - var(--integrated_titlebar--dragarea-height, 0px)) !important;
-}

src/extensions/titlebar/client.css

@@ -4,10 +4,12 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+.notion-tabs,
 .notion-topbar {
   user-select: none;
   -webkit-app-region: drag;
 }
+.notion-tabs :is([aria-label], [draggable]),
 .notion-topbar > div > * {
   -webkit-app-region: no-drag;
 }

src/extensions/titlebar/client.mjs

@@ -4,55 +4,28 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-'use strict';
+"use strict";
+
+import { TopbarButton } from "../../core/islands/TopbarButton.mjs";
 
 // import { createWindowButtons } from './buttons.mjs';
 
-export default async function (api, db) {
+export default async function ({ html }, db) {
-  // const { web, registry, electron } = api,
+  const topbarMore = ".notion-topbar-more-button";
-  //   tilingMode = await db.get(['tiling']),
+  const $minimizeButton = html`<${TopbarButton}
-  //   dragareaHeight = await db.get(['dragarea_height']),
+      aria-label="Minimize window"
-  //   tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42'),
+      icon="minus"
-  //   sidebarSelector = '.notion-sidebar',
+    />`,
-  //   panelSelector = '#enhancer--panel',
+    $maximizeButton = html`<${TopbarButton}
-  //   topbarSelector = '.notion-topbar',
+      aria-label="Maximize window"
-  //   topbarActionsSelector = '.notion-topbar-action-buttons';
+      icon="maximize"
-  // if (tilingMode || tabsEnabled) return;
+    />`,
-
+    $unmaximizeButton = html`<${TopbarButton}
-  // let sidebarWidth = '0px',
+      aria-label="Unmaximize window"
-  //   panelWidth = '0px';
+      icon="minimize"
-  // const updateDragareaOffsets = () => {
+    />`,
-  //   const $sidebar = document.querySelector(sidebarSelector),
+    $closeButton = html`<${TopbarButton} aria-label="Close window" icon="x" />`;
-  //     newSidebarWidth =
+  $closeButton.addToTopbar(topbarMore);
-  //       !$sidebar || $sidebar.style.height === 'auto' ? '0px' : $sidebar.style.width,
+  $maximizeButton.addToTopbar(topbarMore);
-  //     $panel = document.querySelector(panelSelector),
+  $minimizeButton.addToTopbar(topbarMore);
-  //     newPanelWidth =
-  //       $panel && $panel.dataset.enhancerPanelPinned === 'true'
-  //         ? window
-  //             .getComputedStyle(document.documentElement)
-  //             .getPropertyValue('--component--panel-width')
-  //         : '0px';
-  //   if (newSidebarWidth !== sidebarWidth) {
-  //     sidebarWidth = newSidebarWidth;
-  //     electron.sendMessageToHost('sidebar-width', sidebarWidth);
-  //   }
-  //   if (newPanelWidth !== panelWidth) {
-  //     panelWidth = newPanelWidth;
-  //     electron.sendMessageToHost('panel-width', panelWidth);
-  //   }
-  // };
-  // web.addDocumentObserver(updateDragareaOffsets);
-
-  // await web.whenReady([topbarSelector, topbarActionsSelector]);
-  // const $topbar = document.querySelector(topbarSelector),
-  //   $dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
-  // $topbar.prepend($dragarea);
-  // document.documentElement.style.setProperty(
-  //   '--integrated_titlebar--dragarea-height',
-  //   dragareaHeight + 'px'
-  // );
-
-  // const $topbarActions = document.querySelector(topbarActionsSelector),
-  //   $windowButtons = await createWindowButtons(api, db);
-  // web.render($topbarActions.parentElement, $windowButtons);
 }

src/extensions/titlebar/electron.cjs

@@ -7,7 +7,6 @@
 "use strict";
 
 module.exports = async ({}, db) => {
-  const titlebarStyle = await db.get("titlebarStyle");
   Object.assign((globalThis.__notionConfig ??= {}), {
     titlebarStyle: "hidden",
   });

src/extensions/titlebar/frame.mjs

@@ -1,43 +0,0 @@
-/**
- * notion-enhancer: integrated titlebar
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-'use strict';
-
-import { createWindowButtons } from './buttons.mjs';
-
-export default async function (api, db) {
-  const { web, registry } = api,
-    tilingMode = await db.get(['tiling']),
-    dragareaHeight = await db.get(['dragarea_height']),
-    tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42');
-
-  if (tabsEnabled && !tilingMode) {
-    const windowActionsSelector = '#window-actions';
-    await web.whenReady([windowActionsSelector]);
-
-    const $topbarActions = document.querySelector(windowActionsSelector),
-      $windowButtons = await createWindowButtons(api, db);
-    web.render($topbarActions, $windowButtons);
-  } else {
-    const dragareaSelector = '[style*="-webkit-app-region: drag;"]';
-    await web.whenReady([dragareaSelector]);
-
-    const dragarea = document.querySelector(dragareaSelector);
-    dragarea.style.top = '2px';
-    dragarea.style.height = tilingMode ? '0' : `${dragareaHeight}px`;
-
-    document.getElementById('notion').addEventListener('ipc-message', (event) => {
-      switch (event.channel) {
-        case 'notion-enhancer:sidebar-width':
-          dragarea.style.left = event.args[0];
-          break;
-        case 'notion-enhancer:panel-width':
-          dragarea.style.right = event.args[0];
-          break;
-      }
-    });
-  }
-}

src/extensions/titlebar/menu.mjs

@@ -1,29 +0,0 @@
-/**
- * notion-enhancer: integrated titlebar
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-'use strict';
-
-import { createWindowButtons } from './buttons.mjs';
-
-export default async function (api, db) {
-  const { web } = api,
-    tilingMode = await db.get(['tiling']),
-    dragareaHeight = await db.get(['dragarea_height']),
-    sidebarSelector = '.sidebar';
-  if (tilingMode) return;
-
-  await web.whenReady([sidebarSelector]);
-  const $dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
-  document.body.prepend($dragarea);
-  document.documentElement.style.setProperty(
-    '--integrated_titlebar--dragarea-height',
-    dragareaHeight + 'px'
-  );
-
-  const $sidebar = document.querySelector(sidebarSelector),
-    $windowButtons = await createWindowButtons(api, db);
-  $sidebar.prepend($windowButtons);
-}

src/extensions/titlebar/mod.json

@@ -48,5 +48,9 @@
   ],
   "clientStyles": ["client.css"],
   "clientScripts": ["client.mjs"],
-  "electronScripts": [[".webpack/main/index", "electron.cjs"]]
+  "electronScripts": [
+    [".webpack/main/index", "electron.cjs"],
+    [".webpack/renderer/draggable_tabs/preload", "tabs.cjs"],
+    [".webpack/renderer/tabs/preload", "tabs.cjs"]
+  ]
 }

src/extensions/titlebar/tabs.cjs

@@ -0,0 +1,24 @@
+/**
+ * notion-enhancer: titlebar
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+"use strict";
+
+module.exports = async ({ whenReady }, db) => {
+  const api = await whenReady(),
+    { addMutationListener } = api,
+    tabSelector = ".hide-scrollbar > div > div",
+    titlebarStyle = await db.get("titlebarStyle");
+
+  // only make area draggable if tabs are visible:
+  // otherwise dragarea overlaps regular app topbar
+  addMutationListener(".hide-scrollbar", () => {
+    const tabCount = document.querySelectorAll(tabSelector).length;
+    if (tabCount > 1) document.body.classList.add("notion-tabs");
+    else document.body.classList.remove("notion-tabs");
+  });
+
+  if (titlebarStyle === "Disabled") return;
+};

src/init.js

@@ -6,16 +6,23 @@
 
 "use strict";
 
-const isElectron = () => {
+globalThis.__enhancerApi ??= {};
+const whenReady = new Promise((res, rej) => {
+    globalThis.__enhancerApi.__isReady = res;
+  }),
+  isElectron = () => {
     try {
       return typeof module !== "undefined";
     } catch {}
     return false;
-};
+  };
+Object.assign((globalThis.__enhancerApi ??= {}), {
+  whenReady: (callback) => whenReady.then(callback),
+});
 
 if (isElectron()) {
-  require("./_common/system.js");
+  require("./common/system.js");
-  require("./_common/registry.js");
+  require("./common/registry.js");
   const { enhancerUrl } = globalThis.__enhancerApi,
     { getMods, isEnabled, modDatabase } = globalThis.__enhancerApi;
 
@@ -24,7 +31,7 @@ if (isElectron()) {
 
   module.exports = async (target, __exports, __eval) => {
     if (target === mainScript) require("./worker.js");
-    if (target === rendererScript) {
+    else {
       // expose globalThis.__enhancerApi to scripts
       const { contextBridge } = require("electron"),
         __getEnhancerApi = () => globalThis.__enhancerApi;
@@ -52,6 +59,6 @@ if (isElectron()) {
     }
   };
 } else {
-  import(chrome.runtime.getURL("/_common/system.js")) //
+  import(chrome.runtime.getURL("/common/system.js")) //
     .then(() => import(chrome.runtime.getURL("/load.mjs")));
 }

src/load.mjs

@@ -16,9 +16,10 @@ export default (async () => {
     signedIn = localStorage["LRU:KeyValueStore2:current-user-id"],
     pageLoaded = /(^\/$)|((-|\/)[0-9a-f]{32}((\?.+)|$))/.test(location.pathname),
     IS_MENU = location.href.startsWith(enhancerUrl("core/menu/index.html")),
+    IS_TABS = /\/app\/\.webpack\/renderer\/(draggable_)?tabs\/index.html$/.test(location.href),
     IS_ELECTRON = ['linux', 'win32', 'darwin'].includes(platform);
 
-  if (!IS_MENU) {
+  if (!IS_MENU && !IS_TABS) {
     if (!signedIn || !pageLoaded) return;
     console.log("notion-enhancer: loading...");
   }
@@ -43,15 +44,15 @@ export default (async () => {
 
   await Promise.all([
     // i.e. if (not_menu) or (is_menu && not_electron), then import
-    !(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("_assets/icons.svg.js")),
+    !(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("assets/icons.svg.js")),
-    import(enhancerUrl("_vendor/twind.min.js")),
+    import(enhancerUrl("vendor/twind.min.js")),
-    import(enhancerUrl("_vendor/lucide.min.js")),
+    import(enhancerUrl("vendor/lucide.min.js")),
-    import(enhancerUrl("_vendor/htm.min.js")),
+    import(enhancerUrl("vendor/htm.min.js")),
   ]);
   await Promise.all([
-    !(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("_common/registry.js")),
+    !(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("common/registry.js")),
-    import(enhancerUrl("_common/events.js")),
+    import(enhancerUrl("common/events.js")),
-    import(enhancerUrl("_common/markup.js")),
+    import(enhancerUrl("common/markup.js")),
   ]);
 
   const { getMods, isEnabled, modDatabase } = globalThis.__enhancerApi;
@@ -69,7 +70,7 @@ export default (async () => {
     }
 
     // clientScripts
-    if (IS_MENU) continue;
+    if (IS_MENU || IS_TABS) continue;
     const db = await modDatabase(mod.id);
     for (let script of mod.clientScripts ?? []) {
       script = await import(enhancerUrl(`${mod._src}/${script}`));
@@ -78,4 +79,5 @@ export default (async () => {
   }
 
   if (IS_MENU) console.log("notion-enhancer: ready");
+  globalThis.__enhancerApi.__isReady(globalThis.__enhancerApi);
 })();

src/manifest.json

@@ -9,12 +9,12 @@
   "background": { "service_worker": "/worker.js" },
   "action": {},
   "icons": {
-    "16": "/_assets/colour-x16.png",
+    "16": "/assets/colour-x16.png",
-    "32": "/_assets/colour-x32.png",
+    "32": "/assets/colour-x32.png",
-    "48": "/_assets/colour-x48.png",
+    "48": "/assets/colour-x48.png",
-    "128": "/_assets/colour-x128.png",
+    "128": "/assets/colour-x128.png",
-    "256": "/_assets/colour-x256.png",
+    "256": "/assets/colour-x256.png",
-    "512": "/_assets/colour-x512.png"
+    "512": "/assets/colour-x512.png"
   },
   "permissions": [
     "tabs",