Skip to content

Commit ac3f214

Browse files
Junyi-99Junyi-99
committed
chore: popup window
1 parent 113447b commit ac3f214

15 files changed

Lines changed: 264 additions & 140 deletions

File tree

‎webapp/_webapp/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
"scripts": {
77
"dev": "nodemon --watch src --ext ts,js,tsx,jsx,json --exec 'npm run build'",
88
"dev:chat": "vite dev --config vite.config.dev.ts",
9-
"build": "tsc -b && npm run _build:default && npm run _build:background && npm run _build:intermediate && npm run _build:settings",
9+
"build": "tsc -b && npm run _build:default && npm run _build:background && npm run _build:intermediate && npm run _build:settings && npm run _build:popup",
1010
"_build": "vite build",
1111
"_build:default": "VITE_CONFIG=default npm run _build",
1212
"_build:background": "VITE_CONFIG=background npm run _build",
1313
"_build:intermediate": "VITE_CONFIG=intermediate npm run _build",
1414
"_build:settings": "VITE_CONFIG=settings npm run _build",
15+
"_build:popup": "VITE_CONFIG=popup npm run _build",
1516
"lint": "eslint .",
1617
"format": "prettier --write .",
1718
"build:local:chrome": "bash -c 'source ./scripts/build-local-chrome.sh'",

‎webapp/_webapp/public/images/locator.png‎

235 KB
Loading

‎webapp/_webapp/public/popup.html‎

Lines changed: 5 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,12 @@
11
<!doctype html>
22
<html lang="en">
3-
43
<head>
54
<meta charset="UTF-8" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>PaperDebugger</title>
8-
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@600&display=swap" rel="stylesheet" />
9-
<style>
10-
html,
11-
body {
12-
height: 100%;
13-
margin: 0;
14-
padding: 0;
15-
}
16-
17-
body {
18-
padding: 1rem;
19-
padding-left: 1.5rem;
20-
min-width: 280px;
21-
max-width: 340px;
22-
min-height: 220px;
23-
background: #fafafa;
24-
color: #222;
25-
font-family:
26-
"Exo 2",
27-
-apple-system,
28-
BlinkMacSystemFont,
29-
"Segoe UI",
30-
Roboto,
31-
"Helvetica Neue",
32-
Arial,
33-
sans-serif;
34-
border: 1px solid #ececec;
35-
box-sizing: border-box;
36-
display: flex;
37-
flex-direction: column;
38-
justify-content: space-between;
39-
height: 100%;
40-
}
41-
42-
.title {
43-
font-size: 1.5rem;
44-
font-weight: 600;
45-
letter-spacing: 0.02em;
46-
text-align: left;
47-
font-family: "Exo 2", sans-serif;
48-
}
49-
50-
.subtitle {
51-
font-size: 1rem;
52-
font-weight: 600;
53-
letter-spacing: 0.02em;
54-
text-align: left;
55-
font-family: "Exo 2", sans-serif;
56-
}
57-
58-
.steps {
59-
margin: 0.5rem 0 0 0;
60-
padding: 0 0rem;
61-
flex: 1;
62-
}
63-
64-
.step {
65-
font-size: 0.9rem;
66-
font-weight: 400;
67-
margin-bottom: 0.7rem;
68-
line-height: 1.5;
69-
border-left: 3px solid #e0e0e0;
70-
padding-left: 0.7em;
71-
background: none;
72-
border-radius: 0;
73-
}
74-
75-
.step strong {
76-
color: #3b82f6;
77-
font-weight: 600;
78-
margin-right: 0.3em;
79-
}
80-
81-
.footer {
82-
font-size: 0.75rem;
83-
text-align: right;
84-
font-weight: 100;
85-
color: #888;
86-
padding: 0.7rem 1.2rem 1.1rem 0;
87-
border-top: 1px solid #ececec;
88-
background: none;
89-
border-radius: 0;
90-
letter-spacing: 0.01em;
91-
}
92-
93-
.highlight {
94-
color: #3b82f6;
95-
font-weight: 600;
96-
}
97-
98-
.noselect {
99-
-webkit-user-select: none;
100-
-moz-user-select: none;
101-
-ms-user-select: none;
102-
user-select: none;
103-
}
104-
105-
.nodrag {
106-
-webkit-user-drag: none;
107-
-webkit-user-select: none;
108-
-webkit-user-select: none;
109-
}
110-
</style>
6+
<title>PaperDebugger Popup</title>
1117
</head>
112-
<body oncontextmenu="return false" class="nodrag">
113-
<div oncontextmenu="return false" class="title noselect">PaperDebugger</div>
114-
<div class="subtitle noselect">How to use</div>
115-
<div class="steps noselect">
116-
<div class="step">
117-
<strong>1.</strong>In
118-
<a class="highlight nodrag" href="https://overleaf.com/project" target="_blank">overleaf.com</a>, open any of
119-
your projects.
120-
</div>
121-
<div class="step"><strong>2.</strong>PaperDebugger is in the <b>top left</b> of the project page.</div>
122-
</div>
123-
<div class="footer noselect">Happy writing!</div>
124-
125-
<button id="myButton">Request Permissions</button>
126-
127-
<script src="popup.js"></script>
128-
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="popup.js"></script>
12911
</body>
130-
</html>
12+
</html>

‎webapp/_webapp/src/manifest.json‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,34 @@
1010
"128": "images/logo-1024.png",
1111
"48": "images/logo-1024.png"
1212
},
13-
"host_permissions": ["*://*.overleaf.com/"],
14-
"optional_host_permissions": ["*://*/*"],
15-
"permissions": ["cookies", "storage", "scripting", "activeTab"],
13+
"host_permissions": [
14+
"*://*.overleaf.com/"
15+
],
16+
"optional_host_permissions": [
17+
"*://*/*"
18+
],
19+
"permissions": [
20+
"cookies",
21+
"storage",
22+
"scripting",
23+
"activeTab"
24+
],
1625
"options_page": "settings.html",
26+
"action": {
27+
"default_popup": "popup.html"
28+
},
1729
"background": {
1830
"service_worker": "background.js"
1931
},
2032
"web_accessible_resources": [
2133
{
22-
"resources": ["images/*"],
23-
"matches": ["*://*/*"]
34+
"resources": [
35+
"images/*"
36+
],
37+
"matches": [
38+
"*://*/*"
39+
]
2440
}
2541
],
2642
"key": "[AUTO-GENERATED]"
27-
}
43+
}

