DEV Community

Cover image for (Another) TypeScript starter for Chrome extensions
JavaScript Room
JavaScript Room

Posted on

(Another) TypeScript starter for Chrome extensions

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

GitHub logo 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 ./dist folder
  • npm run lint - ESLint for .ts and .tsx files
  • 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)