Build a Bookmarks app with React | Chrome extension with React part 6/6

In this video we'll build a bookmarks app using 3 React Hooks (useState, useEffect and useRef) along with React memo to improve our app performance. We'll also see how to save bookmarks to localStorage.

In this series we're going to see how to create a Chrome new tab extension with React.

This project features 6 widgets (Time and date component, Greeting component, Weather app, Crypto rates app, Todos app and a Bookmarker app).

We'll cover a bunch of modern JavaScript concepts by consuming 3 free external APIs and saving data to the browser's localStorage.

The extension is available on the Chrome Web Store:

Publish a Chrome extension:

Source code:

Timestamps:
00:00 - Intro
00:40 - Initial markup
05:26 - Extract favicon
07:31 - Add bookmark
12:41 - Render bookmarks
14:22 - Clear inputs
15:50 - Delete bookmark
18:18 - Splitting component
19:59 - The form component
25:32 - Bookmarks list component
27:20 - Bookmark component
29:29 - Props drilling
30:35 - Adding css
33:31 - Open form
37:18 - Close form
40:57 - Delete icon
42:23 - Input focus with useRef
43:55 - Save bookmarks to local storage
46:49 - React memo
48:25 - Combine all apps with css Grid
50:46 - Publish a Chrome extension

[scriptydude]

Hi there, thanks for tuning in! I've added a simple guide on how to publish the extension (with the manifest file) in the repository's page. Check it out:

[NIRANJANKUMAR-vvle]

Bro, Your video is awesome, but How to use content scripts and background page using react in chrome extension?, Content scripts and background are major things in chrome extension, without them the chrome extension is incomplete