‎webapp/_webapp/src/views/extension-popup/app.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.popup-shell {
2+
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
3+
sans-serif;
4+
color: #212529;
5+
background-color: #ffffff;
6+
padding: 14px 12px;
7+
max-width: 700px;
8+
line-height: 1.2;
9+
}
10+
11+
.title {
12+
margin: 0 0 6px;
13+
font-size: 24px;
14+
font-weight: 800;
15+
}
16+
17+
.subtitle {
18+
margin: 0 0 18px;
19+
font-size: 14px;
20+
font-weight: 700;
21+
color: #1f2933;
22+
}
23+
24+
.steps {
25+
display: flex;
26+
flex-direction: column;
27+
gap: 14px;
28+
}
29+
30+
.step {
31+
display: flex;
32+
align-items: flex-start;
33+
gap: 12px;
34+
padding-left: 14px;
35+
border-left: 4px solid #e5e7eb;
36+
}
37+
38+
.step-number {
39+
color: #1f7aec;
40+
font-weight: 800;
41+
font-size: 14px;
42+
min-width: 14px;
43+
}
44+
45+
.step-text {
46+
margin: 0;
47+
font-size: 14px;
48+
color: #1f2933;
49+
}
50+
51+
.step-link {
52+
color: #1f7aec;
53+
text-decoration: none;
54+
}
55+
56+
.step-link:hover {
57+
text-decoration: underline;
58+
}
59+
60+
.cta-button {
61+
margin: 16px 0;
62+
width: 100%;
63+
padding: 12px 14px;
64+
border: none;
65+
border-radius: 10px;
66+
background-color: #1f7aec;
67+
color: #ffffff;
68+
font-size: 16px;
69+
font-weight: 700;
70+
cursor: pointer;
71+
transition: background-color 0.15s ease, transform 0.1s ease;
72+
}
73+
74+
.cta-button:hover {
75+
background-color: #1664c2;
76+
transform: translateY(-1px);
77+
}
78+
79+
.footnote {
80+
font-size: 12px;
81+
color: #6c757d;
82+
margin-top: 12px;
83+
}

