Skip to content

Commit 3597414

Browse files
collectedmindcollectedmind
committed
feat(extension): scaffold of browser extension
1 parent 7130109 commit 3597414

28 files changed

+3624
-163
lines changed

‎clients/extension/.gitignore

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
dist
11+
12+
# misc
13+
.DS_Store
14+
15+
# local env files
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
# lock files
22+
yarn.lock
23+
package-lock.json
24+
25+
# debug files
26+
npm-debug.log*
27+
yarn-debug.log*
28+
yarn-error.log*
29+
30+
# extension.js
31+
extension-env.d.ts

‎clients/extension/README.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Save to Pocket
2+
3+
> Save to Pocket from anywhere and access it when you need it wherever you are
4+
5+
## Available Scripts
6+
7+
In the project directory, you can run the following scripts:
8+
9+
### pnpm dev
10+
11+
**Development Mode**: This command runs your extension in development mode. It will launch a new browser instance with your extension loaded. The page will automatically reload whenever you make changes to your code, allowing for a smooth development experience.
12+
13+
```bash
14+
pnpm dev
15+
```
16+
17+
### pnpm start
18+
19+
**Production Preview**: This command runs your extension in production mode. It will launch a new browser instance with your extension loaded, simulating the environment and behavior of your extension as it will appear once published.
20+
21+
```bash
22+
pnpm start
23+
```
24+
25+
### pnpm build
26+
27+
**Build for Production**: This command builds your extension for production. It optimizes and bundles your extension, preparing it for deployment to the target browser's store.
28+
29+
```bash
30+
pnpm build
31+
```

‎clients/extension/action/app.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { SaveActions } from './components/actions'
2+
import { ExtensionHeader } from './components/header'
3+
4+
export function App() {
5+
return (
6+
<div>
7+
<ExtensionHeader />
8+
<hr />
9+
<SaveActions />
10+
</div>
11+
)
12+
}

‎clients/extension/action/components/actions/index.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import style from './style.module.css'
2+
import { IconSave } from '../icons/icon-save'
3+
import { IconSnippets } from '../icons/icon-snippets'
4+
5+
export function SaveActions() {
6+
return (
7+
<main>
8+
<h2 className={style.title}>Save To Pocket</h2>
9+
<div className={style.actions}>
10+
<button>
11+
<IconSave /> Save Url
12+
</button>
13+
<button>
14+
<IconSnippets /> Add Clipping
15+
</button>
16+
</div>
17+
</main>
18+
)
19+
}

‎clients/extension/action/components/actions/style.module.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.title {
2+
padding: 0.5rem;
3+
font-size: 16px;
4+
font-weight: 700;
5+
line-height: 19.09px;
6+
letter-spacing: -0.03em;
7+
text-align: left;
8+
margin: 0 0 0.5rem;
9+
}
10+
11+
.actions {
12+
display: flex;
13+
flex-direction: column;
14+
row-gap: 0.5rem;
15+
padding: 0 0.5rem;
16+
17+
button {
18+
width: 100%;
19+
}
20+
}

