Chrome Extension
Boilerplate for the React Chrome Extension
Last updated
Was this helpful?
Boilerplate for the React Chrome Extension
Last updated
Was this helpful?
Start by cloning the repository.
This repository contains both the Startup package, and the Next.js web app with all the components, pages, integrations, and the extension.
All the code for the extension is in the /extension folder of the repository.
Move to the extension folder, install the dependencies, and run it.
When built, the Chrome Extension files are available into the folder /extension/dist.
To configure the Chrome Extension you need to:
set the production domain in extension/src/config.ts (this is the URL of your production website, i.e. yourwebsite.com)
fill the other variables in extension/src/config.ts
update the file extension/src/manifest.json with all the information needed, especially:
externally_connectable
host_permissions
To load the extension you need to follow these steps:
Open Chrome
Click on the three dots menu > Extensions > Manage Extensions
Enable the Developer mode
Click on Load unpacked
Select the shipped /extension/dist folder on your computer
The extension is now installed, and the welcome page should be open
The welcome page is available at src/app/extension/welcome/page.tsx
To use it, you need to execute npm run dev in the root folder of the repository.
The page is available at http://localhost:3000/extension/welcome.
To make the authentication work inside the extension, you need to use a publicly available domain.
We will use ngrok for this purpose.
Take the URL returned by ngrok and update the file extension/src/config.ts.
Update the environment variable in .env to your ngrok URL if you're using NextAuth (otherwise, skip it).
Now, if you have the watcher active (npm run watch:dist) the chrome extension should be automatically built, otherwise, execute npm run dist in the extension folder.
The welcome page should open! (bear in mind that using ngrok adds a small delay in the way the local Next.js web server is served).
Storybook is an excellent tool to build React component in isolation.
Considering that the build and reload of a Chrome extension takes time (build time + go to the extension tab and click reload), I thought of using Storybook when you just need to develop the UI components of your extension (much faster).
Execute storybook
This command will run Storybook and open http://localhost:6006
The project includes the UI Library ChakraUI, so you can see the Stories for its components.
But the first stories on the left are yours. Feel free to customize and update the React components, and you'll see them updated in Storybook in a matter of seconds!
The Storybook stories files include the suffix .stories.tsx in the filename (i.e. Brand.stories.tsx) and I like to put them close to the component file.
You can test your production extension locally with these steps: Load the extension into Chrome
set the dev domain in extension/src/config.ts (use the ngrok URL domain, see )
Uninstall your Chrome extension from and Load unpacked again.
Do avoid having a different ngrok domain every time your run ngrok, follow to get a static fixed domain.
Set domainProd in extension/src/config.ts with the domain of your website.
Build the extension with npm run dist
Go to the and create your extension, then upload the zip generated in extension/zip to release a new version.
