Developing browser extensions
Hi IH :)
We have found something that needed to be done and we organised a small hackathon internally to do that. Now that is done but realised how poor the dev tools and documentation for developing browser extensions are. Maybe it's what we found and our bias coming from more developed ecosystems but hey that's our feeling and wanted to reach out to the community.
So, could you share what do you use for it or what you've come across which is worth it to improve dev productivity? Also, any suggestions on workflow, docs, etc. will help.
We started from this https://github.com/EmailThis/extension-boilerplate
and used VS code to code it up.
P.D. Will launch the thing at some point because it's quite an annoying problem we found and we guess more people have it. This was something that we did for ourselves so we don't mind if the use case is of 1. (Well already got it installed in quite some people's computers but anyway).
Hi, I did start from scratch when working on browser extension. Since I did it mostly like experiment so I wanted to touch all the parts (also I used TypeScript and React for it) of it. But I found this article very helpful when building extension which should run on as many browsers as possible: https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/
As for the development, hardest part for me was to do most of the logic in the background script and use popup/content script mainly to message actions and data to it. Instead of doing the work in popup/content. Had to refactor few times because of that :-)
Hi @pustelto :) I think we came across the same problem the way of organising the code and where should it be in with what permissions was for us also a source of quite some refactoring.
Thanks for the article, very valuable.
Didn't occur to me we could have built that with react. Hmm, any articles on that :)?
@hunterx I did use this one as basic guidence: https://itnext.io/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39. Aside from that. It's just react :-). However I found out that React do not play well with shadow DOM (which I originally planned to use instead of iframe to separate it from the rest of the page) and it didn't worked (DOM event do not work). So I have to use iframe in the end. I found this package: https://www.npmjs.com/package/react-shadow-dom-retarget-events which could theoretically fix the issue, but I didn't try it.
@pustelto thanks a lot, that's a very good one.
Seems it could work, doesn't it? Pity you had to use an iframe instead. I bet it was quite a ride...
Well yeah, I might to return to it one day to refactor and try to move everything to shadow DOM. But in the end effect is the same - separation from main page.
@pustelto we always like to make programs better and tinker with cool stuff, don't we?
I found this a while back and it seems to be work https://github.com/Wildhoney/ReactShadow. Haven't extensively worked on it as the moment because I'm working on the backend first.
@hunterx I work from this https://github.com/jhen0409/react-chrome-extension-boilerplate. It's quite old so you have to update a lot of things (webpack / typescript / babel) but it's a good starting point with popup and inject code in react
Hey @trungtin. Yay, that's cool. If we go on update the extension and turn it into react will give it a go.
Do you develop a lot of browser extensions and if so, would you mind explaining a bit about your experience both with documentation and tools?
Thanks for sharing :D
Nah this is my first extension :D, for now I focus only on chrome and firefox, using this https://github.com/mozilla/webextension-polyfill and using documentation from mdn webextension, there are few api that specific to chrome (which is documented pretty well on https://developer.chrome.com/extensions/devguide) that I rarely use, but it's for extra-feature on chrome only.
@trungtin oh cool, thanks for the reply - I guess you should post it here though (for marketing purposes of course :) ) but also I'm quite intrigued as a person who uses tons of chrome extensions always on the lookout for new ones.