‎clients/extension/action/components/header/index.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import style from './style.module.css'
2+
3+
export function ExtensionHeader() {
4+
return (
5+
<header className={style.header}>
6+
<svg
7+
width="122"
8+
height="32"
9+
viewBox="0 0 122 32"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg">
12+
<path
13+
fill-rule="evenodd"
14+
clip-rule="evenodd"
15+
d="M33.9558 22.4002C30.5648 22.4002 27.7335 19.5375 27.7335 16.0496C27.7335 12.5287 30.5648 9.6002 33.9558 9.6002C37.4125 9.6002 40.178 12.5287 40.178 16.0496C40.178 19.5375 37.4125 22.4002 33.9558 22.4002ZM34.0692 7.59717C31.5382 7.59717 29.2993 9.03263 27.7093 10.9575L27.6444 8.67377C27.6119 7.85816 27.2225 7.46667 26.6385 7.46667C26.0219 7.46667 25.6001 7.95604 25.6001 8.64114V30.8908C25.6001 31.5433 26.0544 32 26.6709 32C27.3199 32 27.7093 31.5106 27.7093 30.8582V21.1362C29.2993 23.0284 31.5382 24.3333 34.0692 24.3333C38.6769 24.3333 42.3112 20.6142 42.3112 16.0142C42.3112 11.4142 38.6769 7.59717 34.0692 7.59717Z"
16+
fill="currentColor"
17+
/>
18+
<path
19+
fill-rule="evenodd"
20+
clip-rule="evenodd"
21+
d="M86.9504 15.208L93.1805 9.66067C93.7494 9.1644 93.8164 8.43654 93.3813 7.97336C92.9128 7.47709 92.2101 7.60943 91.7081 8.07261L83.2415 15.9252V1.25721C83.2415 0.496267 82.9069 0 82.2041 0C81.4345 0 81.0663 0.496267 81.0663 1.25721V23.2584C81.0663 23.9862 81.5014 24.4825 82.2041 24.4825C82.84 24.4825 83.2415 23.9862 83.2415 23.2584V18.5104L85.4104 16.5793L92.2435 24.0855C92.6786 24.5487 93.4148 24.7141 93.8833 24.284C94.4187 23.7877 94.2514 23.126 93.8498 22.6629L86.9504 15.208Z"
22+
fill="currentColor"
23+
/>
24+
<path
25+
fill-rule="evenodd"
26+
clip-rule="evenodd"
27+
d="M52.7994 22.4002C49.4084 22.4002 46.5771 19.5375 46.5771 16.0496C46.5771 12.5287 49.4084 9.6002 52.7994 9.6002C56.2561 9.6002 59.0216 12.5287 59.0216 16.0496C59.0216 19.5375 56.2561 22.4002 52.7994 22.4002ZM52.8488 7.46667C48.1069 7.46667 44.4442 11.3591 44.4442 16.0499C44.4442 20.7408 48.1069 24.5333 52.8488 24.5333C57.2963 24.5333 61.1553 20.7408 61.1553 16.0499C61.1553 11.3591 57.2636 7.46667 52.8488 7.46667Z"
28+
fill="currentColor"
29+
/>
30+
<path
31+
fill-rule="evenodd"
32+
clip-rule="evenodd"
33+
d="M120.667 21.3153C120.333 21.3153 120 21.5144 119.8 21.6802C119.333 22.0784 118.767 22.4765 117.967 22.4765C116.6 22.4765 115.833 21.6471 115.833 19.7559V9.53716L120.067 9.60352C120.667 9.60352 121.067 9.23856 121.067 8.67454C121.067 8.07734 120.667 7.71238 120.067 7.71238L115.833 7.74556V4.32824C115.833 3.66468 115.367 3.2002 114.8 3.2002C114.2 3.2002 113.7 3.66468 113.7 4.32824V7.74556L111.9 7.71238C111.333 7.71238 110.933 8.07734 110.933 8.67454C110.933 9.20538 111.367 9.63669 111.9 9.60352L113.7 9.53716V19.8223C113.7 23.0405 115.667 24.5335 117.933 24.5335C119.333 24.5335 120.4 24.0027 121.133 23.2396C121.367 22.9742 121.6 22.6756 121.6 22.2774C121.6 21.7134 121.233 21.3153 120.667 21.3153Z"
34+
fill="currentColor"
35+
/>
36+
<path
37+
fill-rule="evenodd"
38+
clip-rule="evenodd"
39+
d="M97.0667 14.9335C97.541 11.4349 100.044 9.6002 102.86 9.6002C105.862 9.6002 107.96 12.2002 108.089 14.9335H97.0667ZM102.896 7.46667C98.1331 7.46667 94.5776 11.3591 94.5776 16.0499C94.5776 20.7408 98.2002 24.5333 102.93 24.5333C105.278 24.5333 107.559 23.6684 109.068 22.2046C109.404 21.8719 109.672 21.5059 109.672 21.14C109.672 20.6077 109.336 20.1752 108.699 20.1752C108.364 20.1752 108.028 20.3083 107.76 20.5411C106.351 21.7721 104.909 22.4707 102.93 22.4707C99.8505 22.4707 97.1021 20.1462 96.8164 16.682H108.8C109.94 16.682 110.578 16.0832 110.578 15.1184C110.578 11.3923 107.29 7.46667 102.896 7.46667Z"
40+
fill="currentColor"
41+
/>
42+
<path
43+
fill-rule="evenodd"
44+
clip-rule="evenodd"
45+
d="M77.2315 19.246C76.9343 19.246 76.6041 19.4803 76.4059 19.748C75.4813 20.9862 73.5001 22.4586 71.2876 22.4586C67.9855 22.4586 65.1457 19.8149 65.1457 16C65.1457 11.9174 67.9855 9.47452 71.2876 9.47452C73.6982 9.47452 75.019 10.6458 76.1418 12.0178C76.3399 12.252 76.6371 12.4863 77.0003 12.4863C77.4957 12.4863 77.991 12.1182 77.991 11.6162C77.991 11.2481 77.7598 10.88 77.5617 10.5788C76.2078 8.60445 73.9293 7.46667 71.2876 7.46667C66.6977 7.46667 62.9332 11.2816 62.9332 16C62.9332 20.6515 66.6977 24.5333 71.2876 24.5333C74.1275 24.5333 76.5711 22.8601 77.8589 21.12C78.09 20.8188 78.2221 20.5177 78.2221 20.2499C78.2221 19.6476 77.7928 19.246 77.2315 19.246Z"
46+
fill="currentColor"
47+
/>
48+
<path
49+
fill-rule="evenodd"
50+
clip-rule="evenodd"
51+
d="M14.5879 14.6474L10.1126 18.8397C9.88226 19.1017 9.52029 19.1999 9.25704 19.1999C8.92797 19.1999 8.59891 19.1017 8.33566 18.8397L3.92621 14.6474C3.46552 14.1561 3.39971 13.3373 3.92621 12.8132C4.4198 12.3547 5.24246 12.2892 5.73606 12.8132L9.25704 16.1867L12.8438 12.8132C13.3045 12.2892 14.1272 12.3547 14.5879 12.8132C15.0486 13.3373 15.0486 14.1561 14.5879 14.6474ZM17.0922 7.46667H1.81826C0.82645 7.46667 -6.10352e-05 8.23938 -6.10352e-05 9.24725V14.9921C-6.10352e-05 20.1995 4.23168 24.5333 9.45523 24.5333C14.6457 24.5333 18.8444 20.1995 18.8444 14.9921V9.24725C18.8444 8.23938 18.0509 7.46667 17.0922 7.46667Z"
52+
fill="#EF4156"
53+
/>
54+
<path
55+
fill-rule="evenodd"
56+
clip-rule="evenodd"
57+
d="M14.5876 14.6473L10.1124 18.8396C9.88201 19.1016 9.52004 19.1999 9.25679 19.1999C8.92773 19.1999 8.59867 19.1016 8.33542 18.8396L3.92597 14.6473C3.46528 14.156 3.39946 13.3372 3.92597 12.8132C4.41956 12.3547 5.24222 12.2892 5.73581 12.8132L9.25679 16.1867L12.8436 12.8132C13.3043 12.2892 14.1269 12.3547 14.5876 12.8132C15.0483 13.3372 15.0483 14.156 14.5876 14.6473Z"
58+
fill="white"
59+
/>
60+
</svg>
61+
<button>View My Saves</button>
62+
</header>
63+
)
64+
}

