feat(extension): add browser agent side panel

apps/extension/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+coverage
+playwright-report
+test-results
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+web-ext-artifacts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/extension/.oxfmtrc.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "../../node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": [".wxt/**", ".output/**", "node_modules/**"]
+}

apps/extension/.oxlintrc.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "../../node_modules/oxlint/configuration_schema.json",
+  "plugins": [
+    "typescript",
+    "unicorn",
+    "oxc",
+    "import",
+    "react",
+    "react-perf",
+    "jsx-a11y",
+    "promise",
+    "vitest"
+  ],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "error",
+    "pedantic": "error",
+    "perf": "error",
+    "style": "error"
+  },
+  "rules": {
+    "eslint/func-style": "off",
+    "eslint/max-lines-per-function": "off",
+    "eslint/max-statements": "off",
+    "eslint/no-duplicate-imports": "off",
+    "eslint/no-magic-numbers": "off",
+    "eslint/no-ternary": "off",
+    "eslint/no-void": "off",
+    "eslint/sort-imports": "off",
+    "import/exports-last": "off",
+    "import/group-exports": "off",
+    "import/no-default-export": "off",
+    "import/no-named-export": "off",
+    "import/no-unassigned-import": "off",
+    "import/prefer-default-export": "off",
+    "react/jsx-filename-extension": "off",
+    "react/jsx-max-depth": "off",
+    "react/jsx-no-literals": "off",
+    "react/only-export-components": "off",
+    "react/react-in-jsx-scope": "off",
+    "react-perf/jsx-no-new-function-as-prop": "off",
+    "typescript/prefer-readonly-parameter-types": "off",
+    "typescript/strict-void-return": "off",
+    "unicorn/no-null": "off",
+    "vitest/no-importing-vitest-globals": "off",
+    "vitest/prefer-to-be-falsy": "off",
+    "vitest/prefer-to-be-truthy": "off",
+    "vitest/require-hook": "off",
+    "vitest/require-test-timeout": "off"
+  },
+  "env": {
+    "browser": true,
+    "builtin": true,
+    "node": true
+  }
+}

apps/extension/entrypoints/background.ts

@@ -0,0 +1,131 @@
+import { enableActionClickSidePanel } from '@/src/shared/side-panel';
+import {
+  EVAL_TAB_MESSAGE,
+  LIST_INSPECTABLE_TABS_MESSAGE,
+  evalInTab,
+  evalInTabWithScripting,
+  isTabDebuggerRequest,
+  listInspectableTabs,
+  listInspectableTabsWithTabsApi,
+} from '@/src/shared/tab-debugger';
+import type {
+  BrowserScriptingApi,
+  BrowserTabsApi,
+  ChromeDebuggerApi,
+  TabDebuggerRequest,
+  TabDebuggerResponse,
+} from '@/src/shared/tab-debugger';
+
+interface ChromeRuntimeApi {
+  readonly onMessage?: {
+    readonly addListener: (
+      listener: (
+        message: unknown,
+        sender: unknown,
+        sendResponse: (response: TabDebuggerResponse) => void
+      ) => boolean | void
+    ) => void;
+  };
+}
+
+const handleTabDebuggerRequest = async ({
+  debuggerApi,
+  request,
+  scriptingApi,
+  tabsApi,
+}: {
+  debuggerApi: ChromeDebuggerApi | undefined;
+  request: TabDebuggerRequest;
+  scriptingApi: BrowserScriptingApi | undefined;
+  tabsApi: BrowserTabsApi | undefined;
+}): Promise<TabDebuggerResponse> => {
+  try {
+    if (request.type === LIST_INSPECTABLE_TABS_MESSAGE) {
+      if (debuggerApi) {
+        return {
+          ok: true,
+          tabs: await listInspectableTabs(debuggerApi),
+          type: LIST_INSPECTABLE_TABS_MESSAGE,
+        };
+      }
+
+      if (tabsApi) {
+        return {
+          ok: true,
+          tabs: await listInspectableTabsWithTabsApi(tabsApi),
+          type: LIST_INSPECTABLE_TABS_MESSAGE,
+        };
+      }
+
+      return { error: 'Tab listing API is unavailable.', ok: false };
+    }
+
+    if (debuggerApi) {
+      return {
+        ok: true,
+        result: await evalInTab({
+          code: request.code,
+          debuggerApi,
+          tabId: request.tabId,
+          ...(request.timeoutMs === undefined ? {} : { timeoutMs: request.timeoutMs }),
+        }),
+        type: EVAL_TAB_MESSAGE,
+      };
+    }
+
+    if (scriptingApi) {
+      return {
+        ok: true,
+        result: await evalInTabWithScripting({
+          code: request.code,
+          scriptingApi,
+          tabId: request.tabId,
+        }),
+        type: EVAL_TAB_MESSAGE,
+      };
+    }
+
+    return { error: 'Tab evaluation API is unavailable.', ok: false };
+  } catch (error) {
+    return {
+      error: error instanceof Error ? error.message : 'Debugger request failed.',
+      ok: false,
+    };
+  }
+};
+
+export default defineBackground(() => {
+  const chromeApi = (
+    globalThis as typeof globalThis & {
+      chrome?: {
+        debugger?: ChromeDebuggerApi;
+        runtime?: ChromeRuntimeApi;
+        scripting?: BrowserScriptingApi;
+        sidePanel?: Parameters<typeof enableActionClickSidePanel>[0];
+        tabs?: BrowserTabsApi;
+      };
+    }
+  ).chrome;
+
+  void enableActionClickSidePanel(chromeApi?.sidePanel);
+
+  chromeApi?.runtime?.onMessage?.addListener((message, sender, sendResponse) => {
+    void sender;
+
+    if (!isTabDebuggerRequest(message)) {
+      return;
+    }
+
+    void (async (): Promise<void> => {
+      const response = await handleTabDebuggerRequest({
+        debuggerApi: chromeApi.debugger,
+        request: message,
+        scriptingApi: chromeApi.scripting,
+        tabsApi: chromeApi.tabs,
+      });
+      sendResponse(response);
+    })();
+
+    return true;
+  });
+});