Build and Review a Chrome Extension in Freebuff Desktop

You have an idea for a small browser extension and no extension experience. This example has Freebuff Desktop build a Manifest V3 extension, then asks it to review its own code. The review found real bugs.

Quick answers

Can Freebuff Desktop build a Chrome extension? Yes. It wrote manifest.json and a content script, and validated the manifest with Node.

Can it find bugs in its own code? Yes. Asked to review content.js, it found and fixed problems with how text is skipped.

Does it work in Chrome? Yes. We loaded the extension in Chrome and it highlighted the word "free" on pages.

Do I need to know the extension format? No. The prompt only describes the behavior, and Freebuff chose the manifest.

Build it

Open an empty folder in Freebuff Desktop, start a new chat and send:

Build a Chrome extension (Manifest V3) in a folder called highlighter that highlights every occurrence of the word 'free' on any page in yellow. Include manifest.json and content.js. Then validate manifest.json by parsing it with node and check it has manifest_version 3, a content_scripts entry matching all URLs, and that content.js exists.

Freebuff's validation reported:

manifest.json: parsed OK
PASS  manifest_version === 3  (got 3)
PASS  content_scripts is a non-empty array  (1 entry)
PASS  a content_scripts entry matches <all_urls>
PASS  content_scripts js lists content.js

While building, it also found and fixed two bugs by testing its own script: the observer re-processed text it had already highlighted, and several matches in one text node were collapsed into one.

Verify the files:

node -e 'const m=require("./highlighter/manifest.json");console.log(m.manifest_version, JSON.stringify(m.content_scripts))'
node --check highlighter/content.js && echo "syntax ok"

node -e 'const m=require("./highlighter/manifest.json");console.log(m.manifest_version, JSON.stringify(m.content_scripts))'
node --check highlighter/content.js && echo "syntax ok"

3 [{"matches":["<all_urls>"],"js":["content.js"],"run_at":"document_idle","all_frames":true}]
syntax ok

Review it

In a new chat, send:

Review highlighter/content.js for bugs and fix any you find. Explain each fix.

Freebuff tested the script in a real browser and found two causes behind one problem: the "do not touch this text" check was wrong in two ways.

It checked only the direct parent. Text inside <pre><span>free</span></pre> or <code><span>...</span></code> was still highlighted, because the parent was a span. That is how documentation sites mark up code. The fix checks every ancestor with closest().
Tag names for SVG are lowercase. The skip list held 'SVG', but SVG elements report svg, so SVG text was highlighted and could stop rendering. The fix uses lowercase selectors.

The fixed script keeps its skip list as one selector:

const SKIP_SELECTOR = [
  'script', 'style', 'noscript', 'textarea', 'input', 'select', 'option',
  'code', 'pre', 'kbd', 'samp', 'svg', 'math', 'canvas', 'iframe',
  'video', 'audio'
].join(',');

const SKIP_SELECTOR = [
  'script', 'style', 'noscript', 'textarea', 'input', 'select', 'option',
  'code', 'pre', 'kbd', 'samp', 'svg', 'math', 'canvas', 'iframe',
  'video', 'audio'
].join(',');

Load it in Chrome

Open chrome://extensions, turn on Developer mode, choose Load unpacked and select the highlighter folder. Open any page that contains the word "free" and every match is highlighted in yellow.

Troubleshooting

The extension does nothing. Check chrome://extensions for errors and confirm content.js sits next to manifest.json.