Cross-Browser Extension Update -- Lessons Learned

I've updated my Media Bias/Fact Check Extension to be cross-browser, and it was a chore. The new version is now available in the Chrome Web Store and to Firefox.

The source code is in this github repo. If you a creating a cross-browser extension, there were several things I found out:

• Webpack 5 is blazingly fast. It took a bit to upgrade, but worth the effort.
• If you are passing messages between tabs/content scripts and your background script, check out my messageUtil.ts script (which I enhanced from this fantastic extension Forget Me Not). IMO, this extension is the gold standard for how to develop extensions...
• Use webextension-polyfill. It's invaluable
• For settings, webext-options-sync worked like a charm
• IMO, React/Vue are too big for a lean extension. I settled on malevic and am very pleased. It felt like I got JSX w/o everything else. Perfect for context scripts and popup boxes (and configuration)
• Use web-ext lint prior to submission. My chrome extension was approved in hours after I got rid of (most) of the warnings. However, I spent days trying to get webpack to properly build w/o using Function("return this"). I finally had to write a short script to post-process and compress the build rather than doing it in webpack. I'm sure it can be done in a webpack plugin, but I was frustrated and abandoned it.
• Unbeknownst to me, using innerHTML is a security risk. I used doma to convert it into a document fragment to insert (and avoided innerHTML completely)
• Use ga-lite to avoid downloading google analytics during runtime

I started my own browser extension starter template, but haven't had time to port my latest changes. Hope to do that soon...

Photo by Guilherme Vasconcelos on Unsplash