PodSphere - Gogole Chrome Extension for Decentralized Social in Podcast Platforms

Table of Contents

• Intro
• Features
• Installation
  • Procedures
    • Chrome
• Pages
• Screenshots
• Examples
• Documents

Intro

This Project is made for creating chrome extensions using React and Typescript.

The focus was on improving the life in web3.

Features

• React 18
• TypeScript
• Jest
• React Testing Library
• Vite
• SASS
• Prettier
• ESLint
• Husky
• Commitlint
• Conventional Commits
• Chrome Extension Manifest Version 3
• HRR(Hot Rebuild & Refresh/Reload)

Installation

Procedures:

1. Clone this repository.
2. Change name and description in package.json => Auto synchronize with manifest
3. Install pnpm globally: npm install -g pnpm (check your node version >= 16.6, recommended >= 18)
4. Run pnpm install

And next, depending on the needs:

For Chrome:

1. Run:
   • Dev: pnpm dev or npm run dev
   • Prod: pnpm build or npm run build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Find and Click - Load unpacked extension
5. Select - dist folder

Pages

New Tab

Override Chrome pages
chrome_url_overrides.newtab in manifest.json

Popup

Browser actions
action.default_pupup in manifest.json

Devtools

Devtools
devtools_page in manifest.json

Background

Background
background.service_worker in manifest.json

ContentScript

Content Script
content_scripts[0] in manifest.json

Options

Options
options_page in manifest.json

SidePanel (Chrome 144+)

SidePanel
side_panel.default_path in manifest.json

Screenshots

Examples

• https://github.com/Jonghakseo/drag-gpt-extension
• https://github.com/Jonghakseo/pr-commit-noti
• https://github.com/ariburaco/chatgpt-file-uploader-extended

Documents

• Vite Plugin
• ChromeExtension
• Rollup
• Rollup-plugin-chrome-extension