So, in absolute
Math.random() order here they are:
#1. Popup development. Working with popups is very frustrating — while inspecting the popup with the Dev Tools should keep it open, it’s not always the case. Also, you can not browse to other websites while working on it (stackoverflow anyone?).
The trick is to open the popup in its own tab by using the URL of the popup. You can find it by inspecting the popup and using the following command in the console
location.href — the URL has the form
chrome-extension://<yourextensionid>/<your_popup>.html. Then you can work with the extension and Chrome Dev Tools side by side.
#2. Hot reloading. If using React, you can use the hot reloading feature to make development rapid and continuous. I used the following boilerplate to get started, it has webpack configured for React and HMR.
#3. Analytics. Don’t forget to send the extension version with your analytics events. You can get it with
const version = chrome.runtime.getManifest().version
#4. Styling. Using a
CSS in JS solution is pretty awesome for content scripts. Content scripts are injected into webpages and a library like
glamor eliminates the needs to think about CSS injection. Just write the code and
glamor will do the rest.
#5. Auto Versioning. Each new version of the extension needs a new version number. While you can bump the extension version manually and commit to your source control, it’s much easier to let your build script do it. You can query the Chrome Web Store version of your extension with an npm module
chrome-web-store-item-property then increase the version and publish it to the store.
#6. Promise API. The
chrome object exposes a callback based API which works great, but
Promises can be easier to use. While you can wrap every function yourself,
chrome-promise already did it for you. This will also allow you to utilize
#7. Use latest browser features. Since you’re running on Chrome, you can use all the latest APIs (like
position: sticky), write considerably less code and also reduce compilation time. Debugging is also easier if there is no transiplation steps (source maps are also a solution, but it’s always better to debug the actual source code).
#8. Multiple targets. Most projects have at least 3 different targets, one for development, one for staging and one for production. I keep 3 different
manifest.json files and the build process bundles the correct one. Then all 3 extensions run side by side in perfect .
#9. Internal extension sharing. Use a shared Dropbox folder and copy the extension there so the entire company can load it from there (they will need to load it as an unpacked extension). Updates are much faster than sending it to the Chrome Web Store.
Please share your tips and tricks for Chrome Extension development in the comments.
If you liked this post, hit the ❤ button below