https://github.com/mazkdevf/keyauth-chrome-extension-react
Simple example of KeyAuth Authentication for Chrome Extensions using Vite and TypeScript
https://github.com/mazkdevf/keyauth-chrome-extension-react
chrome extension react typescript vite
Last synced: 3 months ago
JSON representation
Simple example of KeyAuth Authentication for Chrome Extensions using Vite and TypeScript
- Host: GitHub
- URL: https://github.com/mazkdevf/keyauth-chrome-extension-react
- Owner: mazkdevf
- License: mit
- Created: 2024-01-28T01:08:32.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-13T02:25:07.000Z (almost 2 years ago)
- Last Synced: 2024-12-27T17:27:29.825Z (about 1 year ago)
- Topics: chrome, extension, react, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# KeyAuth-Chrome-Extension in React
- A Chrome extension tool built with Vite, TypeScript, and TailwindCSS utilizing Manifest v3.
- Demonstrates how to execute requests to the server-side (keyauth.win), focusing primarily on this functionality.
## Installation
1. Ensure that your `Node.js` version is **14** or higher.
2. Modify or configure the name of your extension in `src/manifest`.
3. Execute `npm install` to install the necessary dependencies.
## Preview
## Developing
1. run the command
```shell
$ cd KeyAuth-Chrome-Extension-React
```
1. Change Application Credentials in `package.json` > `KeyAuth`
```json
"KeyAuth": {
"AppName": "",
"OwnerId": "",
"Version": "1.0"
},
```
2. run the command
```shell
$ npm run dev
```
3. open `chrome://extensions/` in your Chrome browser
4. click 'Load unpacked', and select `KeyAuth-Chrome-Extension-React/build` folder
5. click 'Update' button when you modify the code
6. Done!
### Chrome Extension Developer Mode
1. set your Chrome browser 'Developer mode' up
2. click 'Load unpacked', and select `KeyAuth-Chrome-Extension-React/build` folder
### Normal FrontEnd Developer Mode
1. access `http://0.0.0.0:3000/`
2. when debugging popup page, open `http://0.0.0.0:3000//popup.html`
## Packing
After the development of your extension run the command
```shell
$ npm run build
```
Now, the content of `build` folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the [official guide](https://developer.chrome.com/webstore/publish) to more infos about publishing.