Skip to content

Commit 04f94b2

Browse files
cezaraugustocezaraugusto
committed
Examples V2 as sidebar + content scripts
1 parent c09df61 commit 04f94b2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+926
-889
lines changed

‎examples-v2/javascript/background.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
11
console.log('Hello from the background script!')
2+
3+
const isFirefoxLike =
4+
import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
5+
import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
6+
7+
if (isFirefoxLike) {
8+
browser.browserAction.onClicked.addListener(() => {
9+
browser.sidebarAction.open()
10+
})
11+
} else {
12+
chrome.action.onClicked.addListener(() => {
13+
chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
14+
})
15+
}

‎examples-v2/javascript/manifest.json

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,35 @@
11
{
22
"$schema": "https://json.schemastore.org/chrome-manifest.json",
3-
"manifest_version": 3,
3+
"chromium:manifest_version": 3,
4+
"firefox:manifest_version": 2,
45
"version": "0.0.1",
5-
"name": "JavaScript",
6+
"name": "javascript-extension",
7+
"author": "Your Name",
68
"description": "An Extension.js example.",
79
"icons": {
810
"48": "images/extension_48.png"
911
},
10-
"permissions": ["activeTab", "scripting"],
11-
"host_permissions": ["<all_urls>"],
12+
"chromium:action": {
13+
"default_icon": {
14+
"48": "images/extension_48.png"
15+
},
16+
"default_title": "Open Side Panel"
17+
},
18+
"firefox:browser_action": {
19+
"default_icon": {
20+
"48": "images/extension_48.png"
21+
},
22+
"default_title": "Open Side Panel"
23+
},
24+
"chromium:side_panel": {
25+
"default_path": "sidebar/index.html",
26+
"default_title": "Side Panel Content"
27+
},
28+
"firefox:sidebar_action": {
29+
"default_panel": "sidebar/index.html",
30+
"default_title": "Side Panel Content"
31+
},
32+
"chromium:permissions": ["sidePanel"],
1233
"background": {
1334
"chromium:service_worker": "background.js",
1435
"firefox:scripts": ["background.js"]
@@ -22,8 +43,7 @@
2243
"content_scripts": [
2344
{
2445
"matches": ["<all_urls>"],
25-
"js": ["content/scripts.js"]
46+
"js": ["./content/scripts.js"]
2647
}
27-
],
28-
"options_page": "./options/index.html"
48+
]
2949
}

‎examples-v2/javascript/options/index.html

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎examples-v2/javascript/options/scripts.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

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

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎examples-v2/javascript/package.json

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
{
22
"private": true,
3-
"name": "javascript-template",
3+
"name": "javascript-extension",
44
"description": "An Extension.js example.",
55
"version": "0.0.1",
66
"author": {
7-
"name": "Cezar Augusto",
8-
"email": "[email protected]",
9-
"url": "https://cezaraugusto.com"
7+
"name": "Your Name",
8+
"email": "[email protected]",
9+
"url": "https://yourwebsite.com"
10+
},
11+
"license": "MIT",
12+
"devDependencies": {
13+
"autoprefixer": "^10.4.20",
14+
"postcss": "^8.4.47",
15+
"tailwindcss": "^3.4.13"
1016
},
1117
"type": "module"
1218
}

‎examples-v2/javascript/sidebar/SidebarApp.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import javascriptLogo from '../images/javascript.png'
2+
import './styles.css'
3+
4+
function SidebarApp() {
5+
const root = document.getElementById('root')
6+
if (!root) return
7+
8+
root.innerHTML = `
9+
<div class="p-4">
10+
<header class="text-center">
11+
<h1 class="mb-4">
12+
<img
13+
class="javascript mx-auto mb-2"
14+
src="${javascriptLogo}"
15+
alt="The JavaScript logo"
16+
width="120px"
17+
/>
18+
<br />
19+
Welcome to your JavaScript Extension
20+
</h1>
21+
<p class="text-gray-600">
22+
Learn more about creating cross-browser extensions at
23+
<a
24+
href="https://extension.js.org"
25+
target="_blank"
26+
class="text-blue-600 hover:underline"
27+
>
28+
https://extension.js.org
29+
</a>
30+
.
31+
</p>
32+
</header>
33+
</div>
34+
`
35+
}
36+
37+
SidebarApp()

