Chrome Extension Customizations

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>
  )
}