Skip to content

Commit aff1f3d

Browse files
cezaraugustocezaraugusto
committed
Add Svelte
1 parent 7e91007 commit aff1f3d

31 files changed

+627
-22
lines changed

‎examples-v2/svelte/.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

‎examples-v2/svelte/background.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('Hello from the background script!')

‎examples-v2/svelte/content/ContentApp.svelte

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script lang="ts">
2+
import svelteLogo from '../images/svelte.png'
3+
import tailwindBg from '../images/tailwind_bg.png'
4+
import typescriptLogo from '../images/typescript.png'
5+
import tailwindLogo from '../images/tailwind.png'
6+
import chromeWindowBg from '../images/chromeWindow.png'
7+
8+
let isDialogOpen = true
9+
10+
function toggleDialog() {
11+
isDialogOpen = !isDialogOpen
12+
}
13+
</script>
14+
15+
{#if !isDialogOpen}
16+
<div class="mx-auto p-6">
17+
<button
18+
on:click={toggleDialog}
19+
class="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
20+
>
21+
🧩 Open content script hint <span aria-hidden="true">+</span>
22+
</button>
23+
</div>
24+
{:else}
25+
<div class="mx-auto max-w-7xl md:px-0 lg:p-6">
26+
<div class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
27+
<div class="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
28+
<div class="w-[108rem] flex-none flex justify-end">
29+
<picture>
30+
<img
31+
src={tailwindBg}
32+
alt=""
33+
class="w-[90rem] flex-none max-w-none hidden dark:block"
34+
decoding="async"
35+
/>
36+
</picture>
37+
</div>
38+
</div>
39+
<div class="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
40+
<div class="flex items-center justify-center space-x-4 my-4 mx-auto">
41+
<img
42+
alt="React logo"
43+
src={svelteLogo}
44+
class="relative inline-block w-12"
45+
/>
46+
<div class="text-3xl text-white">+</div>
47+
<img
48+
alt="TypeScript logo"
49+
src={typescriptLogo}
50+
class="relative inline-block w-12"
51+
/>
52+
<div class="text-3xl text-white">+</div>
53+
<img
54+
alt="Tailwind logo"
55+
src={tailwindLogo}
56+
class="relative inline-block w-12"
57+
/>
58+
</div>
59+
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
60+
This is a content script running Svelte, TypeScript, and Tailwind.css
61+
</h2>
62+
<p class="mt-6 text-lg leading-8 text-gray-300">
63+
Learn more about creating cross-browser extensions by
64+
<button
65+
on:click={toggleDialog}
66+
class="underline hover:no-underline"
67+
>
68+
closing this hint
69+
</button>
70+
.
71+
</p>
72+
</div>
73+
<div class="relative mt-16 h-80 lg:mt-8">
74+
<img
75+
class="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
76+
src={chromeWindowBg}
77+
alt="Chrome window screenshot"
78+
width="1824"
79+
height="1080"
80+
/>
81+
</div>
82+
</div>
83+
</div>
84+
{/if}

‎examples-v2/svelte/content/scripts.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {mount} from 'svelte'
2+
import ContentApp from './ContentApp.svelte'
3+
4+
let unmount: () => void
5+
6+
if (import.meta.webpackHot) {
7+
import.meta.webpackHot?.accept()
8+
import.meta.webpackHot?.dispose(() => unmount?.())
9+
}
10+
11+
if (document.readyState === 'complete') {
12+
unmount = initial() || (() => {})
13+
} else {
14+
document.addEventListener('readystatechange', () => {
15+
if (document.readyState === 'complete') unmount = initial() || (() => {})
16+
})
17+
}
18+
19+
console.log('Hello from content script')
20+
21+
export default function initial() {
22+
const rootDiv = document.createElement('div')
23+
rootDiv.id = 'extension-root'
24+
document.body.appendChild(rootDiv)
25+
26+
const shadowRoot = rootDiv.attachShadow({mode: 'open'})
27+
28+
const style = document.createElement('style')
29+
shadowRoot.appendChild(style)
30+
31+
fetchCSS().then((response) => {
32+
style.textContent = response
33+
})
34+
35+
if (import.meta.webpackHot) {
36+
import.meta.webpackHot?.accept('./styles.css', () => {
37+
fetchCSS().then((response) => {
38+
style.textContent = response
39+
})
40+
})
41+
}
42+
43+
// Create container for Svelte app
44+
const contentDiv = document.createElement('div')
45+
contentDiv.className = 'content_script'
46+
shadowRoot.appendChild(contentDiv)
47+
48+
// Mount Svelte app using Svelte 5's mount function
49+
mount(ContentApp, {
50+
target: contentDiv
51+
})
52+
53+
return () => {
54+
rootDiv.remove()
55+
}
56+
}
57+
58+
async function fetchCSS() {
59+
const response = await fetch(new URL('./styles.css', import.meta.url))
60+
const text = await response.text()
61+
return response.ok ? text : Promise.reject(text)
62+
}

‎examples-v2/svelte/content/styles.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.content_script {
6+
position: fixed;
7+
bottom: 0;
8+
right: 0;
9+
z-index: 99999;
10+
}

‎examples-v2/svelte/content/svelte.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.svelte' {
2+
import type {ComponentType} from 'svelte'
3+
const component: ComponentType
4+
export default component
5+
}

