Chrome Extension Dev-Hacks for Hipsters

Following the success of the Javascript Hacks for Hipsters blog post, here’s another bag of useful tips. This time for those who are developing Chrome Extensions.

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://<your_extension_id>/<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](https://github.com/threepointone/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](https://www.npmjs.com/package/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](https://github.com/tfoxy/chrome-promise) already did it for you. This will also allow you to utilize async/await syntax.

#7. Use latest browser features. Since you’re running on Chrome, you can use all the latest APIs (like fetch, async/await, 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