/KeyAuth-Chrome-Extension-React

Simple example of KeyAuth Authentication for Chrome Extensions using Vite and TypeScript

Primary LanguageTypeScriptMIT LicenseMIT

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

img img img img img

Developing

  1. run the command
$ cd KeyAuth-Chrome-Extension-React
  1. Change Application Credentials in package.json > KeyAuth
  "KeyAuth": {
    "AppName": "",
    "OwnerId": "",
    "Version": "1.0"
  },
  1. run the command
$ npm run dev
  1. open chrome://extensions/ in your Chrome browser
  2. click 'Load unpacked', and select KeyAuth-Chrome-Extension-React/build folder
  3. click 'Update' button when you modify the code
  4. 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

$ 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 to more infos about publishing.