‎clients/extension/action/components/header/style.module.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.header {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
padding: 0.5rem;
6+
font-family: SF Pro;
7+
font-size: 1rem;
8+
font-weight: 600;
9+
line-height: 19.09px;
10+
letter-spacing: -0.03em;
11+
}

‎clients/extension/action/components/icons/icon-notes.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
export function IconNotes() {
2+
return (
3+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="icon">
4+
<path
5+
d="M4 5H20V19.6522C20 19.9609 19.8601 20.2907 19.553 20.5577C19.2415 20.8286 18.7925 21 18.3 21H5.7C5.2075 21 4.75852 20.8286 4.44699 20.5577C4.13989 20.2907 4 19.9609 4 19.6522V5Z"
6+
stroke="black"
7+
stroke-width="2"
8+
stroke-linecap="round"
9+
stroke-linejoin="round"
10+
/>
11+
<path
12+
d="M8 3V4"
13+
stroke="black"
14+
stroke-width="2"
15+
stroke-linecap="round"
16+
stroke-linejoin="round"
17+
/>
18+
<path
19+
d="M12 3V4"
20+
stroke="black"
21+
stroke-width="2"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
/>
25+
<path
26+
d="M16 3V4"
27+
stroke="black"
28+
stroke-width="2"
29+
stroke-linecap="round"
30+
stroke-linejoin="round"
31+
/>
32+
<path
33+
fill-rule="evenodd"
34+
clip-rule="evenodd"
35+
d="M7 11C7 10.4477 7.44772 10 8 10H16C16.5523 10 17 10.4477 17 11C17 11.5523 16.5523 12 16 12H8C7.44772 12 7 11.5523 7 11Z"
36+
fill="black"
37+
/>
38+
<path
39+
fill-rule="evenodd"
40+
clip-rule="evenodd"
41+
d="M7 15C7 14.4477 7.44772 14 8 14H16C16.5523 14 17 14.4477 17 15C17 15.5523 16.5523 16 16 16H8C7.44772 16 7 15.5523 7 15Z"
42+
fill="black"
43+
/>
44+
</svg>
45+
)
46+
}

