react-typescript-web-extension-starter

To load the extension in Chromium-based browsers:

1. Open chrome://extensions (Chrome) or brave://extensions (Brave).
2. Enable Developer Mode in the upper-right corner.
3. Click Load unpacked.
4. Select the dist directory in this repository.

To set up the project and begin development, install the dependencies using yarn and then run the development server in watch mode.

yarn install
yarn dev

To load the extension in Firefox:

1. Open about:debugging in a new tab.
2. Click the This Firefox link in the sidebar.
3. Click the Load Temporary Add-on... button.
4. Select the manifest.json file located inside the dist directory.

To load the extension in Microsoft Edge:

1. Open edge://extensions in a new tab.
2. Enable Developer Mode in the lower-left corner.
3. Click Load unpacked.
4. Select the dist directory in this repository.

Use the following yarn commands to manage your development workflow:

• yarn dev: Runs webpack in watch mode for real-time development.
• yarn storybook: Starts the Storybook server for component isolation.
• yarn build: Generates a production-ready unpacked extension in the dist directory.
• yarn test -u: Runs Jest tests and updates snapshots.
• yarn lint: Runs ESLint to check for code quality issues.
• yarn prettify: Runs Prettier to format your code.

The Hello component is exported from the src/components/hello entrypoint. You can import it to render a basic component within your extension's UI.

import { Hello } from './components/hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

The Scroller component is exported from the src/components/scroller entrypoint. It is intended to be used as a UI component within the extension's React application.

import { Scroller } from './components/scroller';

function MyComponent() {
  return (
    <Scroller>
      {/* Children content */}
    </Scroller>
  );
}

The popup entrypoint initializes the React application by rendering the Popup component into the DOM element with the ID popup. It uses webextension-polyfill to query the active tab in the current window before mounting, ensuring the extension context is ready.

// The entrypoint renders the Popup component into the 'popup' element
ReactDOM.render(<Popup />, document.getElementById("popup"));

The Scroller component renders a UI containing two buttons: one for scrolling to the top of the page and one for scrolling to the bottom. It requires two callback functions via props to handle the scroll logic, as the component does not manage the scroll state itself.

import { Scroller } from './components/scroller/component';

function MyComponent() {
  const handleScrollTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleScrollBottom = () => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
  };

  return (
    <Scroller 
      onClickScrollTop={handleScrollTop} 
      onClickScrollBottom={handleScrollBottom} 
    />
  );
}