‎examples-v2/vue/options/index.html renamed to ‎examples-v2/javascript/sidebar/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>Vue Template</title>
6+
<title>JavaScript Sidebar</title>
77
</head>
88
<body>
99
<noscript>You need to enable JavaScript to run this extension.</noscript>
10-
<div id="app"></div>
10+
<div id="root"></div>
1111
</body>
12-
<script type="module" src="./scripts.ts"></script>
13-
</html>
12+
<script src="./scripts.js"></script>
13+
</html>

‎examples-v2/javascript/sidebar/scripts.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './SidebarApp'
2+
import './styles.css'

‎examples-v2/javascript/sidebar/styles.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--background: 0 0% 100%;
7+
--foreground: 222.2 84% 4.9%;
8+
}
9+
10+
body {
11+
background-color: hsl(var(--background));
12+
color: hsl(var(--foreground));
13+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
14+
'Helvetica Neue', Arial, sans-serif;
15+
}
16+
17+
.javascript {
18+
animation: spin 20s linear infinite;
19+
}
20+
21+
@keyframes spin {
22+
from {
23+
transform: rotate(0deg);
24+
}
25+
to {
26+
transform: rotate(360deg);
27+
}
28+
}

‎examples-v2/preact/background.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
11
console.log('Hello from the background script!')
2+
3+
const isFirefoxLike =
4+
import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
5+
import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
6+
7+
if (isFirefoxLike) {
8+
browser.browserAction.onClicked.addListener(() => {
9+
browser.sidebarAction.open()
10+
})
11+
} else {
12+
chrome.action.onClicked.addListener(() => {
13+
chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
14+
})
15+
}

‎examples-v2/preact/content/scripts.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,23 @@ function initial() {
2828
// prevents conflicts with the host page's styles.
2929
// This way, styles from the extension won't leak into the host page.
3030
const shadowRoot = rootDiv.attachShadow({mode: 'open'})
31-
const style = new CSSStyleSheet()
32-
shadowRoot.adoptedStyleSheets = [style]
33-
fetchCSS().then((response) => style.replace(response))
31+
32+
const styleElement = document.createElement('style')
33+
shadowRoot.appendChild(styleElement)
34+
fetchCSS().then((response) => (styleElement.textContent = response))
3435

3536
if (import.meta.webpackHot) {
3637
import.meta.webpackHot?.accept('./styles.css', () => {
37-
fetchCSS().then((response) => style.replace(response))
38+
fetchCSS().then((response) => (styleElement.textContent = response))
3839
})
3940
}
4041

41-
render(
42-
<div className="content_script">
43-
<ContentApp />
44-
</div>,
45-
shadowRoot
46-
)
42+
// Create container for Preact app
43+
const container = document.createElement('div')
44+
container.className = 'content_script'
45+
shadowRoot.appendChild(container)
46+
47+
render(<ContentApp />, container)
4748

4849
return () => {
4950
rootDiv.remove()

‎examples-v2/preact/manifest.json

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
11
{
22
"$schema": "https://json.schemastore.org/chrome-manifest.json",
3-
"manifest_version": 3,
3+
"chromium:manifest_version": 3,
4+
"firefox:manifest_version": 2,
45
"version": "0.0.1",
5-
"name": "Preact",
6+
"name": "preact-extension",
7+
"author": "Your Name",
68
"description": "An Extension.js example.",
79
"icons": {
810
"48": "images/extension_48.png"
911
},
12+
"chromium:action": {
13+
"default_icon": {
14+
"48": "images/extension_48.png"
15+
},
16+
"default_title": "Open Side Panel"
17+
},
18+
"firefox:browser_action": {
19+
"default_icon": {
20+
"48": "images/extension_48.png"
21+
},
22+
"default_title": "Open Side Panel"
23+
},
24+
"chromium:side_panel": {
25+
"default_path": "sidebar/index.html",
26+
"default_title": "Side Panel Content"
27+
},
28+
"firefox:sidebar_action": {
29+
"default_panel": "sidebar/index.html",
30+
"default_title": "Side Panel Content"
31+
},
32+
"chromium:permissions": ["sidePanel"],
1033
"background": {
1134
"chromium:service_worker": "background.ts",
1235
"firefox:scripts": ["background.ts"]
1336
},
1437
"content_scripts": [
1538
{
16-
"matches": ["https://extension.js.org/*"],
17-
"js": ["./content/scripts.tsx"],
18-
"css": ["./content/styles.css"]
39+
"matches": ["<all_urls>"],
40+
"js": ["./content/scripts.tsx"]
1941
}
20-
],
21-
"options_page": "./options/index.html"
42+
]
2243
}

0 commit comments

Comments
 (0)