{"slug":"chrome-extension","title":"How to vibe code a Chrome extension with Xpersona","shortTitle":"Chrome extension","goal":"build a Chrome extension","description":"Use Xpersona to plan a Chrome extension manifest, popup, content script, permissions, storage, and first local test.","audience":"Builders turning a browser workflow, productivity idea, or page helper into a small extension.","searchIntents":["how to vibe code a Chrome extension","build Chrome extension with AI","OpenCode Chrome extension prompt","AI coding agent browser extension guide"],"firstPrompt":"Help me build a Chrome extension with Xpersona. Define the manifest, popup UI, content script, permissions, storage, local test steps, and first OpenCode prompt.","buildPlan":["Describe the exact browser action the extension should perform.","Ask Xpersona for the manifest version, permission list, popup flow, content script, and storage needs.","Build the smallest extension that loads locally and performs one visible action.","Test install, reload, permission prompts, and behavior on at least two target pages."],"pitfalls":["Requesting broad permissions before the workflow needs them.","Skipping reload/install steps during testing.","Mixing popup UI and content-script responsibilities too early."],"faq":[{"question":"What should I build first in a Chrome extension?","answer":"Start with a manifest, a popup or content script, and one visible action. Add storage and options after the core loop works."},{"question":"Can Xpersona help with extension permissions?","answer":"Yes. Ask it to justify each permission and remove any permission that is not required for the first milestone."}],"canonicalUrl":"https://www.xpersona.co/vibe-coding/chrome-extension","machineUrl":"https://www.xpersona.co/api/v1/guides/vibe-coding/chrome-extension","provider":{"name":"Xpersona","baseUrl":"https://www.xpersona.co/v1","defaultOpenCodeModel":"xpersona/xpersona-frieren-coder","displayModelName":"Xpersona Frieren 1"},"setupSteps":[{"name":"Describe the end goal","ui":"Guide input","description":"Write the thing you want to create in plain language. Keep it concrete: app, website, chatbot, dashboard, bug fix, or feature."},{"name":"Try the chat plan","ui":"Xpersona chat","description":"Open chat and ask Xpersona for the first build plan, files to edit, risks, and a tiny first milestone."},{"name":"Start usage based billing","ui":"Pricing","description":"When the plan is useful, start usage based billing so one subscription can cover chat, setup keys, OpenCode, and /v1 clients."},{"name":"Create the setup key","ui":"Dashboard key page","description":"Create one private setup key. Treat it like a password and paste it only into tools you control."},{"name":"Choose Xpersona in OpenCode","ui":"OpenCode provider picker","description":"Open the provider screen, choose Xpersona, paste the setup key, and pick xpersona/xpersona-frieren-coder."},{"name":"Run the first repo prompt","ui":"OpenCode prompt","description":"Ask OpenCode for the smallest useful implementation step. Review the diff, run checks, and continue from the result."},{"name":"Check usage and keep iterating","ui":"Usage dashboard","description":"Use the dashboard to inspect requests, tokens, spend, and status after each real run."}],"recommendedLinks":{"guide":"https://www.xpersona.co/vibe-coding/chrome-extension","hub":"https://www.xpersona.co/vibe-coding","chat":"https://www.xpersona.co/chat","pricing":"https://www.xpersona.co/pricing?checkoutTier=payg","opencode":"https://www.xpersona.co/opencode","dashboardOnboarding":"https://www.xpersona.co/dashboard/onboarding","usageDashboard":"https://www.xpersona.co/dashboard/usage","llms":"https://www.xpersona.co/llms.txt","llmsFull":"https://www.xpersona.co/llms-full.txt"}}