3 posts tagged with "boilerplate"

Chrome Extension Update​

In my previous post I added a few customizations to a great boilerplate library for creating a chrome extension with React. However, after running into webpack errors (such as this one) with websockets and HMR I've decided to leverage a new boilerplate - chrome-extension-boilerplate-react-vite. Its got all the features of the previous one except runs on Vite for local development.

I've created a template for myself for future extensions with the additional usePersistedState hook as previously described.

Customizations​

I've extended this extension boilerplate with a couple new features in my fork:

• Jest unit tests
• Tailwind
• Persistent state utility
• Message passing utility

You can see all my changes here. Persistent state and message passing between the background script and other pages was important for me to setup as it can get complex. To do this I created custom hook usePersistedState

usePersistedState()​

Example use:

import React from 'react'
import { usePersistedState } from '../../common/msg/usePersistedState';
export function Counter() {

  const { value, actions } = usePersistedState<number>('counter', 0);

  return (
    <div className="flex justify-center">
      <div className="flex items-center">
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          aria-label="Increment value"
          onClick={() => {
            actions.setState(value + 1);
          }}
        >
          Increment
        </button>
        <span className="px-4">{value}</span>
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          aria-label="Decrement value"
          onClick={() => {
            actions.setState(value - 1);
          }}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Chrome Extension Setup​

After about 30 minutes or so of research I've decided to go with lxieyang/chrome-extension-boilerplate-react. It doesn't have everything I want, but it also doesn't have a lot of things I don't want.

Features​

New page​

When opening a new tab you can set the webpage for the user:

Dev Tools Panel​

Popup​

Settings Page / options​

Content​

There is a content module to run JS on the page the user is on.

background​

There is a background page for background tasks for managing events.

Bugs / Gotchas​

The webpack dev server will cause lots of issues on other sites. I had to disable the extension when trying to do other things such as asking ChatGPT questions or Googling.

I did find a solution for this one specific issue but didnt spend time figuring out how to fix google search from infinitely reloading the browser when the dev server is running.

A good workaround is to create a new profile in chrome and develop the extension in that sandbox and do everything else in your default profile.

Whats missing​

• unit tests
• e2e tests
• much is written in js, not typescript
• tailwind

Conclusion​

All in all seems like a good minimal solution to an extension setup. Downside (or upside depending on your perspective) is it doesn't make many decisions around UI styling, message passing or state management. I'm going to need to add a few libraries as I go to customize this to my liking.