From Foldspace: Browser Extension
Create a Chrome extension project that adds Foldspace to a live website. Use when the user needs a browser extension, wants to inject Foldspace without source access, or is starting a no-codebase client integration from a URL.
How this skill is triggered — by the user, by Claude, or both
Slash command
/foldspace-remote-plugin:foldspace-create-extensionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Remote extension path: `foldspace-get-started` -> `foldspace-create-extension` -> `foldspace-observe-flow-in-site` -> `foldspace-build-action` -> `foldspace-add-navigation` when needed -> `foldspace-verify-actions`.
extension-app-template/agent/actions/index.tsextension-app-template/agent/api/index.tsextension-app-template/agent/constants.tsextension-app-template/agent/utils.tsextension-app-template/extension/background.jsextension-app-template/extension/contentScript.jsextension-app-template/extension/csp_rules.jsonextension-app-template/extension/index.jsextension-app-template/extension/manifest.jsonextension-app-template/logo.pngextension-app-template/package.jsonextension-app-template/scripts/build.tsextension-app-template/scripts/buildExtension.mjsextension-app-template/scripts/packageExtension.mjsextension-app-template/server.tsextension-app-template/tsconfig.jsonextension-layout-template.mdextension-scaffold-reference.mdRemote extension path: foldspace-get-started -> foldspace-create-extension -> foldspace-observe-flow-in-site -> foldspace-build-action -> foldspace-add-navigation when needed -> foldspace-verify-actions.
You are here: step 1 — create the extension.
Prerequisites: Client or extension name, target host patterns, API host patterns, and the Agent Studio SDK install snippet.
Skipped a step? Ask what is already complete and route the user to the earliest incomplete prerequisite.
If an extension is already created, skip this skill and route to foldspace-observe-flow-in-site for the first incomplete action flow.
Create the browser extension and extension-loaded action bundle for a live-site Foldspace extension-based integration.
As you scaffold, explain these to the user in plain language so they understand what the extension is and could maintain it themselves:
localhost action bundle, while production should use hosted remote actions.SDK_URL / PRODUCT_KEY / PRODUCT_ID / AGENT_API_NAME: values parsed from the SDK snippet that tie the extension to the right agent.Ask for the full Agent Studio SDK install snippet up front. Do not ask the user
to manually derive SDK_URL, PRODUCT_KEY, PRODUCT_ID, or AGENT_API_NAME
when the snippet is available.
Give the user a clickable place to get the snippet:
foldspace_overview, then list_agents to
find the target agent ID. Once you have the agent ID, give the user the exact
setup link:https://app.foldspace.ai/agent/{agentId}/setup/agent-settings
Do not hardcode or guess a specific agent ID in the skill. Only provide the exact agent setup link after MCP or the user has supplied the real agent ID.
Parse these values from the snippet:
SDK_URL.extension/csp_rules.json. If Agent Studio gives a different SDK
URL, update the CSP host to that URL's hostname only.EU-EXAMPLEPRODUCT-1-1 -> PRODUCT_KEY=EU-EXAMPLEPRODUCT-1-1 and PRODUCT_ID=EXAMPLEPRODUCT.foldspace.agent('example-agent') or
foldspace.agent({ apiName: 'example-agent' }) -> AGENT_API_NAME=example-agent.If the snippet is missing the agent initialization call, ask for the Agent API Name from Agent Studio. Never invent product IDs or agent API names.
Use extension-layout-template.md as the default output structure. Start by copying the skill-local extension-app-template/ folder into the new client-specific extension folder, then customize the copied files.
Default source template path, relative to this skill folder:
extension-app-template/
After copying the template, keep these extension runtime files identical to the template unless the shared runtime behavior needs to change:
extension/contentScript.jsextension/background.jsextension/index.jsCustomize extension/manifest.json, extension/csp_rules.json, extension/index.js, agent/constants.ts, agent/actions/, and action-specific API/UI files for the client. Match the generated template pattern:
extension/manifest.json: MV3 manifest with scoped host permissions.extension/contentScript.js: inject SDK/action bootstrap and handle CSP fallback.extension/background.js: load remote bundle in the page main world if needed.extension/index.js: Foldspace SDK bootstrap, SDK URL, product key, foldspace('when','ready'), foldspace.agent(AGENT_API_NAME).show(), optional page awareness settings, and dev/prod action environment toggle.agent/actions/index.ts: handler registry whose keys match MCP action schemas.agent/constants.ts: hosts, product IDs, storage keys, action bundle URLs.agent/utils.ts: auth extraction, navigation handler, Shared State helpers, event listeners, messaging helpers, and safe fetch helpers.scripts/: build and package helpers.matches, host_permissions, and CSP rules to sandbox/client domains.localhost
loading unless the user explicitly chooses that architecture.agent.ready, conversation.created, and action.callback during development so extension builders can debug agent behavior.extension-scaffold-reference.md for corporate allow-listing.Create the scaffold or provide exact files to create. Include:
foldspace-observe-flow-in-site.Read extension-scaffold-reference.md before scaffolding.
Recommended next-step routing: After creating the extension, recommend foldspace-observe-flow-in-site for one action candidate.
Every scaffolded extension response must include these local test steps:
npm run dev
Then:
chrome://extensions.executed and finished.After scaffolding, tell the user which files were created or should be customized. Recommend exactly one next step: usually foldspace-observe-flow-in-site for one action candidate.
End every response with:
Summary:
- Completed: <template copied, extension configured, or scaffold files produced>
- Concepts: <Foldspace terms introduced, e.g. browser extension, injected SDK, PRODUCT_ID/AGENT_API_NAME>
- Evidence: <target matches, API hosts, SDK snippet values, product ID, Agent API Name, and template path used>
- Decisions: <local/prod loading, page awareness, Shared State, events, or Task Agent choices>
- Next step: <usually foldspace-observe-flow-in-site or foldspace-build-action with exact action keys/routes>
- Blockers: <missing Agent Studio SDK snippet, host patterns, API hosts, or credentials; use "None" if clear>
npx claudepluginhub eucera/mcp-plugins --plugin foldspace-remote-pluginCreates bite-sized, testable implementation plans from specs or requirements, with file structure and task decomposition. Activates before coding multi-step tasks.