For the complete documentation index, see llms.txt. Prefer markdown by appending.mdto documentation URLs or sendingAccept: text/markdown.
Overview
Use the shared Hono API from your browser extension. Session headers, protected routes, and the typed RPC client for popup and background scripts.
API deployment required
To enable communication between your WXT extension and the server in a production environment, the API must be deployed first. By default, it's hosted together with the web app, but you can also deploy it separately.
TurboStarter is designed to be a scalable and production-ready full-stack starter kit. One of its core features is a dedicated and extensible API layer. To enable this in a type-safe way, we chose Hono as the API server and client library.
Why Hono?
Hono is a small, simple, and ultrafast web framework that gives you a way to define your API endpoints with full type safety. It provides built-in middleware for common needs like validation, caching, and CORS. It also includes an RPC client for making type-safe function calls from the frontend. Being edge-first, it's optimized for serverless environments and offers excellent performance.
All API endpoints and their resolvers live in the packages/api/ package. Inside, the modules folder contains the API's feature modules. Each module has its own directory and exports its resolvers.
For each module, we create a separate Hono router and aggregate all sub-routers into one main router in the packages/api/index.ts file.
By default, the API is integrated with the web app and exposed as a Next.js route handler:
import { handle } from "hono/vercel";
import { appRouter } from "@workspace/api";
const handler = handle(appRouter);
export {
handler as GET,
handler as POST,
handler as OPTIONS,
handler as PUT,
handler as PATCH,
handler as DELETE,
handler as HEAD,
};Learn more about how to use the API in your browser extension code in the following sections:
How is this guide?
Last updated on