Simple Bookmark Extension

It is a really simple bookmark chrome extension app to figure out how to develop chrome extensions. Chrome Extensions are made of three parts - background script, content script, and options page. My work is mostly focused on background script and content script.

Stack

• React
• TailwindCSS
• Lerna
• Typescript
• Parcel

Structure

Background script

I took an object-oriented approach to handle the background script. When it receives CRUD requests on bookmarks or iframe events, it processes those events.

Content script

I used an iframe element to inject my script into any web page. It uses React, Tailwind.

Common

I added shared constants and interfaces in this package.

My blog posts

These are blog posts I wrote while working on this project.

1. Using Lerna to manage my project in a Mono Repo way
2. Using iframe with React Portal to isolate my component
3. Using iframe as a root of my React App with createPortal and functional components
4. How to retrieve favicon of websites(easiest way)
5. Using React Context to remove prop drilling
6. How I used Tailwind CSS transition

How to run

git clone https://github.com/hayoung0Lee/my-bookmark.git
npm install -g lerna
yarn boostrap
yarn start # start in dev mode

# go to chrome://extension
# Load unpacked