MyRelay

← Back to the notebook

A One-Click Extension With a Daily AI Spending Cap

Start with selected text, not an always-on assistant

A browser extension can make a chat model useful without making it expensive. Start with one narrow interaction: select a passage, open the extension, and press a button to explain it. Nothing happens automatically while you browse.

This walkthrough uses a Chromium extension, a small backend, and MyRelay as the model connection. The extension handles selection and display; your backend protects the relay key and controls spending. Your first milestone is one useful explanation from one deliberate click.

Set a small budget before connecting the model

Create a MyRelay account, then choose a small amount you are comfortable spending during development. MyRelay gives an individual developer one key and one pay-as-you-go budget across supported providers, with request-level token and cost visibility.

Pick one model rather than building a model selector immediately. Gemini 2.5 Flash is a reasonable candidate to test for short explanations; check its current price before committing. Copy the exact API model identifier from the available model information rather than guessing from its display name.

Define an application-side daily spending ceiling and a maximum number of requests. Your backend must enforce these limits; a number displayed in the popup is not a spending control.

Build the popup before adding network access

Create a Manifest V3 extension with a popup containing a text preview, an Explain button, a status message, and an answer area. During this stage, use a fixed sample answer so you can test the interface without paying for requests.

Request the activeTab and scripting permissions to read selected text after the user invokes the extension. Avoid broad access to every website. Some browser pages block script execution, so show a helpful message when selection cannot be read.

Cap the selection at a modest length, such as 4,000 characters, and show the text that will be sent. Character limits are only a rough proxy for tokens, but they prevent accidental submission of an entire article. Never silently send the whole page when the selection is empty.

Put the relay connection behind your backend

Keep your MyRelay key in a server-side secret store or environment variable. Do not embed it in the extension package or save it in extension storage. Distributed browser code cannot reliably keep a shared API credential secret.

The extension should send its request to an authenticated backend endpoint. For a personal prototype, restrict access to your own account. Check authentication, input length, request frequency, and budget availability before contacting the model. Cross-origin restrictions alone are not authentication.

Use an OpenAI-compatible SDK on the backend with the API base https://api.myapirelay.com. Supply your chosen model identifier, a short instruction to explain the selection plainly, and the selected text as user content. Treat that text as untrusted material, not as instructions that can change the task.

Make one click produce one bounded request

Set an explicit output-token limit using the option supported by your chosen model and endpoint. Start with enough room for a short explanation, then adjust after testing. Keep the first version stateless: each click sends only the current selection, not every previous exchange.

Disable the button while a request is running and assign each submission a unique identifier. Have the backend reject duplicate submissions so a double-click does not become two paid calls. Avoid automatic retries at first, especially when a timeout leaves the request outcome uncertain.

Enforce the daily ceiling conservatively by reserving an estimated maximum request cost before sending, including requests already in flight. Reconcile against reported usage afterward. A timeout or closed popup does not prove that upstream processing stopped or that no charge occurred.

Check real usage before adding more features

Render answers as plain text rather than inserting model output as HTML. Test empty selections, long passages, expired authentication, network failures, and exhausted budgets. Return clear errors without exposing credentials or backend internals.

Then try a small batch of real selections and inspect their tokens and costs in MyRelay. Compare those records with your backend accounting before trusting the daily cap. Keep selected text out of routine logs, and tell users it leaves the browser. Add history or longer answers only when the simple version is useful and its spending is predictable.

More to read