‎webapp/_webapp/src/views/extension-popup/app.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import { Providers } from "../../providers";
4+
import { ExtensionPopup } from "./components/ExtensionPopup";
5+
import "./app.css";
6+
7+
const rootElement = document.getElementById("root");
8+
if (!rootElement) {
9+
throw new Error("Root element not found");
10+
}
11+
12+
const root = createRoot(rootElement);
13+
root.render(
14+
import.meta.env.DEV ? (
15+
<StrictMode>
16+
<Providers>
17+
<ExtensionPopup />
18+
</Providers>
19+
</StrictMode>
20+
) : (
21+
<Providers>
22+
<ExtensionPopup />
23+
</Providers>
24+
),
25+
);

‎webapp/_webapp/src/views/extension-popup/components/ExtensionPopup.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Steps, Step } from "./Steps";
2+
3+
const steps: Step[] = [
4+
{
5+
number: 1,
6+
content: (
7+
<>
8+
In{" "}
9+
<a
10+
className="step-link"
11+
href="https://overleaf.com"
12+
target="_blank"
13+
rel="noreferrer"
14+
>
15+
overleaf.com
16+
</a>
17+
, open any of your projects.
18+
</>
19+
),
20+
},
21+
{
22+
number: 2,
23+
content: <>PaperDebugger is in the "top left" of the project page.</>,
24+
},
25+
];
26+
27+
export const ExtensionPopup = () => {
28+
const openSettingsPage = () => {
29+
const runtime = typeof chrome !== "undefined" ? chrome.runtime : undefined;
30+
const url = runtime?.getURL?.("settings.html") ?? "/settings.html";
31+
32+
if (runtime?.openOptionsPage) {
33+
runtime.openOptionsPage();
34+
return;
35+
}
36+
37+
window.open(url, "_blank", "noopener,noreferrer");
38+
};
39+
40+
const settingsUrl =
41+
(typeof chrome !== "undefined" ? chrome.runtime?.getURL?.("settings.html") : undefined) ??
42+
"/settings.html";
43+
44+
return (
45+
<div className="popup-shell">
46+
<h1 className="title">PaperDebugger</h1>
47+
<h2 className="subtitle">How to use</h2>
48+
<Steps steps={steps} />
49+
50+
<img
51+
src="images/locator.png"
52+
alt="PaperDebugger Location"
53+
style={{
54+
width: "100%",
55+
}}
56+
/>
57+
58+
<p className="footnote" style={{ marginTop: "12px" }}>
59+
Self-hosted Overleaf?{" "}
60+
<a
61+
className="step-link"
62+
href={settingsUrl}
63+
target="_blank"
64+
rel="noreferrer"
65+
onClick={(e) => {
66+
e.preventDefault();
67+
openSettingsPage();
68+
}}
69+
>
70+
Allow PaperDebugger access here.
71+
</a>
72+
</p>
73+
</div>
74+
);
75+
};

‎webapp/_webapp/src/views/extension-popup/components/StepItem.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ReactNode } from "react";
2+
3+
type StepItemProps = {
4+
number: number;
5+
children: ReactNode;
6+
};
7+
8+
export const StepItem = ({ number, children }: StepItemProps) => (
9+
<div className="step">
10+
<span className="step-number">{number}.</span>
11+
<p className="step-text">{children}</p>
12+
</div>
13+
);
14+

0 commit comments

Comments
 (0)