Cross-browser extension using React and Web Extension
Anyone here tried using Web Extension and React on an extension project? I'm currently trying to learn how to create a browser extension, then I learned that there's a difference in Firefox and Chrome extensions and Web Extension can help. Can anyone point me on the right direction or guides on how to do this properly? I know React that's why I choose to use it. Thank you!
Thanks for the shoutout @Glench!
There are definitely some unique challenges when setting up SPA frameworks, like React, in an extension, so the kit would help you to get started with a React extension in no time at all.
For the Firefox side of things, you can often port a Chrome Extension over without much effort, but that depends on the Chrome-specific APIs you're using. A lot of the common APIs have some cross-compatibility to Firefox without much hassle. This is something I'm actively looking into as an addition to the kit, either in the form of a detailed guide or even an automated tool if I can find a consistent way to do it.
That is my only concern though, compatibility of my Chrome extension to Firefox and Edge/Opera. But when you mean port, it mean's it's still one code base right? I'll just handle what platform the current extension is running from then execute the right api call. Appreciate the help rflitz!
Yeah it's typically one codebase with polyfills and other conditionals to handle the cases where cross-compatability doesn't work. I will often develop for Chrome (since it has the most market share and some other browsers are based on Chromium), and then setup the port for Firefox afterwards.
Depending on the complexity of the extension, it will sometimes only take 10 minutes to get it running on Firefox, whereas other times it will take significantly longer. I typically keep track of Chrome-specific APIs I use so I can estimate the level of cross-compatibility once it comes time to cross that bridge.
Should probably plug our very own @rfitz who made the Chrome Extension Starter Kit with a bunch of React templates. Otherwise I would just Google guides on how to do it. (I'm a Svelte developer so I wouldn't know how to make React extensions)
Sorry for the late response. This is awesome, I'll take a look on it! Thanks for helping Glench!
I just found this library on Github that does all the React bundling and compilation automatically: https://github.com/extend-chrome/rollup-plugin-chrome-extension
I followed this tutorial as I wanted React + TS → https://react.christmas/2020/12/
Recommend checking out Reddit thread as well → https://www.reddit.com/r/reactjs/comments/kbiv6i/creating_a_chrome_extension_with_react_and/?utm_source=share&utm_medium=web2x&context=3
If you're looking to make something cross-browser, your best bet is to use Mozilla's web extension polyfill (https://github.com/mozilla/webextension-polyfill, there's also a typescript package webextension-polyfill-ts). The polyfill lets you to write code against the standard browser API and also have it work in Chrome. If you're only looking to support Chrome and Firefox, you can use chrome's APIs directly, as Firefox actually also implements those to make porting easier. See https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/ for more information
As @rfitz mentioned, there may be some gaps, where Chrome has chrome-specific functionality. In particular, for our project, we've run into differences in dynamic permissions/content scripts. On GitHub, fregante maintains a lot of great packages for dealing with those differences
As far as using React, using React in an extension panel/options page is the same as using it for a normal web app.
How about when I want to support Edge and Opera also? My only option is webextension-polyfill then? Thanks for the link, didn't know extensionworkshop.com it's an excellent site, it will help me a lot for sure!
Opera and Edge are based on Chromium (the open-source project behind Chrome), so will be the same as Chrome for the most part. As you can see here https://dev.opera.com/extensions/basics/, Opera implements the chrome.* APIs: and should also work with webextension-polyfill
I'd also be interested in knowing this!
Good thing I am not alone here. haha! I hope someone will give an advice