Hi, everyone! I've recently built the small Chrome extension for LinkedIn (it's open-sourced and available on GitHub). When I just decided to make it, I took a look at available starters. I found some but they didn't fit my needs, so I configured the project from scratch. And after that, I thought that it might be useful to make a standalone starter, so I (or you) can quickly bootstrap a new Chrome extension next time. I even recorded the video with a quick overview for people who are completely new to the stack.
Here is the starter itself
room-js
/
chrome-extension-ts-starter
Chrome Extension starter built with TypeScript
chrome-extension-ts-starter
It is a boilerplate for a Chrome Extension built with TypeScript and Parcel.
This starter consists of the following parts
- Background script (vanilla TS)
- Content script (vanilla TS)
- Options page (Vue.js, Sass)
- Popup page (Vue.js, Sass)
- DevTools panel page (React.js, Styled Components)
And, of course, the ./manifest.json file describing its configuration.
Environment
- Node.js >=12.0.0
- NPM >= 6.0.0
Most probably it will work with earlier versions too but I didn't test it.
Testing
Jest is included and ready for the vanilla TS parts. Testing for React/Vue is not included in order to keep the Jest config clean.
Scripts
-
npm run dist- build the extension into./distfolder -
npm run lint- ESLint for.tsand.tsxfiles -
npm run test- Jest unit tests
Also, I wanted to share with you some nice stuff that I've found just yesterday. These guys at Bumble are doing a great job around Chrome extensions. Take a look at the packages they have published. You might also find them useful for building extensions.
Thanks for reading/viewing! Feel free to star the repo and follow JavaScript Room blog on Instagram.
Have a great time and stay safe!
Top comments (0)