feat: improve communication with new Selection Command Hub via background_script

packages/extension/manifest.json

@@ -25,11 +25,28 @@
       "js": [
         "src/command_hub.tsx"
       ]
+    },
+    {
+      "matches": [
+        "https://selection-command.com/*",
+        "https://selection-command-hub.siro-cola.workers.dev/*",
+        "http://localhost:3000/*"
+      ],
+      "js": [
+        "src/new_command_hub.tsx"
+      ]
     }
   ],
   "background": {
     "service_worker": "src/background_script.ts"
   },
+  "externally_connectable": {
+    "matches": [
+      "https://selection-command.com/*",
+      "https://selection-command-hub.siro-cola.workers.dev/*",
+      "http://localhost:3000/*"
+    ]
+  },
   "options_page": "src/options_page.html",
   "action": {},
   "permissions": [

packages/extension/src/background_script.ts

@@ -28,7 +28,12 @@ import { execute } from "@/action/background"
 import * as ActionHelper from "@/action/helper"
 import type { WindowType } from "@/types"
 import { Storage, SESSION_STORAGE_KEY } from "@/services/storage"
-import { ANALYTICS_EVENTS, sendEvent } from "@/services/analytics"
+import {
+  ANALYTICS_EVENTS,
+  sendEvent,
+  getOrCreateClientId,
+} from "@/services/analytics"
+import * as HubBackground from "@/services/hub/background"
 
 import { importIf } from "@import-if"
 importIf("production", "./lib/sentry/initialize")
@@ -211,7 +216,7 @@ const commandFuncs = {
 
     if (!cmd) {
       console.error("invalid command", param.command)
-      response(false)
+      response({ result: false, error: "Invalid command format" })
       return true
     }
 
@@ -227,8 +232,13 @@ const commandFuncs = {
           SCREEN.COMMAND_HUB,
         )
       })
