feat(api): expose BrowserExtension.getTabs to extensions (#1612)

Author: aurelleb

extra/extension-boilerplate/package-lock.json

@@ -103,6 +103,12 @@
 			"description": "Test action panel reconciliation, deep submenus, dynamic content, and filter preservation",
 			"mode": "view"
 		},
+		{
+			"name": "browser",
+			"title": "Browser Extension Showcase",
+			"description": "Browser extension",
+			"mode": "view"
+		},
 		{
 			"name": "desktop-notif-interval",
 			"title": "Desktop Notification Interval",
@@ -125,6 +131,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "2.3.2",
 		"@types/node": "^24.9.2",
+		"@types/react": "^19.2.17",
 		"typescript": "^5.9.2"
 	}
 }

extra/extension-boilerplate/package.json

@@ -0,0 +1,33 @@
+import {
+	Action,
+	ActionPanel,
+	BrowserExtension,
+	Icon,
+	List,
+} from "@vicinae/api";
+import { useEffect, useState } from "react";
+
+export default function BrowserExt() {
+	const [tabs, setTabs] = useState<BrowserExtension.Tab[]>();
+
+	useEffect(() => {
+		BrowserExtension.getTabs().then(setTabs);
+	}, []);
+
+	return (
+		<List searchBarPlaceholder="Search for browser tabs...">
+			{tabs?.map((t) => (
+				<List.Item
+					title={t.title ?? "Unnamed"}
+					subtitle={t.url}
+					icon={Icon.Tag}
+					actions={
+						<ActionPanel>
+							<Action title="Focus" onAction={() => t.focus()} />
+						</ActionPanel>
+					}
+				/>
+			))}
+		</List>
+	);
+}

extra/extension-boilerplate/src/browser.tsx

@@ -313,6 +313,19 @@ service Wallpaper {
   fn set(path: string, options: SetWallpaperOptions) => void;
 };
 
+struct BrowserTab {
+  id: int;
+  title?: string;
+  url: string;
+  active: boolean;
+  browserId: string;
+};
+
+service BrowserExtension {
+  fn getTabs() => BrowserTab[];
+  fn focusTab(browserId: string, tabId: int) => void;
+};
+
 // EventCore - used for loosely typed callbacks, required for component event handlers
 
 service EventCore {

figura/tsapi.fig

@@ -3,6 +3,7 @@
 #include "common/context.hpp"
 #include "extension-error-view-host.hpp"
 #include "extension/services/application-service.hpp"
+#include "extension/services/browser-extension-service.hpp"
 #include "extension/services/clipboard-service.hpp"
 #include "extension/services/command-service.hpp"
 #include "extension/services/event-core-service.hpp"
@@ -55,9 +56,10 @@ void ExtensionCommandRuntime::initialize() {
   auto *command = new ExtCommandService(*m_transport, m_command, services->rootItemManager(), *ctx.settings);
   auto *oauth = new ExtOAuthService(*m_transport, m_command->extensionId(), ctx);
   auto wallpaper = new ExtWallpaperService(*m_transport, *services->wallpaperManager());
+  auto browserExtension = new ExtBrowserExtensionService(*m_transport, *services->browserExtension());
 
   m_server = new tsapi::Server(*m_transport, app, ui, wm, clipboard, storage, fileSearch, command, oauth,
-                               wallpaper, eventCore);
+                               wallpaper, browserExtension, eventCore);
   m_server->setLogger(m_logger.get());
   m_server->setParent(this);
 }

src/server/src/extension/extension-command-runtime.cpp

