https://github.com/xoxoharsh/chrome_extension_template
This is a chrome extension template, which has vite installed react, background and content-script bundled through webpack.
https://github.com/xoxoharsh/chrome_extension_template
Last synced: 3 months ago
JSON representation
This is a chrome extension template, which has vite installed react, background and content-script bundled through webpack.
- Host: GitHub
- URL: https://github.com/xoxoharsh/chrome_extension_template
- Owner: XoXoHarsh
- Created: 2024-07-06T07:05:52.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-06T08:33:36.000Z (11 months ago)
- Last Synced: 2025-02-24T03:42:56.444Z (3 months ago)
- Language: JavaScript
- Size: 70.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CHROME EXTENSION TEMPLATE
CHROME_EXTENSION_TEMPLATE is a setup for creating Chrome extensions using React and Vite for rapid development and webpack for bundling background and content scripts. This template provides a streamlined development process and an organized project structure.
## Project Structure
- React with Vite: Used for building the extension's UI components.
- Webpack: Used for bundling background.js (service worker) and content-script.js (runs on all web pages).
- scripts:
- background.js: Acts as a service worker.
- content-script.js: Executes on all specified web pages.
## Getting Started
### Prerequisites
- Node.js
- npm
- Chrome extension development
### Installation
1. Clone the repository:
```bash
git clone https://github.com/harshsharma20503/CHROME_EXTENSION_TEMPLATE.git
cd CHROME_EXTENSION_TEMPLATE
```
2. Install dependencies:
```bash
npm install
```
### Building the Project
To build the project, run the following command:
```bash
npm run build-all
```
This command will:
1. Build the React components using Vite.
2. Bundle the background.js and content-script.js using webpack.
## Project Configuration
### manifest.json
The `manifest.json` file configures the Chrome extension, specifying permissions, background scripts, content scripts, and more. Key sections include:
1. Background Service Worker: background.js
2. Content Scripts: content-script.js
3. Web Accessible Resources: Specifies which resources are accessible from web pages.
```json
{
"manifest_version": 3,
"name": "Vite Chrome Extension",
"version": "1.0.0",
"description": "A Chrome extension built using Vite",
"action": {
"default_popup": "index.html"
},
"permissions": ["storage", "activeTab", "scripting"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [""],
"js": ["content-script.js"]
}
],
"web_accessible_resources": [
{
"resources": ["index.html", "assets/*"],
"matches": [""]
}
]
}
```
### webpack.config.cjs
This file configures the webpack.
1. Entry Points: Bundles background.js and content-script.js from the scripts directory.
2. Output: Compiles the bundled files into the dist directory.
3. Plugins: Uses CopyWebpackPlugin to copy manifest.json into the dist directory.
```javascript
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
mode: "production",
entry: {
background: "./scripts/background.js",
"content-script": "./scripts/content-script.js",
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
resolve: {
fallback: {
path: require.resolve("path-browserify"),
},
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: "script/manifest.json", to: path.resolve(__dirname, "dist") },
// Add more patterns if you need to copy other files or directories
],
}),
],
};
```
## Loading the Extension in Chrome
1. Open Chrome and navigate to chrome://extensions/.
2. Enable "Developer mode" in the top right corner.
3. Click "Load unpacked" and select the dist folder of your project.
## Contributing
We welcome contributions to improve this project! Fork the repository, create a branch, make your changes, and open a pull request. For any issues or suggestions, please open an issue on GitHub.