fix(options): use typed options path

.changeset/fresh-frogs-open.md

@@ -0,0 +1,5 @@
+---
+"@read-frog/extension": patch
+---
+
+fix(options): open options tab directly for Dia compatibility

src/entrypoints/background/index.ts

@@ -3,6 +3,7 @@ import { browser, defineBackground } from "#imports"
 import { env } from "@/env"
 import { logger } from "@/utils/logger"
 import { onMessage } from "@/utils/message"
+import { openOptionsPage } from "@/utils/navigation"
 import { SessionCacheGroupRegistry } from "@/utils/session-cache/session-cache-group-registry"
 import { runAiSegmentSubtitles } from "./ai-segmentation"
 import { setupAnalyticsMessageHandlers } from "./analytics"
@@ -50,9 +51,9 @@ export default defineBackground({
       await browser.tabs.create({ url, active: active ?? true })
     })
 
-    onMessage("openOptionsPage", () => {
+    onMessage("openOptionsPage", async () => {
       logger.info("openOptionsPage")
-      void browser.runtime.openOptionsPage()
+      await openOptionsPage()
     })
 
     onMessage("aiSegmentSubtitles", async (message) => {

src/entrypoints/popup/app.tsx

@@ -1,6 +1,7 @@
-import { browser, i18n } from "#imports"
+import { i18n } from "#imports"
 import { Icon } from "@iconify/react"
 import { UserAccount } from "@/components/user-account"
+import { openOptionsPage } from "@/utils/navigation"
 import { version } from "../../../package.json"
 import { AISmartContext } from "./components/ai-smart-context"
 import { AlwaysTranslate } from "./components/always-translate"
@@ -44,7 +45,9 @@ function App() {
         <button
           type="button"
           className="flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 hover:bg-neutral-300 dark:hover:bg-neutral-700"
-          onClick={() => browser.runtime.openOptionsPage()}
+          onClick={() => {
+            void openOptionsPage()
+          }}
         >
           <Icon icon="tabler:settings" className="size-4" strokeWidth={1.6} />
           <span className="text-[13px] font-medium">

src/utils/__tests__/navigation.test.ts

@@ -0,0 +1,19 @@
+import { browser } from "#imports"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { openOptionsPage } from "../navigation"
+
+describe("navigation", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    browser.tabs.create = vi.fn().mockResolvedValue({})
+  })
+
+  it("opens the options page as an extension tab", async () => {
+    await openOptionsPage()
+
+    expect(browser.tabs.create).toHaveBeenCalledWith({
+      active: true,
+      url: "chrome-extension://test-extension-id/options.html",
+    })
+  })
+})

src/utils/navigation.ts

@@ -0,0 +1,8 @@
+import { browser } from "#imports"
+
+export async function openOptionsPage() {
+  await browser.tabs.create({
+    active: true,
+    url: browser.runtime.getURL("/options.html"),
+  })
+}