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 domdevtools
: devtools tabnewtab
: command+n new tab screenoptions
: right click menu has optionspanel
: the actual devtools panelpopup
: 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”.
