How to create a chrome extension (react vite boilerplate)

How to use the boilerplate

Step: Use a great boilerplate template

  • this react vite one has been incredible! (github)

Step: Copy the repo, change the details and you are set up!

The 6 Areas of a chrome extension

Step: Learn the different parts files in the “pages” directory

  • content: stuff you want to add to the dom
  • devtools: devtools tab
  • newtab: command+n new tab screen
  • options: right click menu has options
  • panel: the actual devtools panel
  • popup: This is clicking on the extension bar icon

content: stuff you want to add to the dom

devtools: devtools tab AND panel: the actual devtools panel

newtab: command+n new tab screen

options: right click menu has options

popup: This is clicking on the extension bar icon

The official tutorial gives you a hello world extension (developer.chrome.com), but this only gives you a “popup”.

This image has an empty alt attribute; its file name is Screenshot-2024-08-20-at-10.48.08%E2%80%AFAM.png