Browser Extension
Build a Manifest V3 browser extension scaffold — a popup, a content script, and the manifest — that does one concrete thing on the current page (highlight, count, extract, or toggle). Scopes the single capability and the required permissions first, designs the popup UI, then builds a valid manifest.json plus popup and content-script files wired by messaging. Extensions fail at the manifest and the popup↔content messaging boundary, so the scope phase pins the exact MV3 permissions and message contract before any code, keeping a small model from producing a manifest the browser rejects.
Steps
Entry step: scope. Each step names the specialist role it wants; the full working prompt is expandable.
- Scopeplannerentry
the one capability + MV3 permissions + message contract
Show working prompt
Scope the extension to ONE capability. (1) State exactly what it does on the current page in one sentence (e.g. 'count and highlight all links'). (2) List the minimum MV3 permissions and host_permissions needed and why — no over-permissioning. (3) Define the components: popup (trigger + display), content script (acts on the page), and the message contract between them (message names and payloads). (4) Decide what the popup shows back to the user. (5) Write an acceptance-criteria checklist of 5-8 items, e.g. 'manifest is valid MV3 (manifest_version 3)', 'the popup has a working button', 'clicking it messages the content script', 'the content script performs the action on the page', 'a result is shown in the popup', 'only the listed permissions are requested'. Write to notes/scope.md and via write_task_note. No code yet.
- Popup UI designdesigner
popup layout, button, result display
Show working prompt
Design the popup UI. (1) Pick a small fixed popup size and a clean palette (hex). (2) Lay out the action button(s) and the result/status area. (3) Specify states: idle, running, result, and error. (4) Keep styles self-contained in the popup. (5) Note any icon needs. Write the popup spec to notes/ui-design.md and via write_task_note. No code yet.
- Builddeveloper
manifest.json + popup + content script
Show working prompt
Build the extension files to the scope and UI spec. (1) Write a valid manifest.json with manifest_version 3, name, version, description, the exact permissions/host_permissions from scope, an action.default_popup, and a content_scripts entry. (2) Write popup.html + popup.js to the UI spec; the button sends the contract message to the active tab via chrome.tabs.query + chrome.tabs.sendMessage. (3) Write content.js that listens with chrome.runtime.onMessage, performs the page action, and replies with the result. (4) Render the reply in the popup, handling the error state. Bundle everything; the deliverable is index.html acting as the popup plus the supporting files. On a loop-back, fix only the named gaps. write_task_note the file paths and passing criteria.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Evaluate the extension scaffold. Read manifest.json, popup (index.html) + its JS, and the content script. Check EACH criterion from notes/scope.md and write PASS/FAIL with a reason: is manifest.json valid JSON with manifest_version 3 and an action popup and content_scripts entry, does the popup have a working button, does it message the content script via chrome.tabs.sendMessage, does the content script onMessage perform the action and reply, does the popup show the result, are only the listed permissions requested? A manifest the browser would reject (missing manifest_version 3 or malformed) is a FAIL — loop back to build. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- chrome extension
- browser extension
- build an extension
- manifest v3 extension
- firefox extension
- browser plugin
Source
View this craftbook on GitHub · MIT license