‎examples-v2/svelte/images/chromeWindow.png

291 KB
Loading

‎examples-v2/svelte/images/extension_48.png

1.35 KB
Loading

‎examples-v2/svelte/images/svelte.png

70.1 KB
Loading

‎examples-v2/svelte/images/tailwind.png

27.8 KB
Loading

‎examples-v2/svelte/images/tailwind_bg.png

170 KB
Loading

‎examples-v2/svelte/images/typescript.png

23.1 KB
Loading

‎examples-v2/svelte/manifest.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://json.schemastore.org/chrome-manifest.json",
3+
"manifest_version": 3,
4+
"version": "0.0.1",
5+
"name": "Svelte",
6+
"description": "An Extension.js example.",
7+
"icons": {
8+
"48": "images/extension_48.png"
9+
},
10+
"background": {
11+
"chromium:service_worker": "background.ts",
12+
"firefox:scripts": ["background.ts"]
13+
},
14+
"content_scripts": [
15+
{
16+
"matches": ["<all_urls>"],
17+
"js": ["./content/scripts.ts"]
18+
}
19+
],
20+
"options_page": "options/index.html"
21+
}

‎examples-v2/svelte/options/OptionsApp.svelte

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
let message = 'Welcome to your Svelte Extension.'
3+
</script>
4+
5+
<header>
6+
<h1>
7+
<img class="svelte" src="/logo.png" alt="The Svelte logo" width="120px" />
8+
<br />
9+
{message}
10+
</h1>
11+
<p>
12+
Learn more about creating browser extensions at
13+
<a href="https://extension.js.org" target="_blank">
14+
https://extension.js.org
15+
</a>.
16+
</p>
17+
</header>

‎examples-v2/svelte/options/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>Svelte Template</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this extension.</noscript>
10+
<div id="app"></div>
11+
</body>
12+
<script type="module" src="./scripts.ts"></script>
13+
</html>

‎examples-v2/svelte/options/scripts.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as svelte from 'svelte'
2+
import './styles.css'
3+
import App from './OptionsApp.svelte'
4+
5+
const container = document.getElementById('app')
6+
const app = svelte.mount(App, {
7+
target: container as HTMLElement
8+
})
9+
10+
export default app

‎examples-v2/svelte/options/styles.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
html {
2+
font-size: 62.5%;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
4+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: calc(100vh - 4rem);
12+
min-width: 300px;
13+
padding: 2rem;
14+
font-size: 1.8rem;
15+
line-height: 1.618;
16+
max-width: 38em;
17+
margin: auto;
18+
color: #c9c9c9;
19+
background-color: #0a0c10;
20+
}
21+
22+
@media (max-width: 684px) {
23+
body {
24+
font-size: 1.53rem;
25+
}
26+
}
27+
28+
@media (max-width: 382px) {
29+
body {
30+
font-size: 1.35rem;
31+
}
32+
}
33+
34+
h1 {
35+
line-height: 1.1;
36+
font-weight: 700;
37+
margin-bottom: 1.5rem;
38+
overflow-wrap: break-word;
39+
word-wrap: break-word;
40+
word-break: break-word;
41+
font-size: 4.7em;
42+
}
43+
44+
@media (max-width: 684px) {
45+
h1 {
46+
font-size: 2.7em;
47+
}
48+
}
49+
50+
p {
51+
margin-top: 0px;
52+
margin-bottom: 2.5rem;
53+
}
54+
55+
a {
56+
text-decoration: none;
57+
border-bottom: 2px solid #c9c9c9;
58+
color: #e5e7eb;
59+
}
60+
61+
img {
62+
height: auto;
63+
max-width: 100%;
64+
margin-top: 0px;
65+
margin-bottom: 2.5rem;
66+
}
67+
68+
@media (max-width: 684px) {
69+
img {
70+
margin-top: 2rem;
71+
margin-bottom: 1rem;
72+
}
73+
}
74+
75+
body {
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
height: calc(100vh - 4rem);
80+
}
81+
82+
header > div {
83+
display: flex;
84+
align-items: center;
85+
}

‎examples-v2/svelte/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"private": true,
3+
"name": "svelte",
4+
"description": "An Extension.js example.",
5+
"version": "0.0.1",
6+
"author": {
7+
"name": "Cezar Augusto",
8+
"email": "boss@cezaraugusto.net",
9+
"url": "https://cezaraugusto.com"
10+
},
11+
"license": "MIT",
12+
"dependencies": {
13+
"svelte": "5.15.0",
14+
"tailwindcss": "^3.4.1"
15+
},
16+
"devDependencies": {
17+
"@tsconfig/svelte": "5.0.4",
18+
"typescript": "5.3.3"
19+
}
20+
}

‎examples-v2/svelte/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
6+
}

‎examples-v2/svelte/public/extension.svg

+3
Loading

‎examples-v2/svelte/public/logo.png

70.1 KB
Loading

‎examples-v2/svelte/tailwind.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./content/**/*.svelte', './content/**/*.ts'],
4+
theme: {
5+
extend: {}
6+
},
7+
plugins: []
8+
}

0 commit comments

Comments
 (0)