https://github.com/santoshshinde2012/extension

A simple Chrome extension built with React.js to search bookmarks
https://github.com/santoshshinde2012/extension

extension indexdb reactjs tailwindcss typescript vite

Last synced: about 2 months ago
JSON representation

A simple Chrome extension built with React.js to search bookmarks

• Host: GitHub
• URL: https://github.com/santoshshinde2012/extension
• Owner: santoshshinde2012
• Created: 2024-02-19T18:06:01.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-06-06T14:25:23.000Z (7 months ago)
• Last Synced: 2024-10-11T20:19:00.945Z (3 months ago)
• Topics: extension, indexdb, reactjs, tailwindcss, typescript, vite
• Language: TypeScript
• Homepage: https://medium.com/javascript-in-plain-english/getting-started-with-chrome-extensions-using-vite-typescript-react-tailwind-css-and-indexdb-cae7aff39dca
• Size: 604 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [Chrome Extension - React + TypeScript + Vite](https://medium.com/javascript-in-plain-english/getting-started-with-chrome-extensions-using-vite-typescript-react-tailwind-css-and-indexdb-cae7aff39dca)

This repository contains the basic setup for the Chrome extension to read bookmarks, store them in the index database, and search for them by keyword.

## Technology Stack

- Vite

- Typescript

- React JS

- Chrome Extension Components

- Indexdb

- tailwind

### Start the application

- Clone the Application `git clone https://github.com/santoshshinde2012/extension.git`

- Install the dependencies `npm install`

- Test the application in the browser `npm run dev`, but you can't test the Chrome Runtime API.

- Build the extension `npm run build`

### Test the chrome extension

- Build:  Create a build by using the build command.

- Open Chrome Extensions Page: Type chrome://extensions/ in the address bar and hit Enter.

- Enable Developer Mode: Toggle Developer mode switch to on.

- Load the Extension: Click "Load unpacked" and select the extension directory.

- Confirm Loading: Extension appears in the Extensions page.

- Test: Verify the extension functions properly.

### Chrome Extension Components:

- HTML/CSS/JS Development: This is where you develop the actual content and functionality of the extension using HTML, CSS, and JavaScript.

- Manifest: The manifest file (manifest.json) describes the extension, its permissions, and other crucial details required by Chrome.

- Background Script: This script runs in the background and handles events and interactions.

- Popup Page: The UI that appears when the extension icon is clicked. It typically provides quick access to the extension's features.

- External APIs: Many extensions interact with external APIs for data retrieval, authentication, or other services.

- User Interaction/UI: This represents the user interface of the extension as displayed in the browser, including any interaction points or UI elements.

![Snapshot](wiki/assets/usecase.png)



### Connect with me on