← View All Posts

New React Starter Template - Popup + Full Page

August 10, 2020 · 1 min read

Blog post featured

This starter template provides a React (based on Create React App) Chrome extension that opens a popup when the extension icon is clicked. Also, when the "Open Full Page Portion" button is clicked within the popup, it will open the full page portion of the extension. This pattern is typically seen when you have a popup extension with a separate settings page, for example.

Popup and full page extensions work slightly different with React than with basic HTML / JS / CSS in that both the full page and the popup point to an index.html (where the React app is mounted) and the React app is then responsible for routing and rendering the respective pages based on the URL.

This template includes: React, React Router, Prettier, and Eslint.

This template is found in: react/react-popup-full-page.

More information about the starter template can be found in the README within the starter folder.

Start building Chrome Extensions in minutes

Ryan Fitzgerald

About The Author

Hey! I'm Ryan Fitzgerald and I'm a full-stack developer based out of Toronto, Canada.

I have been building, publishing, and growing a variety of Chrome Extensions both professionally and for personal projects for over 5 years.