Here we would discuss how to create a basic chrome extension using React, Vite (bundler) and TailwindCss.
Things to look out for in this process
- What are extensions?
- Create react app
- Setup tailwindcss for styling
- Manifest.json
- Building the extension
What are browser extensions?
According to wikipedia, a browser extension is a small software module for customizing a web browser. Browsers typically allow a variety of extensions, including user interface modifications, cookie management, ad blocking, and the custom scripting and styling of web pages.
Create React App
We can use the conventional create react app to setup our project folder, However, we would be using Vite.js to setup our project files.
Vite is a build tool created by Evan You, the creator of Vue. It allows for faster development thanks to super fast Hot Module Reload (HMR), fast cold start times, and CSS + JSX + TypeScript support out of the box. Click here to read more
We can run either of the following commands to setup our project folder:
Using create-react-app
npx create-react-app my-app --template chrome-extension-app
Using Vite
npm create vite@latest chrome-extension-app -- --template react
After running the create vite command successfully, you should see a few commands as shown below:
Run the above commands to get your server started.
This is what your project folder should look like.
Set up Tailwind Css
Run the following commands in the root of the project folder:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
To get tailwind working we need to update the tailwind.config.js file in the root of the project folder
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
Finally, add the following at the top of src/index.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
The Manifest.json
For our extension to work,we must update the manifest.json file. Vite does not come with a manifest.json file in the template, so we can create one in the public folder.
After creating the file, add the following lines of code:
{
"name": "First Extensions",
"description": "Basic Chrome Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_title": "My first extension"
},
"icons": {
"16": "react.png",
"48": "react.png",
"128": "react.png"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
Default_popup: is the target file we want to render when our extension is loaded
Default_title: is the tooltip display that tells the user what we will see when the extensions opened
By default, Create React App will embed the runtime script into index.html during the production build. This is done to limit the number of http requests.
We will turn off this embedding behavior by adding:
INLINE_RUNTIME_CHUNK= false before the build script in our package.json.
Or as in our use case adding the line below to the manifest.json:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
Building the extension
After updating our manifest.json, we can now run the build script using:
npm run build
Once the build is finished we notice a new folder called "build" or "dist" in the root of our project. This is the folder we’ll load onto chrome as our extension.
To load our extension on chrome, you can enter the url below in the address bar:
chrome://extensions/
Click the load unpacked button at the top left corner and select the build/dist folder in the root folder of our extension.
Once you’re done you can click update to update all extensions and c'est fini.
Just like that you can see your first chrome extension.
You can now load your extension in-browser and test it out or better still tweak it to suit a specific purpose.
To better explore possibilities with creating extensions, you can check out Artem Diashkin's post below
Medium
Conclusion
At the end of this tutorial, you should be able to create a basic chrome extension with react and tailwindcss.
Click here to see the full source code.
Happy coding ✨.
Top comments (3)
Writing an article about Chrome extensions in 2023 and using Manifest v2 is just giving bad advice. Manifest v3 was announced in 2020, almost 4 years ago, and this post was published only 2 months before Google stopped allowing v2 extensions on the store. If you read this now and try to publish your extension, it will be rejected.
Get better information from somewhere else.
Thank you @nickap