/react-extension-sidepanel-template

Base sidepanel Chrome extension using DaisyUI and React. Can be used as a base template to build other chrome extensions.

Primary LanguageTypeScriptMIT LicenseMIT

Chrome React Sidepanel Extension template with DaisyUI

Basic Chrome sidepanel extension template

Installation

  1. Clone this repository:
git clone https://github.com/SagaOfAGuy/react-extension-sidepanel-template.git
  1. Enable Developer options in Chrome Browser by browsing to the URL chrome://extensions/ in Chrome, and ticking the "Developer mode" toggle:

image

  1. Click the "Load Unpacked" button

image

  1. Import the dist folder inside of this repository folder:

image

  1. After the chrome extension is loaded, it should show up as a chrome extension:

image

  1. Pin the extension for visibility:

image

Usage

  1. Click the pinned extension icon for this project:

image

  1. This brings up the extension itself and it should look like the following:

image

  1. We can click the tabs, and it should show different text for each tab:

image

image

image