[{"data":1,"prerenderedAt":151},["ShallowReactive",2],{"post-\u002Fblog\u002Fweb-ext":3},{"id":4,"title":5,"body":6,"date":141,"description":142,"extension":143,"meta":144,"navigation":145,"path":146,"seo":147,"sitemap":148,"stem":149,"__hash__":150},"blog\u002Fblog\u002Fweb-ext.md","Web Extensions without the Pain",{"type":7,"value":8,"toc":137},"minimark",[9,13,16,22,27,34,38,41,70,77,123,130,133],[10,11,12],"p",{},"Developing browser extensions usually involves a special kind of hell. You change a line of code, switch windows, open the extension manager, and click reload. Repeat until you die.",[10,14,15],{},"Stop doing that.",[17,18,19],"blockquote",{},[10,20,21],{},"\"Manual reloading is a waste of life.\"",[23,24,26],"h3",{"id":25},"the-solution","The Solution",[10,28,29,33],{},[30,31,32],"code",{},"web-ext"," is a command-line tool by Mozilla that automates the tedious stuff. It watches your files and reloads the extension automatically.",[23,35,37],{"id":36},"the-setup","The Setup",[10,39,40],{},"Install it as a dev dependency:",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-bash shiki shiki-themes github-light github-dark","npm install --save-dev web-ext\n","bash","",[30,49,50],{"__ignoreMap":47},[51,52,55,59,63,67],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sScJk","npm",[51,60,62],{"class":61},"sZZnC"," install",[51,64,66],{"class":65},"sj4cs"," --save-dev",[51,68,69],{"class":61}," web-ext\n",[10,71,72,73,76],{},"Add this script to your ",[30,74,75],{},"package.json",":",[42,78,82],{"className":79,"code":80,"language":81,"meta":47,"style":47},"language-json shiki shiki-themes github-light github-dark","{\n  \"scripts\": {\n    \"dev\": \"web-ext run --target=firefox-desktop --start-url about:newtab\"\n  }\n}\n","json",[30,83,84,90,99,111,117],{"__ignoreMap":47},[51,85,86],{"class":53,"line":54},[51,87,89],{"class":88},"sVt8B","{\n",[51,91,93,96],{"class":53,"line":92},2,[51,94,95],{"class":65},"  \"scripts\"",[51,97,98],{"class":88},": {\n",[51,100,102,105,108],{"class":53,"line":101},3,[51,103,104],{"class":65},"    \"dev\"",[51,106,107],{"class":88},": ",[51,109,110],{"class":61},"\"web-ext run --target=firefox-desktop --start-url about:newtab\"\n",[51,112,114],{"class":53,"line":113},4,[51,115,116],{"class":88},"  }\n",[51,118,120],{"class":53,"line":119},5,[51,121,122],{"class":88},"}\n",[10,124,125,126,129],{},"Run ",[30,127,128],{},"npm run dev",". A clean browser instance opens with your extension loaded. Save a file, see the changes instantly.",[10,131,132],{},"Now go build something useful.",[134,135,136],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":47,"searchDepth":92,"depth":92,"links":138},[139,140],{"id":25,"depth":101,"text":26},{"id":36,"depth":101,"text":37},"2025-11-29","Stop manually reloading your browser.","md",{},true,"\u002Fblog\u002Fweb-ext",{"title":5,"description":142},{"loc":146},"blog\u002Fweb-ext","4UlvFOSvPLgzWQecNlMUwvS9l8cr3UoGxvH-zAugJE0",1783186628091]