Skip to main content

3 posts tagged with "boilerplate"

View All Tags

· One min read
j5s

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.

· One min read
j5s

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:

src/common/msg/usePersistedState.ts
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>
)
}

· 2 min read
j5s

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: new tab

info

New to me!

Dev Tools Panel

dev-tools

popup

Settings Page / options

settings

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. error

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.