Skip to content

Commit 6251ffb

Browse files
yosevuyosevu
committed
feat: build Chrome Extension with Popup and Content Script
Use https://crxjs.dev/vite-plugin/ to simplify build Resolves #1
1 parent 2717820 commit 6251ffb

23 files changed

+1549
-1275
lines changed

‎.gitignore‎

Lines changed: 20 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,24 @@
1-
# See https://help.github.com/ignore-files/ for more about ignoring files.
2-
3-
# dependencies
4-
/node_modules
5-
6-
# testing
7-
/coverage
8-
9-
# production
10-
/build
11-
12-
# misc
13-
.DS_Store
14-
.env.local
15-
.env.development.local
16-
.env.test.local
17-
.env.production.local
18-
1+
# Logs
2+
logs
3+
*.log
194
npm-debug.log*
205
yarn-debug.log*
216
yarn-error.log*
22-
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
23-
24-
# dependencies
25-
/node_modules
26-
/.pnp
27-
.pnp.js
28-
29-
# testing
30-
/coverage
31-
32-
# production
33-
/build
34-
35-
# misc
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
3619
.DS_Store
37-
.env.local
38-
.env.development.local
39-
.env.test.local
40-
.env.production.local
41-
42-
npm-debug.log*
43-
yarn-debug.log*
44-
yarn-error.log*
45-
46-
.log
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
How to inject [React](https://reactjs.org/) app into a Chrome Extension [Content Script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/).
66

77
1. `git clone git@github.com:yosevu/react-content-script.git`
8-
1. `npm run build`
8+
1. `yarn build`
99
1. Navigate to [chrome://extensions/](chrome://extensions/)
1010
1. Click the "Developer mode" toggle switch in the top right of the window
1111
1. Click the "Load unpacked" button in top left of the window
12-
1. Go to the react-content-script directory and select the "build" directory to load the extension
13-
1. Navigate to https://blank.org/ to see the React app
12+
1. Go to the react-content-script directory and select the "dist" directory to load the extension
13+
1. Navigate to https://blank.org/ to see the Content Script React app
14+
1. Click on the "React Content Script" extensions to see the Popup React app

‎content-script/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="manifest" href="/manifest.json" />
8+
<title>Chrome Extension Content Script</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<script type="module" src="./src/main.tsx"></script>
13+
</body>
14+
</html>

‎content-script/src/App.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
height: 40vmin;
7+
pointer-events: none;
8+
}
9+
10+
@media (prefers-reduced-motion: no-preference) {
11+
.App-logo {
12+
animation: App-logo-spin infinite 20s linear;
13+
}
14+
}
15+
16+
.App-header {
17+
background-color: #282c34;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: calc(10px + 2vmin);
24+
color: white;
25+
}
26+
27+
.App-link {
28+
color: #61dafb;
29+
}
30+
31+
@keyframes App-logo-spin {
32+
from {
33+
transform: rotate(0deg);
34+
}
35+
to {
36+
transform: rotate(360deg);
37+
}
38+
}

‎content-script/src/App.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/// <reference types="chrome" />
2+
/// <reference types="vite-plugin-svgr/client" />
3+
4+
import logo from './logo.svg'
5+
import './App.css'
6+
7+
function getLogo() {
8+
if (window.chrome) {
9+
return window.chrome.runtime.getURL(logo.toString())
10+
}
11+
12+
return logo
13+
}
14+
15+
function App() {
16+
return (
17+
<div className="App">
18+
<header className="App-header">
19+
<img src={`${logo}`} className="App-logo" alt="logo" />
20+
<p>Hello, World!</p>
21+
<p>I'm a Chrome Extension Content Script!</p>
22+
</header>
23+
</div>
24+
)
25+
}
26+
27+
export default App
28+
29+

‎content-script/src/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

src/index.css renamed to content-script/src/main.css

File renamed without changes.

src/index.tsx renamed to content-script/src/main.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
22
import { createRoot } from 'react-dom/client';
3-
import './index.css'
3+
import './main.css'
44
import App from './App'
55

66
const body = document.querySelector('body')
77

88
const app = document.createElement('div')
99

10-
app.id = 'react-root'
10+
app.id = 'root'
1111

1212
// Make sure the element that you want to mount the app to has loaded. You can
1313
// also use `append` or insert the app using another method:
@@ -19,7 +19,11 @@ if (body) {
1919
body.prepend(app)
2020
}
2121

22-
const container = document.getElementById('react-root');
22+
const container = document.getElementById('root');
2323
const root = createRoot(container!);
2424

25-
root.render(<App />)
25+
root.render(
26+
<React.StrictMode>
27+
<App />
28+
</React.StrictMode>
29+
)

‎content-script/src/reportWebVitals.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ReportHandler } from 'web-vitals'
2+
3+
const reportWebVitals = (onPerfEntry: ReportHandler) => {
4+
if (onPerfEntry && onPerfEntry instanceof Function) {
5+
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6+
getCLS(onPerfEntry)
7+
getFID(onPerfEntry)
8+
getFCP(onPerfEntry)
9+
getLCP(onPerfEntry)
10+
getTTFB(onPerfEntry)
11+
})
12+
}
13+
}
14+
15+
export default reportWebVitals

‎index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<link rel="manifest" href="/manifest.json" />
8-
<title>Event Counter Sidebar</title>
8+
<title>Chrome Extension Popup</title>
99
</head>
1010
<body>
11+
<div id="root"></div>
1112
<noscript>You need to enable JavaScript to run this app.</noscript>
12-
<script type="module" src="/src/index.tsx"></script>
13+
<script type="module" src="./src/main.tsx"></script>
1314
</body>
1415
</html>

0 commit comments

Comments
 (0)