Following the success of the blog post, here’s another bag of useful tips. This time for those who are developing Chrome Extensions. Javascript Hacks for Hipsters So, in absolute order here they are: Math.random() . 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?). #1. Popup development The trick is to open the by using the URL of the popup. You can find it by inspecting the popup and using the following command in the console — the URL has the form . Then you can work with the extension and Chrome Dev Tools side by side. popup in its own tab location.href chrome-extension://<your_extension_id>/<your_popup>.html . If using React, you can use the hot reloading feature to make development rapid and continuous. I used the following to get started, it has webpack configured for React and HMR. #2. Hot reloading boilerplate . Don’t forget to send the extension version with your analytics events. You can get it with #3. Analytics const version = chrome.runtime.getManifest().version . Using a solution is pretty awesome for content scripts. Content scripts are injected into webpages and a library like eliminates the needs to think about CSS injection. Just write the code and will do the rest. #4. Styling CSS in JS [glamor](https://github.com/threepointone/glamor) glamor 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 then increase the version and publish it to the store. #5. Auto Versioning. [chrome-web-store-item-property](https://www.npmjs.com/package/chrome-web-store-item-property) . The object exposes a callback based API which works great, but s can be easier to use. While you can wrap every function yourself, already did it for you. This will also allow you to utilize syntax. #6. Promise API chrome Promise [chrome-promise](https://github.com/tfoxy/chrome-promise) async/await . Since you’re running on Chrome, you can use all the latest APIs (like , , ), 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). #7. Use latest browser features fetch async/await position: sticky Most projects have at least 3 different targets, one for development, one for staging and one for production. I keep 3 different files and the build process bundles the correct one. Then all 3 extensions run side by side in perfect . #8. Multiple targets. manifest.json 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. #9. Internal extension sharing. Please share your tips and tricks for Chrome Extension development in the comments. If you liked this post, hit the ❤ button below