-      .then(() => {
-        response(true)
+      .then(async () => {
+        const clientId = await getOrCreateClientId()
+        response({ result: true, install_id: clientId })
+      })
+      .catch((err) => {
+        console.error("[addCommand] Failed:", err)
+        response({ result: false, error: err?.message ?? "Unknown error" })
       })
     return true
   },
@@ -241,22 +251,20 @@ const commandFuncs = {
     const remove = async () => {
       const current = await Storage.getCommands()
       const commandToRemove = current.find((c) => c.id === param.id)
-      if (commandToRemove) {
-        const newCommands = current.filter((c) => c.id !== param.id)
-        if (newCommands.length === current.length) {
-          response(false)
-          return
-        }
-        await Storage.setCommands(newCommands)
-        await sendEvent(
-          ANALYTICS_EVENTS.COMMAND_REMOVE,
-          {
-            event_label: commandToRemove.openMode,
-          },
-          SCREEN.COMMAND_HUB,
-        )
+      if (!commandToRemove) {
+        response({ result: false, error: "Command not found" })
+        return
       }
-      response(true)
+      const newCommands = current.filter((c) => c.id !== param.id)
+      await Storage.setCommands(newCommands)
+      await sendEvent(
+        ANALYTICS_EVENTS.COMMAND_REMOVE,
+        {
+          event_label: commandToRemove.openMode,
+        },
+        SCREEN.COMMAND_HUB,
+      )
+      response({ result: true })
     }
     remove()
     return true
@@ -401,6 +409,11 @@ const commandFuncs = {
   [BgCommand.getTabId]: getTabId,
   [BgCommand.getActiveTabId]: getActiveTabId,
 
+  //
+  // Hub
+  //
+  [BgCommand.shareCommandToHub]: HubBackground.shareCommandToHub,
+
   //
   // PageAction
   //
@@ -420,6 +433,8 @@ for (const key in BgCommand) {
   Ipc.addListener(command, commandFuncs[key])
 }
 
+HubBackground.initHubExternalListener()
+
 const updateWindowSize = async (
   commandId: string,
   width: number,

packages/extension/src/components/commandHub/CommandHub.tsx

@@ -1,6 +1,3 @@
-import { useCommandHubBridge } from "@/hooks/useCommandHubBridge"
-
 export const CommandHub = (): JSX.Element => {
-  useCommandHubBridge()
   return <></>
 }

packages/extension/src/components/option/editor/CommandEditDialog.tsx

@@ -51,6 +51,7 @@ import { PageActionHelp } from "@/components/help/PageActionHelp"
 import { CommandType } from "@/components/option/editor/CommandType"
 import { SearchUrlAssistButton } from "@/components/option/editor/SearchUrlAssistButton"
 import { SearchUrlAssistDialog } from "@/components/option/editor/SearchUrlAssistDialog"
+import { hasCommandChanged } from "@/components/option/editor/commandChangedDetector"
 import { MenuImage } from "@/components/menu/MenuImage"
 import { Tooltip } from "@/components/Tooltip"
 import { PageActionStep } from "@/types/schema"
@@ -93,7 +94,6 @@ import {
   commandSchema,
   CommandSchemaType,
   isPageActionType,
-  isAiPromptType,
 } from "@/types/schema"
 import type {
   SelectionCommand,
@@ -468,13 +468,12 @@ const CommandEditDialogInner = ({
     if (command.sourceType === COMMAND_SOURCE_TYPE.SELF_CREATED) return
     if (getValues("sourceType") === COMMAND_SOURCE_TYPE.SELF_UPDATED) return
 
-    const changed =
-      (isSearchType(command) && searchUrl !== command.searchUrl) ||
-      (isPageActionType(command) &&
-        JSON.stringify(pageActionOption) !==
-          JSON.stringify(command.pageActionOption)) ||
-      (isAiPromptType(command) &&
-        aiPromptPrompt !== command.aiPromptOption.prompt)
+    const changed = hasCommandChanged(
+      command,
+      searchUrl,
+      pageActionOption,
+      aiPromptPrompt,
+    )
 
     if (changed) {
       setValue("sourceType", COMMAND_SOURCE_TYPE.SELF_UPDATED)

packages/extension/src/components/option/editor/commandChangedDetector.test.ts

@@ -0,0 +1,154 @@
+import { describe, it, expect } from "vitest"
+import { hasCommandChanged } from "./commandChangedDetector"
+import { OPEN_MODE, PAGE_ACTION_OPEN_MODE } from "@/const"
+import type {
+  SearchCommand,
+  PageActionCommand,
+  AiPromptCommand,
+  PageActionOption,
+} from "@/types"
+
+const makeSearchCommand = (
+  overrides: Partial<SearchCommand> = {},
+): SearchCommand => ({
+  id: "cmd-1",
+  title: "Google",
+  iconUrl: "https://example.com/icon.png",
+  openMode: OPEN_MODE.POPUP,
+  searchUrl: "https://example.com/search?q=%s",
+  ...overrides,
+})
+
+const makePageActionOption = (
+  overrides: Partial<PageActionOption> = {},
+): PageActionOption => ({
+  startUrl: "https://example.com",
+  openMode: PAGE_ACTION_OPEN_MODE.POPUP,
+  steps: [],
+  ...overrides,
+})
+
+const makePageActionCommand = (
+  overrides: Partial<Omit<PageActionCommand, "pageActionOption">> & {
+    pageActionOption?: Partial<PageActionOption>
+  } = {},
+): PageActionCommand => {
+  const { pageActionOption, ...rest } = overrides
+  return {
+    id: "cmd-2",
+    title: "Example Action",
+    iconUrl: "https://example.com/icon.png",
+    openMode: OPEN_MODE.PAGE_ACTION,
+    pageActionOption: makePageActionOption(pageActionOption),
+    ...rest,
+  }
+}
+
+const makeAiPromptCommand = (
+  overrides: Partial<AiPromptCommand> = {},
+): AiPromptCommand => ({
+  id: "cmd-3",
+  title: "AI Summarize",
+  iconUrl: "https://example.com/icon.png",
+  openMode: OPEN_MODE.AI_PROMPT,
+  aiPromptOption: {
+    serviceId: "chatgpt",
+    prompt: "Summarize: {text}",
+    openMode: OPEN_MODE.POPUP,
+  },
+  ...overrides,
+})
+
+describe("hasCommandChanged", () => {
+  describe("SearchCommand", () => {
+    it("returns false when searchUrl is unchanged", () => {
+      const cmd = makeSearchCommand()
+      expect(hasCommandChanged(cmd, cmd.searchUrl!, undefined, "")).toBe(false)
+    })
+
+    it("returns true when searchUrl is changed", () => {
+      const cmd = makeSearchCommand()
+      expect(
+        hasCommandChanged(cmd, "https://bing.com/search?q=%s", undefined, ""),
+      ).toBe(true)
+    })
+  })
+
+  describe("PageActionCommand", () => {
+    it("returns false when pageActionOption is unchanged", () => {
+      const cmd = makePageActionCommand()
+      expect(hasCommandChanged(cmd, "", { ...cmd.pageActionOption }, "")).toBe(
+        false,
+      )
+    })
+
+    it("returns true when startUrl is changed", () => {
+      const cmd = makePageActionCommand()
+      expect(
+        hasCommandChanged(
+          cmd,
+          "",
+          { ...cmd.pageActionOption, startUrl: "https://other.com" },
+          "",
+        ),
+      ).toBe(true)
+    })
+
+    it("returns true when pageUrl is changed", () => {
+      const cmd = makePageActionCommand()
+      expect(
+        hasCommandChanged(
+          cmd,
+          "",
+          { ...cmd.pageActionOption, pageUrl: "https://example.com/*" },
+          "",
+        ),
+      ).toBe(true)
+    })
+
+    it("returns false when only openMode is changed", () => {
+      const cmd = makePageActionCommand()
+      expect(
+        hasCommandChanged(
+          cmd,
+          "",
+          { ...cmd.pageActionOption, openMode: PAGE_ACTION_OPEN_MODE.TAB },
+          "",
+        ),
+      ).toBe(false)
+    })
+
+    it("does not throw when currentPageActionOption is null, returns true (differs from saved)", () => {
+      const cmd = makePageActionCommand()
+      expect(hasCommandChanged(cmd, "", null, "")).toBe(true)
+    })
+
+    it("does not throw when currentPageActionOption is undefined, returns true (differs from saved)", () => {
+      const cmd = makePageActionCommand()
+      expect(hasCommandChanged(cmd, "", undefined, "")).toBe(true)
+    })
+  })
+
+  describe("AiPromptCommand", () => {
+    it("returns false when prompt is unchanged", () => {
+      const cmd = makeAiPromptCommand()
+      expect(
+        hasCommandChanged(cmd, "", undefined, cmd.aiPromptOption.prompt),
+      ).toBe(false)
+    })
+
+    it("returns true when prompt is changed", () => {
+      const cmd = makeAiPromptCommand()
+      expect(hasCommandChanged(cmd, "", undefined, "Translate: {text}")).toBe(
+        true,
+      )
+    })
+  })
+
+  describe("other command types", () => {
+    it("returns false for CopyCommand", () => {
+      const cmd = makeSearchCommand({ openMode: OPEN_MODE.COPY })
+      expect(hasCommandChanged(cmd, "", undefined, "")).toBe(false)
+    })
+  })
+})

packages/extension/src/components/option/editor/commandChangedDetector.ts

@@ -0,0 +1,27 @@
+import { isSearchType, isPageActionType, isAiPromptType } from "@/types/schema"
+import type { SelectionCommand, PageActionOption } from "@/types"
+
+/**
+ * Returns true when the current form values differ from the saved command,
+ * ignoring pageActionOption.openMode (which represents display preference,
+ * not the command's core behavior).
+ */
+export function hasCommandChanged(
+  command: SelectionCommand,
+  currentSearchUrl: string,
+  currentPageActionOption: Partial<PageActionOption> | null | undefined,
+  currentAiPromptPrompt: string,
+): boolean {
+  if (isSearchType(command)) {
+    return currentSearchUrl !== command.searchUrl
+  }
+  if (isPageActionType(command)) {
+    const { openMode: _a, ...pao } = currentPageActionOption ?? {}
+    const { openMode: _b, ...cmdPao } = command.pageActionOption
+    return JSON.stringify(pao) !== JSON.stringify(cmdPao)
+  }
+  if (isAiPromptType(command)) {
+    return currentAiPromptPrompt !== command.aiPromptOption.prompt
+  }
+  return false
+}

packages/extension/src/const.ts

@@ -323,7 +323,7 @@ export const HUB_URL = isDebug
   : "https://ujiro99.github.io/selection-command"
 
 export const NEW_HUB_URL =
-  import.meta.env?.VITE_NEW_HUB_URL ?? "https://selection-command-hub.pages.dev"
+  import.meta.env?.VITE_NEW_HUB_URL ?? "https://selection-command.com"
 
 export const NEW_HUB_SUPPORTED_LOCALES = [
   "de",