@@ -0,0 +1,38 @@
+#pragma once
+#include "generated/tsapi.hpp"
+#include "services/browser-extension-service.hpp"
+
+class ExtBrowserExtensionService : public tsapi::AbstractBrowserExtension {
+  using Void = tsapi::Result<void>;
+
+public:
+  ExtBrowserExtensionService(tsapi::RpcTransport &transport, BrowserExtensionService &browser)
+      : AbstractBrowserExtension(transport), m_browser(browser) {}
+
+  tsapi::Result<std::vector<tsapi::BrowserTab>>::Future getTabs() override {
+    auto tabs = m_browser.tabs();
+    std::vector<tsapi::BrowserTab> transformed;
+
+    transformed.reserve(tabs.size());
+
+    for (auto &tab : tabs) {
+      transformed.emplace_back(tsapi::BrowserTab{
+          .id = tab.id,
+          .title = std::move(tab.title),
+          .url = std::move(tab.url),
+          .active = tab.active,
+          .browserId = std::move(tab.browserId),
+      });
+    }
+
+    return tsapi::Result<std::vector<tsapi::BrowserTab>>::ok(transformed);
+  }
+
+  tsapi::Result<void>::Future focusTab(std::string browserId, int32_t tabId) override {
+    m_browser.focusTab(browserId, tabId);
+    return Void::ok();
+  }
+
+private:
+  BrowserExtensionService &m_browser;
+};

src/server/src/extension/services/browser-extension-service.hpp

@@ -0,0 +1,26 @@
+import { getClient } from "./client";
+
+/**
+ * Use browser extension features, provided that the user has it installed and active.
+ */
+export namespace BrowserExtension {
+	export type Tab = {
+		id: number;
+		title?: string;
+		url: string;
+		active: boolean;
+		focus: () => void;
+	};
+
+	export async function getTabs(): Promise<Tab[]> {
+		const browser = getClient().BrowserExtension;
+		return browser.getTabs().then((bb) =>
+			bb.map<Tab>((b) => ({
+				...b,
+				focus: () => {
+					getClient().BrowserExtension.focusTab(b.browserId, b.id);
+				},
+			})),
+		);
+	}
+}

src/typescript/api/src/api/browser.ts

@@ -19,3 +19,4 @@ export * from "./file-search.js";
 export * from "./window-management.js";
 export * from "./command.js";
 export * from "./wallpaper.js";
+export * from "./browser.js";

src/typescript/api/src/api/index.ts

@@ -262,6 +262,14 @@ export type SetWallpaperOptions = {
 	screen?: string;
 }
 
+export type BrowserTab = {
+	id: number;
+	title?: string;
+	url: string;
+	active: boolean;
+	browserId: string;
+}
+
 class ApplicationService {
 	constructor(private readonly transport: RpcTransport) {}
 
@@ -485,6 +493,19 @@ class WallpaperService {
 
 }
 
+class BrowserExtensionService {
+	constructor(private readonly transport: RpcTransport) {}
+
+	getTabs(): Promise<BrowserTab[]> {
+		return this.transport.request("BrowserExtension/getTabs", { });	
+	}
+
+	focusTab(browserId: string, tabId: number): Promise<void> {
+		return this.transport.request("BrowserExtension/focusTab", { browserId, tabId});	
+	}
+
+}
+
 class EventCoreService {
 	constructor(private readonly transport: RpcTransport) {}
 
@@ -504,6 +525,7 @@ export class Client {
 		this.Command = new CommandService(this.transport);
 		this.OAuth = new OAuthService(this.transport);
 		this.Wallpaper = new WallpaperService(this.transport);
+		this.BrowserExtension = new BrowserExtensionService(this.transport);
 		this.EventCore = new EventCoreService(this.transport);
 	}
 
@@ -517,6 +539,7 @@ export class Client {
 	Command: CommandService;
 	OAuth: OAuthService;
 	Wallpaper: WallpaperService;
+	BrowserExtension: BrowserExtensionService;
 	EventCore: EventCoreService;
 
 }

src/typescript/api/src/api/proto/api.ts

@@ -0,0 +1,12 @@
+import type * as raycast from "@raycast/api";
+import * as vicinae from "@vicinae/api";
+import { unsupported } from "./unsupported";
+
+export namespace BrowserExtension {
+	export const getTabs: typeof raycast.BrowserExtension.getTabs = async () => {
+		return vicinae.BrowserExtension.getTabs();
+	};
+
+	export const getContent: typeof raycast.BrowserExtension.getContent =
+		unsupported("getContent");
+}