https://github.com/ocdbytes/web-extension-build-pack
https://github.com/ocdbytes/web-extension-build-pack
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/ocdbytes/web-extension-build-pack
- Owner: ocdbytes
- Created: 2023-01-05T12:59:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-05T13:00:29.000Z (about 3 years ago)
- Last Synced: 2024-07-05T22:07:18.602Z (over 1 year ago)
- Language: JavaScript
- Size: 88.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# How to make a chrome extension ?
* Folder Structure
```sh
yarn init -y
mkdir public
mkdir src
```
* Creating manifest.json
Link :
```json
{
"manifest_version": 3,
"name": "chrome-Extension",
"description": "This is a chrome extension",
"version": "1.0",
"action": {
"default_popup": "popup.html"
}
}
```
```sh
touch public/manifest.json
touch src/popup.html
```
* Install ReactJS
```sh
yarn add react react-dom
```
Configure React
```jsx
import React from "react";
import { render } from "react-dom";
function PopUp() {
return
Hello World;
}
render(, document.getElementById("react-target"));
```
* Install Webpack
```sh
yarn add webpack webpack-cli --dev
```
* In root folder make webpack.config.js
```sh
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react
```
Add configs
```sh
yarn add html-webpack-plugin --dev
yarn add copy-webpack-plugin --dev
```
* configuring the modes of extension
```sh
yarn add webpack-merge --dev
touch webpack.dev.js
touch webpack.prod.js
```
Now add new scripts for dev and build