‎clients/extension/action/components/icons/icon-save.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export function IconSave() {
2+
return (
3+
<svg
4+
viewBox="0 0 24 24"
5+
xmlns="http://www.w3.org/2000/svg"
6+
className="icon"
7+
fill="currentColor">
8+
<path
9+
fill-rule="evenodd"
10+
clip-rule="evenodd"
11+
d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5H20H4H2ZM4 5H2V11C2 16.5228 6.47715 21 12 21C17.5228 21 22 16.5228 22 11V5H20V11C20 15.4183 16.4183 19 12 19C7.58172 19 4 15.4183 4 11V5Z"
12+
/>
13+
<path
14+
fill-rule="evenodd"
15+
clip-rule="evenodd"
16+
d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z"
17+
/>
18+
</svg>
19+
)
20+
}

‎clients/extension/action/components/icons/icon-snippets.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export function IconSnippets() {
2+
return (
3+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="icon">
4+
<path
5+
d="M14.3886 5.83172C14.4096 7.35412 15.6743 8.57143 17.2133 8.55067C18.7524 8.52991 19.983 7.27894 19.962 5.75654C19.941 4.23415 18.6764 3.01683 17.1373 3.03759C15.5983 3.05835 14.3676 4.30933 14.3886 5.83172Z"
6+
stroke="currentColor"
7+
stroke-width="2"
8+
stroke-linecap="round"
9+
stroke-linejoin="round"
10+
/>
11+
<path
12+
d="M4.03802 5.97131C4.05901 7.49371 5.32367 8.71102 6.86273 8.69026C8.40178 8.6695 9.63242 7.41852 9.61143 5.89613C9.59044 4.37373 8.32578 3.15642 6.78672 3.17718C5.24767 3.19794 4.01703 4.44891 4.03802 5.97131Z"
13+
stroke="currentColor"
14+
stroke-width="2"
15+
stroke-linecap="round"
16+
stroke-linejoin="round"
17+
/>
18+
<path
19+
d="M17.5181 20.8798L8.42949 8.18766"
20+
stroke="currentColor"
21+
stroke-width="2"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
/>
25+
<path
26+
d="M7.11296 20.8798L15.6332 8.09045"
27+
stroke="currentColor"
28+
stroke-width="2"
29+
stroke-linecap="round"
30+
stroke-linejoin="round"
31+
/>
32+
</svg>
33+
)
34+
}

‎clients/extension/action/global.css

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
:root {
2+
--color-white100: #ffffff;
3+
--color-grey10: #1a1a1a;
4+
--color-grey20: #333333;
5+
--color-grey25: #404040;
6+
--color-grey30: #4d4d4d;
7+
--color-grey35: #595959;
8+
--color-grey40: #666666;
9+
--color-grey45: #737373;
10+
--color-grey55: #8c8c8c;
11+
--color-grey65: #a6a6a6;
12+
--color-grey80: #cccccc;
13+
--color-grey85: #d9d9d9;
14+
--color-grey95: #f2f2f2;
15+
--color-coral: #ef4056;
16+
--color-amber: #fcb643;
17+
--color-brandPocket: #ef4056;
18+
--font-sans-serif: 'Graphik Web', 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
19+
20+
--color-canvas: #ffffff;
21+
--color-text-primary: #15141a;
22+
--color-divider: #f0f0f4;
23+
--color-button-neutral: #f0f0f4;
24+
--color-button-neutral-text: #15141a;
25+
26+
@media (prefers-color-scheme: dark) {
27+
--color-canvas: #42414d;
28+
--color-text-primary: #fbfbfe;
29+
--color-divider: #52525e;
30+
--color-button-neutral: #2b2a33;
31+
--color-button-neutral-text: #fbfbfe;
32+
}
33+
}
34+
35+
html {
36+
font-size: 16px;
37+
font-family: var(--font-sans-serif);
38+
}
39+
40+
body {
41+
margin: 0px !important;
42+
width: 400px;
43+
height: 100%;
44+
padding: 0.5rem 0.5rem 1rem;
45+
background-color: var(--color-canvas);
46+
color: var(--color-text-primary);
47+
}
48+
49+
svg {
50+
shape-rendering: geometricPrecision;
51+
}
52+
53+
.icon {
54+
width: 24px;
55+
height: 24px;
56+
margin-right: 0.625rem;
57+
}
58+
59+
hr {
60+
background: var(--color-divider);
61+
border: none;
62+
height: 1px;
63+
margin: 0.5rem 0;
64+
display: block;
65+
}
66+
67+
button {
68+
background-color: var(--color-button-neutral);
69+
color: var(--color-button-neutral-text);
70+
border-radius: 0.25rem;
71+
border-color: transparent;
72+
padding: 0.25rem 0.5rem;
73+
display: flex;
74+
align-items: center;
75+
cursor: pointer;
76+
}

‎clients/extension/action/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Save to Pocket</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this extension.</noscript>
10+
<div id="root"></div>
11+
</body>
12+
<script src="./script.tsx"></script>
13+
</html>

0 commit comments

Comments
 (0)