Just like any good application you might want to have multiple different pages in your chrome extensions. Perhaps you want to show them the first see the login page then afterwards the dashboard.
In this article we will look at how you can show different UI pages in your chrome extensions, for regular html/JavaScript and React JS chrome extensions.
Sample Project Setup
If you have no clue on how to make a chrome extension you can read your article about it here. How Build Chrome Extension for Dummies with HTML, CSS and JavaScript
In this sample project the extensions will go to different html pages and even set some of those pages as the default page.
Files
mainfest.json
{
"name": "Multiple Pages",
"manifest_version": 3,
"version": "1.0.0.0",
"action": {
"default_popup": "popup.html"
}
}
page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
margin: 0 auth;
padding: 10px;
justify-content: center;
background: gold;
}
</style>
</head>
<body>
<h1>Page 1</h1>
</body>
</html>
page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
margin: 0 auth;
padding: 10px;
justify-content: center;
background: purple;
color: white
}
</style>
</head>
<body>
<h1>Page 2</h1>
</body>
</html>
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
margin: 0 auth;
padding: 10px;
justify-content: center;
}
</style>
</head>
<body>
<h1>Main Page</h1>
<a href="./page1.html">Go to Page 1</a>
<button id="go-to-page2">Go To Page 2</button>
<br/><br/>
<button id="page1">Set Page 1 as Default</button>
<button id="page2">Set Page 2 as Default</button>
<script type="text/javascript" src="./popup.js"></script>
</body>
</html>
popup.js
document.getElementById('go-to-page2').onclick = (e) => {
window.location.href = "./page2.html";
// or you can use
// window.location.href = chrome.runtime.getURL("page2.html");
}
document.getElementById('page1').onclick = (e) => {
const url = chrome.runtime.getURL("page1.html");
chrome.action.setPopup({
popup: url
})
}
document.getElementById('page2').onclick = (e) => {
const url = chrome.runtime.getURL("page2.html");
chrome.action.setPopup({
popup: url
})
}
Setup for React JS
For React JS applications whatever page routing system you are using for your regular web applications should work. Usually react-router-dom is the page router library of choice. MemoryRouterfor this library seems to be the most consistent for chrome extensions development
import React from "react"
import { MemoryRouter as Router, Routes, Route } from "react-router-dom";
import PageHome from "./pages/PageHome";
import PageLogin from "./pages/PageLogin";
function App() {
return (
<div className="main">
<Router>
<Routes>
<Route index path="/" element={<PageLogin />} />
<Route path="/dashboard" element={<PageHome />} />
</Routes>
</Router>
</div>
);
}
export default App;
Leave a Reply