-
-
Learn more about creating cross-browser extensions by{' '}
diff --git a/examples/content-react-svgr/manifest.json b/examples/content-react-svgr/manifest.json
index 582f149d..9eeb99f5 100644
--- a/examples/content-react-svgr/manifest.json
+++ b/examples/content-react-svgr/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "content-react-svgr",
+ "name": "Content Scripts React SVGR",
"description": "An Extension.js example.",
"background": {
"chromium:service_worker": "background.ts",
diff --git a/examples/content-sass-module/background.js b/examples/content-sass-module/background.js
deleted file mode 100644
index bfd9ec37..00000000
--- a/examples/content-sass-module/background.js
+++ /dev/null
@@ -1,21 +0,0 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
- if (request.action === 'changeBackgroundColor') {
- changeBackgroundColor(request.color, sender.tab.id)
- }
-})
-
-function changeBackgroundColor(color, tabId) {
- chrome.scripting
- .executeScript({
- target: {tabId},
- function: setPageBackgroundColor,
- args: [color]
- })
- .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
- document.body.style.backgroundColor = color
-}
diff --git a/examples/content-sass-module/content/Logo.module.scss b/examples/content-sass-module/content/Logo.module.scss
deleted file mode 100644
index abc7cf93..00000000
--- a/examples/content-sass-module/content/Logo.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.logo {
- background: white;
- width: 90px;
- align-self: flex-start;
- border: 4px solid;
- border-color: #ccc;
- border-radius: 24px;
- filter: grayscale(1);
- transition:
- filter 2s,
- border-color 2s;
-}
-
-.logo:hover {
- filter: grayscale(0);
- border-color: aquamarine;
-}
-
diff --git a/examples/content-sass-module/content/scripts.js b/examples/content-sass-module/content/scripts.js
deleted file mode 100644
index 6f758071..00000000
--- a/examples/content-sass-module/content/scripts.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import './styles.scss'
-import styles from './Logo.module.scss'
-
-console.log('hello from content_scripts')
-
-document.body.innerHTML += `
-
-
-
- Change the background-color ⬇
-
-
-
- Learn more about creating cross-browser extensions at
- https://extension.js.org
-
-
-
-`
-
-document.getElementById('colorPicker').addEventListener('input', (event) => {
- chrome.runtime
- .sendMessage({
- action: 'changeBackgroundColor',
- color: event.target.value
- })
- .catch(console.error)
-})
diff --git a/examples/content-sass-module/content/styles.scss b/examples/content-sass-module/content/styles.scss
deleted file mode 100644
index d837965a..00000000
--- a/examples/content-sass-module/content/styles.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.content_script-box {
- background: white;
- position: fixed;
- right: 0;
- bottom: 0;
- z-index: 9;
- width: 315px;
- height: 345px;
- margin: 1em;
- padding: 1em;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- gap: 1em;
- box-shadow: 0px 0px 4px 1px #ccc;
-}
-
-.content_script-title {
- font-size: 1.85em;
- color: #333;
- line-height: 1.1;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
- font-weight: 700;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
-}
-
-.content_script-description {
- color: #999;
-}
-
-.content_script-colorPicker {
- display: block;
- width: 100%;
- height: 50px;
-}
diff --git a/examples/config-prettier/.gitignore b/examples/content-sass-modules/.gitignore
similarity index 100%
rename from examples/config-prettier/.gitignore
rename to examples/content-sass-modules/.gitignore
diff --git a/examples/content-sass-modules/background.js b/examples/content-sass-modules/background.js
new file mode 100644
index 00000000..798d5018
--- /dev/null
+++ b/examples/content-sass-modules/background.js
@@ -0,0 +1 @@
+console.log('Hello from the background script!')
diff --git a/examples/content-sass-modules/content/Logo.module.scss b/examples/content-sass-modules/content/Logo.module.scss
new file mode 100644
index 00000000..1ad612e4
--- /dev/null
+++ b/examples/content-sass-modules/content/Logo.module.scss
@@ -0,0 +1,4 @@
+.logo {
+ width: 72px;
+}
+
diff --git a/examples/content-sass-modules/content/scripts.js b/examples/content-sass-modules/content/scripts.js
new file mode 100644
index 00000000..1c9f6a5c
--- /dev/null
+++ b/examples/content-sass-modules/content/scripts.js
@@ -0,0 +1,23 @@
+import './styles.scss'
+import styles from './Logo.module.scss'
+import logo from '../images/logo.svg'
+
+console.log('hello from content_scripts')
+
+document.body.innerHTML += `
+
+
+
+ Welcome to your Sass Modules Extension
+
+
+ Learn more about creating cross-browser extensions at
+ https://extension.js.org
+
+
+
+`
diff --git a/examples/content-sass-modules/content/styles.scss b/examples/content-sass-modules/content/styles.scss
new file mode 100644
index 00000000..d1548afe
--- /dev/null
+++ b/examples/content-sass-modules/content/styles.scss
@@ -0,0 +1,37 @@
+.content_script {
+ color: #c9c9c9;
+ background-color: #0a0c10;
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ z-index: 9;
+ width: 315px;
+ margin: 1rem;
+ padding: 2rem 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1em;
+ border-radius: 6px;
+}
+
+.content_logo {
+ width: 72px;
+}
+
+.content_title {
+ font-size: 1.85em;
+ line-height: 1.1;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+ font-weight: 700;
+}
+
+.content_description {
+ font-size: small;
+}
+
+.content_description a {
+ text-decoration: none;
+ border-bottom: 2px solid #c9c9c9;
+ color: #e5e7eb;
+}
\ No newline at end of file
diff --git a/examples/config-prettier/images/extension_48.png b/examples/content-sass-modules/images/extension_48.png
similarity index 100%
rename from examples/config-prettier/images/extension_48.png
rename to examples/content-sass-modules/images/extension_48.png
diff --git a/examples/content-sass-modules/images/logo.svg b/examples/content-sass-modules/images/logo.svg
new file mode 100644
index 00000000..f3f4a52e
--- /dev/null
+++ b/examples/content-sass-modules/images/logo.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/content-sass-module/manifest.json b/examples/content-sass-modules/manifest.json
similarity index 92%
rename from examples/content-sass-module/manifest.json
rename to examples/content-sass-modules/manifest.json
index cde5bbc3..b0a28f9a 100644
--- a/examples/content-sass-module/manifest.json
+++ b/examples/content-sass-modules/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Content Scripts SASS Module",
+ "name": "Content Scripts Sass Modules",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/content-sass-module/package.json b/examples/content-sass-modules/package.json
similarity index 88%
rename from examples/content-sass-module/package.json
rename to examples/content-sass-modules/package.json
index a7bb0bdd..67f13273 100644
--- a/examples/content-sass-module/package.json
+++ b/examples/content-sass-modules/package.json
@@ -1,6 +1,6 @@
{
"private": true,
- "name": "content-sass-module",
+ "name": "content-sass-modules",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
diff --git a/examples/content-sass-modules/public/logo.svg b/examples/content-sass-modules/public/logo.svg
new file mode 100644
index 00000000..f3f4a52e
--- /dev/null
+++ b/examples/content-sass-modules/public/logo.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/content-sass-module/template.spec.ts b/examples/content-sass-modules/template.spec.ts
similarity index 75%
rename from examples/content-sass-module/template.spec.ts
rename to examples/content-sass-modules/template.spec.ts
index 7fcd9357..c7da3fe7 100644
--- a/examples/content-sass-module/template.spec.ts
+++ b/examples/content-sass-modules/template.spec.ts
@@ -12,28 +12,28 @@ test.beforeAll(async () => {
})
})
-test('should exist an element with the class name content_script-box', async ({
+test('should exist an element with the class name content_script', async ({
page
}) => {
await page.goto('https://extension.js.org/')
- const div = page.locator('body > div.content_script-box')
+ const div = page.locator('body > div.content_script')
await test.expect(div).toBeVisible()
})
test('should exist an h1 element with specified content', async ({page}) => {
await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
- await test.expect(h1).toHaveText('Change the background-color ⬇')
+ const h1 = page.locator('body > div.content_script > h1')
+ await test.expect(h1).toHaveText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
+ const h1 = page.locator('body > div.content_script > h1')
const color = await page.evaluate(
(locator) => {
return window.getComputedStyle(locator!).getPropertyValue('color')
},
await h1.elementHandle()
)
- await test.expect(color).toEqual('rgb(51, 51, 51)')
+ await test.expect(color).toEqual('rgb(201, 201, 201)')
})
diff --git a/examples/content-sass/background.js b/examples/content-sass/background.js
index bfd9ec37..798d5018 100644
--- a/examples/content-sass/background.js
+++ b/examples/content-sass/background.js
@@ -1,21 +1 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
- if (request.action === 'changeBackgroundColor') {
- changeBackgroundColor(request.color, sender.tab.id)
- }
-})
-
-function changeBackgroundColor(color, tabId) {
- chrome.scripting
- .executeScript({
- target: {tabId},
- function: setPageBackgroundColor,
- args: [color]
- })
- .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
- document.body.style.backgroundColor = color
-}
+console.log('Hello from the background script!')
diff --git a/examples/content-sass/content/scripts.js b/examples/content-sass/content/scripts.js
index 847d54fd..6c6f8a75 100644
--- a/examples/content-sass/content/scripts.js
+++ b/examples/content-sass/content/scripts.js
@@ -1,15 +1,16 @@
import './styles.scss'
+import logo from '../images/logo.svg'
console.log('hello from content_scripts')
+// Check if the content has already been added
document.body.innerHTML += `
-
-
-
- Change the background-color ⬇
+
+
+
+ Welcome to your Sass Extension
-
-
+
Learn more about creating cross-browser extensions at
-`
-
-document.getElementById('colorPicker').addEventListener('input', (event) => {
- chrome.runtime
- .sendMessage({
- action: 'changeBackgroundColor',
- color: event.target.value
- })
- .catch(console.error)
-})
+ `
diff --git a/examples/content-sass/content/styles.scss b/examples/content-sass/content/styles.scss
index 092f3152..d1548afe 100644
--- a/examples/content-sass/content/styles.scss
+++ b/examples/content-sass/content/styles.scss
@@ -1,45 +1,37 @@
-.content_script-box {
- background: white;
+.content_script {
+ color: #c9c9c9;
+ background-color: #0a0c10;
position: fixed;
right: 0;
bottom: 0;
z-index: 9;
width: 315px;
- height: 345px;
- margin: 1em;
- padding: 1em;
+ margin: 1rem;
+ padding: 2rem 1rem;
display: flex;
- align-items: center;
- justify-content: center;
flex-direction: column;
gap: 1em;
- box-shadow: 0px 0px 4px 1px #ccc;
+ border-radius: 6px;
}
-.content_script-logo {
- width: 90px;
- align-self: flex-start;
+.content_logo {
+ width: 72px;
}
-.content_script-title {
+.content_title {
font-size: 1.85em;
- color: #333;
line-height: 1.1;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
}
-.content_script-description {
- color: #999;
+.content_description {
+ font-size: small;
}
-.content_script-colorPicker {
- display: block;
- width: 100%;
- height: 50px;
-}
+.content_description a {
+ text-decoration: none;
+ border-bottom: 2px solid #c9c9c9;
+ color: #e5e7eb;
+}
\ No newline at end of file
diff --git a/examples/content-sass/images/logo.svg b/examples/content-sass/images/logo.svg
new file mode 100644
index 00000000..f3f4a52e
--- /dev/null
+++ b/examples/content-sass/images/logo.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/content-sass/manifest.json b/examples/content-sass/manifest.json
index 6289845a..49a99874 100644
--- a/examples/content-sass/manifest.json
+++ b/examples/content-sass/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "content-sass",
+ "name": "Content Scripts Sass",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/content-sass/public/logo.svg b/examples/content-sass/public/logo.svg
index ebe0773a..f3f4a52e 100644
--- a/examples/content-sass/public/logo.svg
+++ b/examples/content-sass/public/logo.svg
@@ -1,3 +1,34 @@
-
-
+
+
+
+
+
+
diff --git a/examples/content-sass/template.spec.ts b/examples/content-sass/template.spec.ts
index 101fc820..073eb710 100644
--- a/examples/content-sass/template.spec.ts
+++ b/examples/content-sass/template.spec.ts
@@ -12,28 +12,28 @@ test.beforeAll(async () => {
})
})
-test('should exist an element with the class name content_script-box', async ({
+test('should exist an element with the class name content_script', async ({
page
}) => {
await page.goto('https://extension.js.org/')
- const div = page.locator('body > div.content_script-box')
+ const div = page.locator('body > div.content_script')
await test.expect(div).toBeVisible()
})
test('should exist an h1 element with specified content', async ({page}) => {
await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
- await test.expect(h1).toHaveText('Change the background-color ⬇')
+ const h1 = page.locator('body > div.content_script > h1')
+ await test.expect(h1).toHaveText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
+ const h1 = page.locator('body > div.content_script > h1')
const color = await page.evaluate(
(locator) => {
return window.getComputedStyle(locator!).getPropertyValue('color')
},
await h1.elementHandle()
)
- await test.expect(color).toEqual('rgb(51, 51, 51)')
+ await test.expect(color).toEqual('rgb(201, 201, 201)')
})
diff --git a/examples/content-shadow-dom/background.js b/examples/content-shadow-dom/background.js
deleted file mode 100644
index bfd9ec37..00000000
--- a/examples/content-shadow-dom/background.js
+++ /dev/null
@@ -1,21 +0,0 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
- if (request.action === 'changeBackgroundColor') {
- changeBackgroundColor(request.color, sender.tab.id)
- }
-})
-
-function changeBackgroundColor(color, tabId) {
- chrome.scripting
- .executeScript({
- target: {tabId},
- function: setPageBackgroundColor,
- args: [color]
- })
- .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
- document.body.style.backgroundColor = color
-}
diff --git a/examples/content-shadow-dom/content/content.js b/examples/content-shadow-dom/content/content.js
deleted file mode 100644
index 8aaa8ec7..00000000
--- a/examples/content-shadow-dom/content/content.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import tailwindBg from '../images/tailwind_bg.png'
-import tailwindLogo from '../images/tailwind.png'
-import chromeWindowBg from '../images/chromeWindow.png'
-
-export function getContentHtml() {
- return `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- This is a content script running Tailwind.css.
-
-
-
-
-
-
-
- `
-}
diff --git a/examples/content-shadow-dom/content/scripts.js b/examples/content-shadow-dom/content/scripts.js
deleted file mode 100644
index 772d5bec..00000000
--- a/examples/content-shadow-dom/content/scripts.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// TODO: This does nothing yet
-
-import './styles.css'
-import {getContentHtml} from './content'
-
-console.log('hello from content_scripts')
-
-document.body.innerHTML += `${getContentHtml()}
`
diff --git a/examples/content-shadow-dom/content/styles.css b/examples/content-shadow-dom/content/styles.css
deleted file mode 100644
index dc79ebb5..00000000
--- a/examples/content-shadow-dom/content/styles.css
+++ /dev/null
@@ -1,10 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-#extension-root {
- position: fixed;
- bottom: 0;
- right: 0;
- z-index: 99999;
-}
diff --git a/examples/content-shadow-dom/images/chromeWindow.png b/examples/content-shadow-dom/images/chromeWindow.png
deleted file mode 100644
index d70571be..00000000
Binary files a/examples/content-shadow-dom/images/chromeWindow.png and /dev/null differ
diff --git a/examples/content-shadow-dom/images/react.png b/examples/content-shadow-dom/images/react.png
deleted file mode 100644
index 9080fddd..00000000
Binary files a/examples/content-shadow-dom/images/react.png and /dev/null differ
diff --git a/examples/content-shadow-dom/images/tailwind.png b/examples/content-shadow-dom/images/tailwind.png
deleted file mode 100644
index 83ed5e12..00000000
Binary files a/examples/content-shadow-dom/images/tailwind.png and /dev/null differ
diff --git a/examples/content-shadow-dom/images/tailwind_bg.png b/examples/content-shadow-dom/images/tailwind_bg.png
deleted file mode 100644
index edc40be8..00000000
Binary files a/examples/content-shadow-dom/images/tailwind_bg.png and /dev/null differ
diff --git a/examples/content-shadow-dom/manifest.json b/examples/content-shadow-dom/manifest.json
deleted file mode 100644
index d4727084..00000000
--- a/examples/content-shadow-dom/manifest.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
- "$schema": "https://json.schemastore.org/chrome-manifest.json",
- "manifest_version": 3,
- "version": "0.0.1",
- "name": "Content Scripts Shadow DOM Template",
- "description": "An Extension.js example.",
- "icons": {
- "48": "images/extension_48.png"
- },
- "permissions": ["activeTab", "scripting"],
- "host_permissions": [""],
- "background": {
- "chromium:service_worker": "background.js",
- "firefox:scripts": ["background.js"]
- },
- "content_scripts": [
- {
- "matches": [""],
- "js": ["content/scripts.js"]
- }
- ]
-}
diff --git a/examples/content-shadow-dom/postcss.config.js b/examples/content-shadow-dom/postcss.config.js
deleted file mode 100644
index 85f717cc..00000000
--- a/examples/content-shadow-dom/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
- plugins: {
- tailwindcss: {},
- autoprefixer: {}
- }
-}
diff --git a/examples/content-shadow-dom/public/logo.svg b/examples/content-shadow-dom/public/logo.svg
deleted file mode 100644
index ebe0773a..00000000
--- a/examples/content-shadow-dom/public/logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/examples/content-shadow-dom/tailwind.config.js b/examples/content-shadow-dom/tailwind.config.js
deleted file mode 100644
index b0814971..00000000
--- a/examples/content-shadow-dom/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- content: ['./content/**/*.js'],
- theme: {
- extend: {}
- },
- plugins: []
-}
diff --git a/examples/content-shadow-dom/template.spec.ts b/examples/content-shadow-dom/template.spec.ts
deleted file mode 100644
index 2a1e3b50..00000000
--- a/examples/content-shadow-dom/template.spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import path from 'path'
-import {execSync} from 'child_process'
-import {extensionFixtures} from '../extension-fixtures'
-
-const exampleDir = 'examples/content-shadow-dom'
-const pathToExtension = path.join(__dirname, `dist/chrome`)
-const test = extensionFixtures(pathToExtension, true)
-
-test.beforeAll(async () => {
- execSync(`pnpm extension build ${exampleDir}`, {
- cwd: path.join(__dirname, '..')
- })
-})
-
-test('should exist an element with the class name extension-root', async ({
- page
-}) => {
- await page.goto('https://extension.js.org/')
- const div = page.locator('#extension-root')
- await test.expect(div).toBeVisible()
-})
-
-test('should exist an h2 element with specified content', async ({page}) => {
- await page.goto('https://extension.js.org/')
- const h2 = page.locator('#extension-root h2')
- await test
- .expect(h2)
- .toHaveText('This is a content script running Tailwind.css.')
-})
-
-test('should exist a default color value', async ({page}) => {
- await page.goto('https://extension.js.org/')
- const h2 = page.locator('#extension-root h2')
- const color = await page.evaluate(
- (locator) => {
- return window.getComputedStyle(locator!).getPropertyValue('color')
- },
- await h2.elementHandle()
- )
- await test.expect(color).toEqual('rgb(255, 255, 255)')
-})
-
-test('should load all images successfully', async ({page}) => {
- await page.goto('https://extension.js.org/')
- const images = page.locator('#extension-root img')
- const imageElements = await images.all()
-
- const results: boolean[] = []
-
- for (const image of imageElements) {
- const naturalWidth = await page.evaluate(
- (img) => {
- return img ? (img as HTMLImageElement).naturalWidth : 0
- },
- await image.elementHandle()
- )
-
- const naturalHeight = await page.evaluate(
- (img) => {
- return img ? (img as HTMLImageElement).naturalHeight : 0
- },
- await image.elementHandle()
- )
-
- const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
- results.push(loadedSuccessfully)
- }
-
- await test.expect(results.every((result) => result)).toBeTruthy()
-})
diff --git a/examples/content-tailwind/background.js b/examples/content-tailwind/background.js
index bfd9ec37..798d5018 100644
--- a/examples/content-tailwind/background.js
+++ b/examples/content-tailwind/background.js
@@ -1,21 +1 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
- if (request.action === 'changeBackgroundColor') {
- changeBackgroundColor(request.color, sender.tab.id)
- }
-})
-
-function changeBackgroundColor(color, tabId) {
- chrome.scripting
- .executeScript({
- target: {tabId},
- function: setPageBackgroundColor,
- args: [color]
- })
- .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
- document.body.style.backgroundColor = color
-}
+console.log('Hello from the background script!')
diff --git a/examples/content-tailwind/manifest.json b/examples/content-tailwind/manifest.json
index a415ab3b..0ac8f47f 100644
--- a/examples/content-tailwind/manifest.json
+++ b/examples/content-tailwind/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Content Scripts Tailwind Template",
+ "name": "Content Scripts Tailwind",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/content-typescript/background.ts b/examples/content-typescript/background.ts
index 3f38062b..bcc3c653 100644
--- a/examples/content-typescript/background.ts
+++ b/examples/content-typescript/background.ts
@@ -1,26 +1 @@
-console.log('hello from background script')
-
-// eslint-disable-next-line no-undef
-chrome.runtime.onMessage.addListener((request, sender) => {
- if (request.action === 'changeBackgroundColor') {
- handleChangeBackgroundColor(request.color, sender.tab?.id)
- }
-})
-
-function handleChangeBackgroundColor(color: string, tabId: number | undefined) {
- if (!tabId) {
- return
- }
-
- chrome.scripting
- .executeScript({
- target: {tabId},
- func: setPageBackgroundColor,
- args: [color]
- })
- .catch(console.error)
-}
-
-function setPageBackgroundColor(color: string) {
- document.body.style.backgroundColor = color
-}
+console.log('Hello from the background!')
diff --git a/examples/content-typescript/content/scripts.ts b/examples/content-typescript/content/scripts.ts
index 6e92e5ab..139825c3 100644
--- a/examples/content-typescript/content/scripts.ts
+++ b/examples/content-typescript/content/scripts.ts
@@ -1,15 +1,15 @@
import './styles.css'
+import logo from '../images/logo.svg'
console.log('hello from content_scripts')
document.body.innerHTML += `
-
-
-
- Change the background-color ⬇
+
+
+
+ Welcome to your TypeScript Extension
-
-
+
Learn more about creating cross-browser extensions at
`
-
-document.getElementById('colorPicker')?.addEventListener('input', (event) => {
- chrome.runtime
- .sendMessage({
- action: 'changeBackgroundColor',
- // @ts-expect-error
- color: event.target?.value
- })
- .catch(console.error)
-})
diff --git a/examples/content-typescript/content/styles.css b/examples/content-typescript/content/styles.css
index 092f3152..2049a65c 100644
--- a/examples/content-typescript/content/styles.css
+++ b/examples/content-typescript/content/styles.css
@@ -1,45 +1,37 @@
-.content_script-box {
- background: white;
+.content_script {
+ color: #c9c9c9;
+ background-color: #0a0c10;
position: fixed;
right: 0;
bottom: 0;
z-index: 9;
width: 315px;
- height: 345px;
- margin: 1em;
- padding: 1em;
+ margin: 1rem;
+ padding: 2rem 1rem;
display: flex;
- align-items: center;
- justify-content: center;
flex-direction: column;
gap: 1em;
- box-shadow: 0px 0px 4px 1px #ccc;
+ border-radius: 6px;
}
-.content_script-logo {
- width: 90px;
- align-self: flex-start;
+.content_logo {
+ width: 72px;
}
-.content_script-title {
+.content_title {
font-size: 1.85em;
- color: #333;
line-height: 1.1;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
}
-.content_script-description {
- color: #999;
+.content_description {
+ font-size: small;
}
-.content_script-colorPicker {
- display: block;
- width: 100%;
- height: 50px;
+.content_description a {
+ text-decoration: none;
+ border-bottom: 2px solid #c9c9c9;
+ color: #e5e7eb;
}
diff --git a/examples/content-typescript/images/logo.svg b/examples/content-typescript/images/logo.svg
new file mode 100644
index 00000000..7fe14ba4
--- /dev/null
+++ b/examples/content-typescript/images/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/content-typescript/manifest.json b/examples/content-typescript/manifest.json
index 6a81adc8..f0d062dc 100644
--- a/examples/content-typescript/manifest.json
+++ b/examples/content-typescript/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Content Scripts TypeScript Template",
+ "name": "Content Scripts Typescript",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/content-typescript/public/logo.svg b/examples/content-typescript/public/logo.svg
new file mode 100644
index 00000000..7fe14ba4
--- /dev/null
+++ b/examples/content-typescript/public/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/content-typescript/template.spec.ts b/examples/content-typescript/template.spec.ts
index b91cb570..45e332f9 100644
--- a/examples/content-typescript/template.spec.ts
+++ b/examples/content-typescript/template.spec.ts
@@ -12,28 +12,28 @@ test.beforeAll(async () => {
})
})
-test('should exist an element with the class name content_script-box', async ({
+test('should exist an element with the class name content_script', async ({
page
}) => {
await page.goto('https://extension.js.org/')
- const div = page.locator('body > div.content_script-box')
+ const div = page.locator('body > div.content_script')
await test.expect(div).toBeVisible()
})
test('should exist an h1 element with specified content', async ({page}) => {
await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
- await test.expect(h1).toHaveText('Change the background-color ⬇')
+ const h1 = page.locator('body > div.content_script > h1')
+ await test.expect(h1).toHaveText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
+ const h1 = page.locator('body > div.content_script > h1')
const color = await page.evaluate(
(locator) => {
return window.getComputedStyle(locator!).getPropertyValue('color')
},
await h1.elementHandle()
)
- await test.expect(color).toEqual('rgb(51, 51, 51)')
+ await test.expect(color).toEqual('rgb(201, 201, 201)')
})
diff --git a/examples/content-vue/content/ContentApp.vue b/examples/content-vue/content/ContentApp.vue
index 9a768125..e99f663c 100644
--- a/examples/content-vue/content/ContentApp.vue
+++ b/examples/content-vue/content/ContentApp.vue
@@ -32,7 +32,7 @@ const setIsDialogOpen = (value: boolean) => (isdialogOpen.value = value)
>
+
diff --git a/examples/content-vue/public/vue.svg b/examples/content-vue/images/logo.svg
similarity index 100%
rename from examples/content-vue/public/vue.svg
rename to examples/content-vue/images/logo.svg
diff --git a/examples/content-vue/manifest.json b/examples/content-vue/manifest.json
index aec108a7..2f01063e 100644
--- a/examples/content-vue/manifest.json
+++ b/examples/content-vue/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Content Scripts Vue Template",
+ "name": "Content Scripts Vue",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/content-vue/public/logo.svg b/examples/content-vue/public/logo.svg
new file mode 100644
index 00000000..d4d5f0bd
--- /dev/null
+++ b/examples/content-vue/public/logo.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
diff --git a/examples/content/background.js b/examples/content/background.js
index bfd9ec37..798d5018 100644
--- a/examples/content/background.js
+++ b/examples/content/background.js
@@ -1,21 +1 @@
-console.log('hello from background script')
-
-chrome.runtime.onMessage.addListener((request, sender) => {
- if (request.action === 'changeBackgroundColor') {
- changeBackgroundColor(request.color, sender.tab.id)
- }
-})
-
-function changeBackgroundColor(color, tabId) {
- chrome.scripting
- .executeScript({
- target: {tabId},
- function: setPageBackgroundColor,
- args: [color]
- })
- .catch(console.error)
-}
-
-function setPageBackgroundColor(color) {
- document.body.style.backgroundColor = color
-}
+console.log('Hello from the background script!')
diff --git a/examples/content/content/scripts.js b/examples/content/content/scripts.js
index 1f455709..d010d8ab 100644
--- a/examples/content/content/scripts.js
+++ b/examples/content/content/scripts.js
@@ -1,15 +1,16 @@
import './styles.css'
+import logo from '../images/logo.svg'
console.log('hello from content_scripts')
+// Check if the content has already been added
document.body.innerHTML += `
-
-
-
- Change the background-color ⬇
+
+
+
+ Welcome to your Content Script Extension
-
-
+
Learn more about creating cross-browser extensions at
-`
-
-document.getElementById('colorPicker').addEventListener('input', (event) => {
- chrome.runtime
- .sendMessage({
- action: 'changeBackgroundColor',
- color: event.target.value
- })
- .catch(console.error)
-})
+ `
diff --git a/examples/content/content/styles.css b/examples/content/content/styles.css
index 3e90a639..2049a65c 100644
--- a/examples/content/content/styles.css
+++ b/examples/content/content/styles.css
@@ -1,54 +1,37 @@
-.content_script-box {
- background: white;
+.content_script {
+ color: #c9c9c9;
+ background-color: #0a0c10;
position: fixed;
right: 0;
bottom: 0;
z-index: 9;
width: 315px;
- height: 345px;
- margin: 1em;
- padding: 1em;
+ margin: 1rem;
+ padding: 2rem 1rem;
display: flex;
- align-items: center;
- justify-content: center;
flex-direction: column;
gap: 1em;
- box-shadow: 0px 0px 4px 1px #ccc;
+ border-radius: 6px;
}
-.content_script-logo {
- width: 90px;
- align-self: flex-start;
- filter: grayscale(1);
- transition:
- filter 2s,
- border-color 2s;
+.content_logo {
+ width: 72px;
}
-.content_script-logo:hover {
- filter: grayscale(0);
- border-color: aquamarine;
-}
-
-.content_script-title {
+.content_title {
font-size: 1.85em;
- color: #333;
line-height: 1.1;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
}
-.content_script-description {
- color: #999;
+.content_description {
+ font-size: small;
}
-.content_script-colorPicker {
- display: block;
- width: 100%;
- height: 50px;
+.content_description a {
+ text-decoration: none;
+ border-bottom: 2px solid #c9c9c9;
+ color: #e5e7eb;
}
diff --git a/examples/config-stylelint/public/logo.svg b/examples/content/images/logo.svg
similarity index 100%
rename from examples/config-stylelint/public/logo.svg
rename to examples/content/images/logo.svg
diff --git a/examples/content/manifest.json b/examples/content/manifest.json
index 503d2eba..161123ce 100644
--- a/examples/content/manifest.json
+++ b/examples/content/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Content Scripts Template",
+ "name": "Content Script",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/content/public/logo.svg b/examples/content/public/logo.svg
deleted file mode 100644
index ebe0773a..00000000
--- a/examples/content/public/logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/examples/content/template.spec.ts b/examples/content/template.spec.ts
index 164a642d..53fc4b40 100644
--- a/examples/content/template.spec.ts
+++ b/examples/content/template.spec.ts
@@ -1,39 +1,77 @@
import path from 'path'
import {execSync} from 'child_process'
import {extensionFixtures} from '../extension-fixtures'
+import {extensionFixturesFirefox} from '../extension-fixtures-firefox'
+import {
+ TestType,
+ PlaywrightTestArgs,
+ PlaywrightWorkerArgs
+} from '@playwright/test'
const exampleDir = 'examples/content'
-const pathToExtension = path.join(__dirname, `dist/chrome`)
-const test = extensionFixtures(pathToExtension, true)
+const pathToChromeExtension = path.join(__dirname, `dist/chrome`)
+const pathToFirefoxExtension = path.join(__dirname, `dist/firefox`)
-test.beforeAll(async () => {
- execSync(`pnpm extension build ${exampleDir}`, {
- cwd: path.join(__dirname, '..')
+// Use Playwright's default test arguments (PlaywrightTestArgs, PlaywrightWorkerArgs)
+const testChrome: TestType =
+ extensionFixtures(pathToChromeExtension, true)
+const testFirefox: TestType =
+ extensionFixturesFirefox(pathToFirefoxExtension, true)
+
+interface TestBrowsersType {
+ name: string
+ test: TestType
+ extensionPath: string
+}
+
+const browsers: TestBrowsersType[] = [
+ {
+ name: 'chromium',
+ test: testChrome,
+ extensionPath: pathToChromeExtension
+ },
+ {
+ name: 'firefox',
+ test: testFirefox,
+ extensionPath: pathToFirefoxExtension
+ }
+]
+
+browsers.forEach(({name, test}: TestBrowsersType) => {
+ test.beforeAll(async () => {
+ // Build the extension before running tests
+ execSync(`pnpm extension build ${exampleDir} --polyfill`, {
+ cwd: path.join(__dirname, '..')
+ })
})
-})
-test('should exist an element with the class name content_script-box', async ({
- page
-}) => {
- await page.goto('https://extension.js.org/')
- const div = page.locator('body > div.content_script-box')
- await test.expect(div).toBeVisible()
-})
+ test(`as ${name} extension - should exist an element with the class name content_script`, async ({
+ page
+ }) => {
+ await page.goto('https://extension.js.org/')
+ const div = page.locator('body > div.content_script')
+ await test.expect(div).toBeVisible()
+ })
-test('should exist an h1 element with specified content', async ({page}) => {
- await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
- await test.expect(h1).toHaveText('Change the background-color ⬇')
-})
+ test(`as ${name} extension - should exist an h1 element with specified content`, async ({
+ page
+ }) => {
+ await page.goto('https://extension.js.org/')
+ const h1 = page.locator('body > div.content_script > h1')
+ await test.expect(h1).toHaveText('Change the background-color ⬇')
+ })
-test('should exist a default color value', async ({page}) => {
- await page.goto('https://extension.js.org/')
- const h1 = page.locator('body > div.content_script-box > h1')
- const color = await page.evaluate(
- (locator) => {
- return window.getComputedStyle(locator!).getPropertyValue('color')
- },
- await h1.elementHandle()
- )
- await test.expect(color).toEqual('rgb(51, 51, 51)')
+ test(`as ${name} extension - should exist a default color value`, async ({
+ page
+ }) => {
+ await page.goto('https://extension.js.org/')
+ const h1 = page.locator('body > div.content_script > h1')
+ const color = await page.evaluate(
+ (locator) => {
+ return window.getComputedStyle(locator!).getPropertyValue('color')
+ },
+ await h1.elementHandle()
+ )
+ await test.expect(color).toEqual('rgb(51, 51, 51)')
+ })
})
diff --git a/examples/declarative_net_request/manifest.json b/examples/declarative_net_request/manifest.json
index a2a374ed..157e471d 100644
--- a/examples/declarative_net_request/manifest.json
+++ b/examples/declarative_net_request/manifest.json
@@ -1,5 +1,5 @@
{
- "name": "Declarative Net Request Template",
+ "name": "Declarative_net_request",
"version": "0.0.1",
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
diff --git a/examples/init/manifest.json b/examples/init/manifest.json
index 8f4be86f..10a19048 100644
--- a/examples/init/manifest.json
+++ b/examples/init/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Init Template",
+ "name": "Init",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/locales/action/scripts.js b/examples/locales/action/scripts.js
deleted file mode 100644
index 573ffae1..00000000
--- a/examples/locales/action/scripts.js
+++ /dev/null
@@ -1,3 +0,0 @@
-document.getElementById('title').textContent = chrome.i18n.getMessage('title')
-document.getElementById('learnMore').textContent =
- chrome.i18n.getMessage('learnMore')
diff --git a/examples/locales/action/styles.css b/examples/locales/action/styles.css
deleted file mode 100644
index 69a24316..00000000
--- a/examples/locales/action/styles.css
+++ /dev/null
@@ -1,87 +0,0 @@
-html {
- font-size: 62.5%;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-}
-
-body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: calc(100vh - 4rem);
- min-width: 300px;
- padding: 2rem;
- font-size: 1.8rem;
- line-height: 1.618;
- max-width: 38em;
- margin: auto;
- color: #c9c9c9;
- background-color: #0A0C10;
-}
-
-@media (max-width: 684px) {
- body {
- font-size: 1.53rem;
- }
-}
-
-@media (max-width: 382px) {
- body {
- font-size: 1.35rem;
- }
-}
-
-h1 {
- line-height: 1.1;
- font-weight: 700;
- margin-bottom: 1.5rem;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
- font-size: 4.7em;
-}
-
-@media (max-width: 684px) {
- h1 {
- font-size: 2.7em;
- }
-}
-
-p {
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-a {
- text-decoration: none;
- border-bottom: 2px solid #c9c9c9;
- color: #e5e7eb;
-}
-
-
-img {
- height: auto;
- max-width: 100%;
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-@media (max-width: 684px) {
- img {
- margin-top: 2rem;
- margin-bottom: 1rem;
- }
-}
-
-body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: calc(100vh - 4rem);
-}
-
-header > div {
- display: flex;
- align-items: center;
-}
\ No newline at end of file
diff --git a/examples/locales/public/extension.svg b/examples/locales/public/extension.svg
deleted file mode 100644
index ebe0773a..00000000
--- a/examples/locales/public/extension.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/examples/config-stylelint/.gitignore b/examples/new-config-babel/.gitignore
similarity index 100%
rename from examples/config-stylelint/.gitignore
rename to examples/new-config-babel/.gitignore
diff --git a/examples/config-babel/babel.config.json b/examples/new-config-babel/babel.config.json
similarity index 100%
rename from examples/config-babel/babel.config.json
rename to examples/new-config-babel/babel.config.json
diff --git a/examples/config-babel/extension.config.js b/examples/new-config-babel/extension.config.js
similarity index 100%
rename from examples/config-babel/extension.config.js
rename to examples/new-config-babel/extension.config.js
diff --git a/examples/config-stylelint/images/extension_48.png b/examples/new-config-babel/images/extension_48.png
similarity index 100%
rename from examples/config-stylelint/images/extension_48.png
rename to examples/new-config-babel/images/extension_48.png
diff --git a/examples/config-stylelint/manifest.json b/examples/new-config-babel/manifest.json
similarity index 89%
rename from examples/config-stylelint/manifest.json
rename to examples/new-config-babel/manifest.json
index a152e526..9addd8b4 100644
--- a/examples/config-stylelint/manifest.json
+++ b/examples/new-config-babel/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Stylelint Template",
+ "name": "New Tab Config Babel",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/config-babel/newtab/index.html b/examples/new-config-babel/newtab/index.html
similarity index 100%
rename from examples/config-babel/newtab/index.html
rename to examples/new-config-babel/newtab/index.html
diff --git a/examples/new-config-babel/newtab/scripts.js b/examples/new-config-babel/newtab/scripts.js
new file mode 100644
index 00000000..7fcefeb3
--- /dev/null
+++ b/examples/new-config-babel/newtab/scripts.js
@@ -0,0 +1 @@
+console.log('Hello from the new tab page!')
diff --git a/examples/config-babel/newtab/styles.css b/examples/new-config-babel/newtab/styles.css
similarity index 100%
rename from examples/config-babel/newtab/styles.css
rename to examples/new-config-babel/newtab/styles.css
diff --git a/examples/config-babel/package.json b/examples/new-config-babel/package.json
similarity index 92%
rename from examples/config-babel/package.json
rename to examples/new-config-babel/package.json
index 52bc7389..fa0d6b6a 100644
--- a/examples/config-babel/package.json
+++ b/examples/new-config-babel/package.json
@@ -1,6 +1,6 @@
{
"private": true,
- "name": "config-babel",
+ "name": "new-config-babel",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
diff --git a/examples/config-babel/public/logo.png b/examples/new-config-babel/public/logo.png
similarity index 100%
rename from examples/config-babel/public/logo.png
rename to examples/new-config-babel/public/logo.png
diff --git a/examples/content-css-module/.gitignore b/examples/new-config-eslint/.gitignore
similarity index 100%
rename from examples/content-css-module/.gitignore
rename to examples/new-config-eslint/.gitignore
diff --git a/examples/config-eslint/eslint.config.mjs b/examples/new-config-eslint/eslint.config.mjs
similarity index 100%
rename from examples/config-eslint/eslint.config.mjs
rename to examples/new-config-eslint/eslint.config.mjs
diff --git a/examples/content-css-module/images/extension_48.png b/examples/new-config-eslint/images/extension_48.png
similarity index 100%
rename from examples/content-css-module/images/extension_48.png
rename to examples/new-config-eslint/images/extension_48.png
diff --git a/examples/config-eslint/manifest.json b/examples/new-config-eslint/manifest.json
similarity index 88%
rename from examples/config-eslint/manifest.json
rename to examples/new-config-eslint/manifest.json
index 25304669..1bac6e20 100644
--- a/examples/config-eslint/manifest.json
+++ b/examples/new-config-eslint/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "ESLint Template",
+ "name": "New Tab Config Eslint",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/config-eslint/newtab/index.html b/examples/new-config-eslint/newtab/index.html
similarity index 100%
rename from examples/config-eslint/newtab/index.html
rename to examples/new-config-eslint/newtab/index.html
diff --git a/examples/config-eslint/newtab/scripts.ts b/examples/new-config-eslint/newtab/scripts.ts
similarity index 100%
rename from examples/config-eslint/newtab/scripts.ts
rename to examples/new-config-eslint/newtab/scripts.ts
diff --git a/examples/config-eslint/newtab/styles.css b/examples/new-config-eslint/newtab/styles.css
similarity index 100%
rename from examples/config-eslint/newtab/styles.css
rename to examples/new-config-eslint/newtab/styles.css
diff --git a/examples/config-eslint/package.json b/examples/new-config-eslint/package.json
similarity index 93%
rename from examples/config-eslint/package.json
rename to examples/new-config-eslint/package.json
index ed38f1a3..4dd04adc 100644
--- a/examples/config-eslint/package.json
+++ b/examples/new-config-eslint/package.json
@@ -1,6 +1,6 @@
{
"private": true,
- "name": "config-eslint",
+ "name": "new-config-eslint",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
diff --git a/examples/config-eslint/public/logo.svg b/examples/new-config-eslint/public/logo.svg
similarity index 100%
rename from examples/config-eslint/public/logo.svg
rename to examples/new-config-eslint/public/logo.svg
diff --git a/examples/config-eslint/tsconfig.json b/examples/new-config-eslint/tsconfig.json
similarity index 100%
rename from examples/config-eslint/tsconfig.json
rename to examples/new-config-eslint/tsconfig.json
diff --git a/examples/content-less-module/.gitignore b/examples/new-config-lint/.gitignore
similarity index 100%
rename from examples/content-less-module/.gitignore
rename to examples/new-config-lint/.gitignore
diff --git a/examples/config-lint/.prettierrc b/examples/new-config-lint/.prettierrc
similarity index 100%
rename from examples/config-lint/.prettierrc
rename to examples/new-config-lint/.prettierrc
diff --git a/examples/config-lint/.stylelintrc.json b/examples/new-config-lint/.stylelintrc.json
similarity index 100%
rename from examples/config-lint/.stylelintrc.json
rename to examples/new-config-lint/.stylelintrc.json
diff --git a/examples/config-lint/eslint.config.mjs b/examples/new-config-lint/eslint.config.mjs
similarity index 100%
rename from examples/config-lint/eslint.config.mjs
rename to examples/new-config-lint/eslint.config.mjs
diff --git a/examples/content-less-module/images/extension_48.png b/examples/new-config-lint/images/extension_48.png
similarity index 100%
rename from examples/content-less-module/images/extension_48.png
rename to examples/new-config-lint/images/extension_48.png
diff --git a/examples/config-lint/manifest.json b/examples/new-config-lint/manifest.json
similarity index 89%
rename from examples/config-lint/manifest.json
rename to examples/new-config-lint/manifest.json
index e7235ba3..fb1a7768 100644
--- a/examples/config-lint/manifest.json
+++ b/examples/new-config-lint/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Lint Template",
+ "name": "New Tab Config Lint",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/config-lint/newtab/index.html b/examples/new-config-lint/newtab/index.html
similarity index 100%
rename from examples/config-lint/newtab/index.html
rename to examples/new-config-lint/newtab/index.html
diff --git a/examples/config-lint/newtab/scripts.ts b/examples/new-config-lint/newtab/scripts.ts
similarity index 100%
rename from examples/config-lint/newtab/scripts.ts
rename to examples/new-config-lint/newtab/scripts.ts
diff --git a/examples/config-lint/newtab/styles.css b/examples/new-config-lint/newtab/styles.css
similarity index 100%
rename from examples/config-lint/newtab/styles.css
rename to examples/new-config-lint/newtab/styles.css
diff --git a/examples/config-lint/package.json b/examples/new-config-lint/package.json
similarity index 95%
rename from examples/config-lint/package.json
rename to examples/new-config-lint/package.json
index aa3b861f..bb7d0107 100644
--- a/examples/config-lint/package.json
+++ b/examples/new-config-lint/package.json
@@ -1,6 +1,6 @@
{
"private": true,
- "name": "config-lint",
+ "name": "new-config-lint",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
diff --git a/examples/content-css-module/public/logo.svg b/examples/new-config-lint/public/logo.svg
similarity index 100%
rename from examples/content-css-module/public/logo.svg
rename to examples/new-config-lint/public/logo.svg
diff --git a/examples/config-lint/tsconfig.json b/examples/new-config-lint/tsconfig.json
similarity index 100%
rename from examples/config-lint/tsconfig.json
rename to examples/new-config-lint/tsconfig.json
diff --git a/examples/content-sass-module/.gitignore b/examples/new-config-prettier/.gitignore
similarity index 100%
rename from examples/content-sass-module/.gitignore
rename to examples/new-config-prettier/.gitignore
diff --git a/examples/config-prettier/.prettierrc b/examples/new-config-prettier/.prettierrc
similarity index 100%
rename from examples/config-prettier/.prettierrc
rename to examples/new-config-prettier/.prettierrc
diff --git a/examples/content-sass-module/images/extension_48.png b/examples/new-config-prettier/images/extension_48.png
similarity index 100%
rename from examples/content-sass-module/images/extension_48.png
rename to examples/new-config-prettier/images/extension_48.png
diff --git a/examples/new-config-prettier/manifest.json b/examples/new-config-prettier/manifest.json
new file mode 100644
index 00000000..c37d0de3
--- /dev/null
+++ b/examples/new-config-prettier/manifest.json
@@ -0,0 +1,13 @@
+{
+ "$schema": "https://json.schemastore.org/chrome-manifest.json",
+ "manifest_version": 3,
+ "version": "0.0.1",
+ "name": "New Tab Config Prettier",
+ "description": "An Extension.js example.",
+ "icons": {
+ "48": "images/extension_48.png"
+ },
+ "chrome_url_overrides": {
+ "newtab": "newtab/index.html"
+ }
+}
diff --git a/examples/config-prettier/newtab/index.html b/examples/new-config-prettier/newtab/index.html
similarity index 100%
rename from examples/config-prettier/newtab/index.html
rename to examples/new-config-prettier/newtab/index.html
diff --git a/examples/config-prettier/newtab/scripts.ts b/examples/new-config-prettier/newtab/scripts.ts
similarity index 100%
rename from examples/config-prettier/newtab/scripts.ts
rename to examples/new-config-prettier/newtab/scripts.ts
diff --git a/examples/config-prettier/newtab/styles.css b/examples/new-config-prettier/newtab/styles.css
similarity index 100%
rename from examples/config-prettier/newtab/styles.css
rename to examples/new-config-prettier/newtab/styles.css
diff --git a/examples/config-prettier/package.json b/examples/new-config-prettier/package.json
similarity index 91%
rename from examples/config-prettier/package.json
rename to examples/new-config-prettier/package.json
index 871a1d73..855f199c 100644
--- a/examples/config-prettier/package.json
+++ b/examples/new-config-prettier/package.json
@@ -1,6 +1,6 @@
{
"private": true,
- "name": "config-prettier",
+ "name": "new-config-prettier",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
diff --git a/examples/config-prettier/public/logo.svg b/examples/new-config-prettier/public/logo.svg
similarity index 100%
rename from examples/config-prettier/public/logo.svg
rename to examples/new-config-prettier/public/logo.svg
diff --git a/examples/config-prettier/tsconfig.json b/examples/new-config-prettier/tsconfig.json
similarity index 100%
rename from examples/config-prettier/tsconfig.json
rename to examples/new-config-prettier/tsconfig.json
diff --git a/examples/content-shadow-dom/.gitignore b/examples/new-config-stylelint/.gitignore
similarity index 100%
rename from examples/content-shadow-dom/.gitignore
rename to examples/new-config-stylelint/.gitignore
diff --git a/examples/config-stylelint/.stylelintrc.json b/examples/new-config-stylelint/.stylelintrc.json
similarity index 100%
rename from examples/config-stylelint/.stylelintrc.json
rename to examples/new-config-stylelint/.stylelintrc.json
diff --git a/examples/content-shadow-dom/images/extension_48.png b/examples/new-config-stylelint/images/extension_48.png
similarity index 100%
rename from examples/content-shadow-dom/images/extension_48.png
rename to examples/new-config-stylelint/images/extension_48.png
diff --git a/examples/config-prettier/manifest.json b/examples/new-config-stylelint/manifest.json
similarity index 88%
rename from examples/config-prettier/manifest.json
rename to examples/new-config-stylelint/manifest.json
index 6a1a3796..7e25a60b 100644
--- a/examples/config-prettier/manifest.json
+++ b/examples/new-config-stylelint/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Config Prettier Template",
+ "name": "New Tab Config Stylelint",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/config-stylelint/newtab/index.html b/examples/new-config-stylelint/newtab/index.html
similarity index 100%
rename from examples/config-stylelint/newtab/index.html
rename to examples/new-config-stylelint/newtab/index.html
diff --git a/examples/new-config-stylelint/newtab/scripts.js b/examples/new-config-stylelint/newtab/scripts.js
new file mode 100644
index 00000000..7fcefeb3
--- /dev/null
+++ b/examples/new-config-stylelint/newtab/scripts.js
@@ -0,0 +1 @@
+console.log('Hello from the new tab page!')
diff --git a/examples/config-stylelint/newtab/styles.scss b/examples/new-config-stylelint/newtab/styles.scss
similarity index 100%
rename from examples/config-stylelint/newtab/styles.scss
rename to examples/new-config-stylelint/newtab/styles.scss
diff --git a/examples/config-stylelint/package.json b/examples/new-config-stylelint/package.json
similarity index 92%
rename from examples/config-stylelint/package.json
rename to examples/new-config-stylelint/package.json
index 67e4e045..0844f520 100644
--- a/examples/config-stylelint/package.json
+++ b/examples/new-config-stylelint/package.json
@@ -1,6 +1,6 @@
{
"private": true,
- "name": "config-stylelint",
+ "name": "new-config-stylelint",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
diff --git a/examples/content-less-module/public/logo.svg b/examples/new-config-stylelint/public/logo.svg
similarity index 100%
rename from examples/content-less-module/public/logo.svg
rename to examples/new-config-stylelint/public/logo.svg
diff --git a/examples/new-crypto/manifest.json b/examples/new-crypto/manifest.json
index ffffb0e2..56ed29fd 100644
--- a/examples/new-crypto/manifest.json
+++ b/examples/new-crypto/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab Crypto Template",
+ "name": "New Tab Crypto",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-crypto/newtab/styles.css b/examples/new-crypto/newtab/styles.css
index 3de01a9d..51affe2c 100644
--- a/examples/new-crypto/newtab/styles.css
+++ b/examples/new-crypto/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-env-esm/manifest.json b/examples/new-env-esm/manifest.json
index 652f8e2d..10f32347 100644
--- a/examples/new-env-esm/manifest.json
+++ b/examples/new-env-esm/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab ESM + .env Template",
+ "name": "New Tab Env Esm",
"description": "$EXTENSION_PUBLIC_DESCRIPTION_TEXT",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-env-esm/newtab/index.html b/examples/new-env-esm/newtab/index.html
index e877c4bf..b25c83d9 100644
--- a/examples/new-env-esm/newtab/index.html
+++ b/examples/new-env-esm/newtab/index.html
@@ -3,7 +3,7 @@
- New ESModule + .env Extension
+ .env ESModule Extension
@@ -16,7 +16,7 @@
width="120px"
/>
- Welcome to your New ESModule + .env Extension
+ Welcome to your .env ESModule Extension
Learn more about creating cross-browser extensions at
diff --git a/examples/new-env-esm/newtab/scripts.mjs b/examples/new-env-esm/newtab/scripts.mjs
index 29d939dc..7fcefeb3 100644
--- a/examples/new-env-esm/newtab/scripts.mjs
+++ b/examples/new-env-esm/newtab/scripts.mjs
@@ -1,11 +1 @@
-function getManifest() {
- return chrome.runtime.getManifest()
-}
-
-const manifestData = getManifest()
-
-console.table({
- name: manifestData.name,
- version: manifestData.version,
- description: import.meta.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT
-})
+console.log('Hello from the new tab page!')
diff --git a/examples/new-env-esm/newtab/styles.css b/examples/new-env-esm/newtab/styles.css
index 0fb72398..7d8a01f2 100644
--- a/examples/new-env-esm/newtab/styles.css
+++ b/examples/new-env-esm/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-env-esm/template.spec.mjs b/examples/new-env-esm/template.spec.mjs
index 2620ce5a..4740e1b8 100644
--- a/examples/new-env-esm/template.spec.mjs
+++ b/examples/new-env-esm/template.spec.mjs
@@ -23,9 +23,7 @@ test('should exist an element with the welcome message text', async ({
}) => {
await page.goto('chrome://newtab/')
const h1 = page.locator('h1')
- await test
- .expect(h1)
- .toHaveText('Welcome to your New ESModule + .env Extension')
+ await test.expect(h1).toHaveText('Welcome to your .env ESModule Extension')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-env/manifest.json b/examples/new-env/manifest.json
index 8d8fba76..f622fae2 100644
--- a/examples/new-env/manifest.json
+++ b/examples/new-env/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab .env Template",
+ "name": "New Tab Env",
"description": "$EXTENSION_PUBLIC_DESCRIPTION_TEXT",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-env/newtab/scripts.ts b/examples/new-env/newtab/scripts.ts
index 94404b12..7fcefeb3 100644
--- a/examples/new-env/newtab/scripts.ts
+++ b/examples/new-env/newtab/scripts.ts
@@ -1,10 +1 @@
-function getManifestData() {
- return chrome.runtime.getManifest()
-}
-const extensionManifest = getManifestData()
-
-console.table({
- name: extensionManifest.name,
- version: extensionManifest.version,
- description: process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT
-})
+console.log('Hello from the new tab page!')
diff --git a/examples/new-env/newtab/styles.css b/examples/new-env/newtab/styles.css
index f888963c..da24ea2a 100644
--- a/examples/new-env/newtab/styles.css
+++ b/examples/new-env/newtab/styles.css
@@ -16,7 +16,7 @@ body {
max-width: 38em;
margin: auto;
color: #c9c9c9;
- background-color: #0A0C10;
+ background-color: #0a0c10;
}
@media (max-width: 684px) {
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.5em;
}
@@ -59,7 +58,6 @@ a {
color: #e5e7eb;
}
-
img {
height: auto;
max-width: 100%;
@@ -81,7 +79,7 @@ body {
height: calc(100vh - 4rem);
}
-header>div {
+header > div {
display: flex;
align-items: center;
-}
\ No newline at end of file
+}
diff --git a/examples/new-esm/manifest.json b/examples/new-esm/manifest.json
index 4895f213..564d2b26 100644
--- a/examples/new-esm/manifest.json
+++ b/examples/new-esm/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab ESM Template",
+ "name": "New Tab Esm",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-esm/newtab/index.html b/examples/new-esm/newtab/index.html
index 042f2fd9..584a7551 100644
--- a/examples/new-esm/newtab/index.html
+++ b/examples/new-esm/newtab/index.html
@@ -16,7 +16,7 @@
width="120px"
/>
- Welcome to your New ESModule Extension
+ Welcome to your ESModule Extension
Learn more about creating cross-browser extensions at
diff --git a/examples/new-esm/newtab/scripts.mjs b/examples/new-esm/newtab/scripts.mjs
index 7f6946b3..7fcefeb3 100644
--- a/examples/new-esm/newtab/scripts.mjs
+++ b/examples/new-esm/newtab/scripts.mjs
@@ -1,11 +1 @@
-function getManifest() {
- return chrome.runtime.getManifest()
-}
-
-const manifestData = getManifest()
-
-console.table({
- name: manifestData.name,
- version: manifestData.version,
- description: manifestData.description
-})
+console.log('Hello from the new tab page!')
diff --git a/examples/new-esm/newtab/styles.css b/examples/new-esm/newtab/styles.css
index 0fb72398..7d8a01f2 100644
--- a/examples/new-esm/newtab/styles.css
+++ b/examples/new-esm/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-less/manifest.json b/examples/new-less/manifest.json
index 25c98aed..3fe56811 100644
--- a/examples/new-less/manifest.json
+++ b/examples/new-less/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab Less Template",
+ "name": "New Tab Less",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-less/newtab/scripts.js b/examples/new-less/newtab/scripts.js
index 7f6946b3..7fcefeb3 100644
--- a/examples/new-less/newtab/scripts.js
+++ b/examples/new-less/newtab/scripts.js
@@ -1,11 +1 @@
-function getManifest() {
- return chrome.runtime.getManifest()
-}
-
-const manifestData = getManifest()
-
-console.table({
- name: manifestData.name,
- version: manifestData.version,
- description: manifestData.description
-})
+console.log('Hello from the new tab page!')
diff --git a/examples/new-less/newtab/styles.less b/examples/new-less/newtab/styles.less
index 0fb72398..7d8a01f2 100644
--- a/examples/new-less/newtab/styles.less
+++ b/examples/new-less/newtab/styles.less
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/locales/.gitignore b/examples/new-node-apis/.gitignore
similarity index 100%
rename from examples/locales/.gitignore
rename to examples/new-node-apis/.gitignore
diff --git a/examples/new-node-apis/extension.config.js b/examples/new-node-apis/extension.config.js
new file mode 100644
index 00000000..31eaea22
--- /dev/null
+++ b/examples/new-node-apis/extension.config.js
@@ -0,0 +1,15 @@
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+
+/** @type {import('extension').FileConfig} */
+module.exports = {
+ config: (config) => {
+ config.plugins = [
+ ...config.plugins,
+ new NodePolyfillPlugin({
+ additionalAliases: ['process']
+ })
+ ]
+
+ return config
+ }
+}
diff --git a/examples/locales/images/extension_48.png b/examples/new-node-apis/images/extension_48.png
similarity index 100%
rename from examples/locales/images/extension_48.png
rename to examples/new-node-apis/images/extension_48.png
diff --git a/examples/content-typescript/public/logo.png b/examples/new-node-apis/images/typescript.png
similarity index 100%
rename from examples/content-typescript/public/logo.png
rename to examples/new-node-apis/images/typescript.png
diff --git a/examples/config-babel/manifest.json b/examples/new-node-apis/manifest.json
similarity index 90%
rename from examples/config-babel/manifest.json
rename to examples/new-node-apis/manifest.json
index df323698..dbdc2c68 100644
--- a/examples/config-babel/manifest.json
+++ b/examples/new-node-apis/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Babel Template",
+ "name": "New Tab Node Apis",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-node-apis/newtab/index.html b/examples/new-node-apis/newtab/index.html
new file mode 100644
index 00000000..27240ff5
--- /dev/null
+++ b/examples/new-node-apis/newtab/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Crypto Extension
+
+
+
+
+
+
+
+
+
diff --git a/examples/new-node-apis/newtab/scripts.ts b/examples/new-node-apis/newtab/scripts.ts
new file mode 100644
index 00000000..a247a528
--- /dev/null
+++ b/examples/new-node-apis/newtab/scripts.ts
@@ -0,0 +1,17 @@
+import * as crypto from 'crypto'
+
+function hashString(input: string): string {
+ // Hash the input using SHA-256
+ return crypto.createHash('sha256').update(input).digest('hex')
+}
+
+document.getElementById('hash-button')?.addEventListener('click', () => {
+ const inputText = (document.getElementById('input-text') as HTMLInputElement)
+ .value
+ const hashedOutput = hashString(inputText)
+
+ const outputElement = document.getElementById('hashed-output')
+ if (outputElement) {
+ outputElement.textContent = hashedOutput
+ }
+})
diff --git a/examples/new-node-apis/newtab/styles.css b/examples/new-node-apis/newtab/styles.css
new file mode 100644
index 00000000..3de01a9d
--- /dev/null
+++ b/examples/new-node-apis/newtab/styles.css
@@ -0,0 +1,178 @@
+html {
+ font-size: 62.5%;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: calc(100vh - 4rem);
+ min-width: 300px;
+ padding: 2rem;
+ font-size: 1.8rem;
+ line-height: 1.618;
+ max-width: 38em;
+ margin: auto;
+ color: #c9c9c9;
+ background-color: #0a0c10;
+}
+
+@media (max-width: 684px) {
+ body {
+ font-size: 1.53rem;
+ }
+}
+
+@media (max-width: 382px) {
+ body {
+ font-size: 1.35rem;
+ }
+}
+
+h1 {
+ line-height: 1.1;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-word;
+ font-size: 4.7em;
+}
+
+@media (max-width: 684px) {
+ h1 {
+ font-size: 2.7em;
+ }
+}
+
+p {
+ margin-top: 0px;
+ margin-bottom: 2.5rem;
+}
+
+a {
+ text-decoration: none;
+ border-bottom: 2px solid #c9c9c9;
+ color: #e5e7eb;
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+ margin-top: 0px;
+ margin-bottom: 2.5rem;
+}
+
+@media (max-width: 684px) {
+ img {
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+ }
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: calc(100vh - 4rem);
+}
+
+header > div {
+ display: flex;
+ align-items: center;
+}
+
+input {
+ width: calc(100% - 74px);
+}
+
+input,
+button {
+ height: 58px;
+}
+
+/* Pre and Code */
+pre {
+ background-color: #4a4a4a;
+ display: block;
+ padding: 1em;
+ overflow-x: auto;
+ margin-top: 0px;
+ margin-bottom: 2.5rem;
+ font-size: 0.9em;
+}
+
+code,
+kbd,
+samp {
+ font-size: 0.9em;
+ padding: 0 0.5em;
+ background-color: #4a4a4a;
+ white-space: pre-wrap;
+}
+
+pre > code {
+ padding: 0;
+ background-color: transparent;
+ white-space: pre;
+ font-size: 1em;
+}
+
+input,
+textarea {
+ border: 1px solid #c9c9c9;
+}
+input:focus,
+textarea:focus {
+ border: 1px solid #ffffff;
+}
+
+button {
+ display: inline-block;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #ffffff;
+ color: #222222;
+ border-radius: 1px;
+ border: 1px solid #ffffff;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+button:hover {
+ background-color: #c9c9c9;
+ color: #222222;
+ outline: 0;
+}
+
+button:focus-visible {
+ outline-style: solid;
+ outline-width: 2px;
+}
+
+input {
+ color: #c9c9c9;
+ padding: 6px 10px;
+ margin-bottom: 10px;
+ background-color: #4a4a4a;
+ border: 1px solid #4a4a4a;
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box;
+}
+
+input:focus {
+ border: 1px solid #ffffff;
+ outline: 0;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
diff --git a/examples/content-shadow-dom/package.json b/examples/new-node-apis/package.json
similarity index 66%
rename from examples/content-shadow-dom/package.json
rename to examples/new-node-apis/package.json
index 1f6028c8..3cbf5bf9 100644
--- a/examples/content-shadow-dom/package.json
+++ b/examples/new-node-apis/package.json
@@ -1,6 +1,6 @@
{
"private": true,
- "name": "content-shadow-dom",
+ "name": "new-node-apis",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
@@ -9,7 +9,8 @@
"url": "https://cezaraugusto.com"
},
"license": "MIT",
- "dependencies": {
- "tailwindcss": "^3.4.1"
+ "devDependencies": {
+ "node-polyfill-webpack-plugin": "^4.0.0",
+ "typescript": "5.3.3"
}
}
diff --git a/examples/content-sass-module/public/logo.svg b/examples/new-node-apis/public/logo.svg
similarity index 100%
rename from examples/content-sass-module/public/logo.svg
rename to examples/new-node-apis/public/logo.svg
diff --git a/examples/new-node-apis/template.spec.ts b/examples/new-node-apis/template.spec.ts
new file mode 100644
index 00000000..9b66fd5d
--- /dev/null
+++ b/examples/new-node-apis/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-crypto'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+ execSync(`pnpm extension build ${exampleDir}`, {
+ cwd: path.join(__dirname, '..')
+ })
+})
+
+test('should exist an element with the welcome message text', async ({
+ page
+}) => {
+ await page.goto('chrome://newtab/')
+ const h1 = page.locator('h1')
+ await test.expect(h1).toHaveText('Welcome to your Crypto Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+ await page.goto('chrome://newtab/')
+ const h1 = page.locator('h1')
+ const color = await page.evaluate(
+ (locator) => {
+ return window.getComputedStyle(locator!).getPropertyValue('color')
+ },
+ await h1.elementHandle()
+ )
+ await test.expect(color).toEqual('rgb(201, 201, 201)')
+})
diff --git a/examples/new-node-apis/tsconfig.json b/examples/new-node-apis/tsconfig.json
new file mode 100644
index 00000000..8f138e5d
--- /dev/null
+++ b/examples/new-node-apis/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "allowJs": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "moduleResolution": "node",
+ "module": "esnext",
+ "noEmit": true,
+ "resolveJsonModule": true,
+ "strict": true,
+ "target": "esnext",
+ "verbatimModuleSyntax": true,
+ "useDefineForClassFields": true,
+ "skipLibCheck": true
+ },
+ "include": ["./"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/examples/new-preact/manifest.json b/examples/new-preact/manifest.json
index 2693f3d6..13f737d0 100644
--- a/examples/new-preact/manifest.json
+++ b/examples/new-preact/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab Preact Template",
+ "name": "New Tab Preact",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-preact/newtab/styles.css b/examples/new-preact/newtab/styles.css
index 0fb72398..7d8a01f2 100644
--- a/examples/new-preact/newtab/styles.css
+++ b/examples/new-preact/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-react-router/manifest.json b/examples/new-react-router/manifest.json
index c48ee3da..2390243d 100644
--- a/examples/new-react-router/manifest.json
+++ b/examples/new-react-router/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "New React Router Template",
+ "name": "New Tab React Router",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-react-router/newtab/styles.css b/examples/new-react-router/newtab/styles.css
index d8267dba..c7f23086 100644
--- a/examples/new-react-router/newtab/styles.css
+++ b/examples/new-react-router/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-react/manifest.json b/examples/new-react/manifest.json
index 62cc0162..036c92e5 100644
--- a/examples/new-react/manifest.json
+++ b/examples/new-react/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "New React Template",
+ "name": "New Tab React",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-react/newtab/styles.css b/examples/new-react/newtab/styles.css
index 0fb72398..7d8a01f2 100644
--- a/examples/new-react/newtab/styles.css
+++ b/examples/new-react/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-sass/manifest.json b/examples/new-sass/manifest.json
index f58804e8..1a8bcb38 100644
--- a/examples/new-sass/manifest.json
+++ b/examples/new-sass/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab SASS Template",
+ "name": "New Tab Sass",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-sass/newtab/scripts.js b/examples/new-sass/newtab/scripts.js
index 7f6946b3..7fcefeb3 100644
--- a/examples/new-sass/newtab/scripts.js
+++ b/examples/new-sass/newtab/scripts.js
@@ -1,11 +1 @@
-function getManifest() {
- return chrome.runtime.getManifest()
-}
-
-const manifestData = getManifest()
-
-console.table({
- name: manifestData.name,
- version: manifestData.version,
- description: manifestData.description
-})
+console.log('Hello from the new tab page!')
diff --git a/examples/new-sass/newtab/styles.scss b/examples/new-sass/newtab/styles.scss
index 0fb72398..7d8a01f2 100644
--- a/examples/new-sass/newtab/styles.scss
+++ b/examples/new-sass/newtab/styles.scss
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-tailwind/manifest.json b/examples/new-tailwind/manifest.json
index 661e177a..81c797b2 100644
--- a/examples/new-tailwind/manifest.json
+++ b/examples/new-tailwind/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab Tailwind Template",
+ "name": "New Tab Tailwind",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-typescript/manifest.json b/examples/new-typescript/manifest.json
index 84d0688b..640ffb06 100644
--- a/examples/new-typescript/manifest.json
+++ b/examples/new-typescript/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab TypeScript Template",
+ "name": "New Tab Typescript",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-typescript/newtab/scripts.ts b/examples/new-typescript/newtab/scripts.ts
index f97b0543..7fcefeb3 100644
--- a/examples/new-typescript/newtab/scripts.ts
+++ b/examples/new-typescript/newtab/scripts.ts
@@ -1,10 +1 @@
-function getRuntimeManifest() {
- return chrome.runtime.getManifest()
-}
-const manifestData = getRuntimeManifest()
-
-console.table({
- name: manifestData.name,
- version: manifestData.version,
- description: manifestData.description
-})
+console.log('Hello from the new tab page!')
diff --git a/examples/new-typescript/newtab/styles.css b/examples/new-typescript/newtab/styles.css
index 69a24316..75e01d08 100644
--- a/examples/new-typescript/newtab/styles.css
+++ b/examples/new-typescript/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new-typescript/public/logo.png b/examples/new-typescript/public/logo.png
deleted file mode 100644
index 93614694..00000000
Binary files a/examples/new-typescript/public/logo.png and /dev/null differ
diff --git a/examples/new-typescript/public/logo.svg b/examples/new-typescript/public/logo.svg
new file mode 100644
index 00000000..7fe14ba4
--- /dev/null
+++ b/examples/new-typescript/public/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/new-vue/manifest.json b/examples/new-vue/manifest.json
index c6e0d89f..9b9d3fe5 100644
--- a/examples/new-vue/manifest.json
+++ b/examples/new-vue/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab Vue Template",
+ "name": "Newtab Vue",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new-vue/newtab/styles.css b/examples/new-vue/newtab/styles.css
index 69a24316..75e01d08 100644
--- a/examples/new-vue/newtab/styles.css
+++ b/examples/new-vue/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/new/manifest.json b/examples/new/manifest.json
index ffb601e4..cb651390 100644
--- a/examples/new/manifest.json
+++ b/examples/new/manifest.json
@@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
- "name": "Newtab Template",
+ "name": "New",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
diff --git a/examples/new/newtab/scripts.js b/examples/new/newtab/scripts.js
index 7f6946b3..7fcefeb3 100644
--- a/examples/new/newtab/scripts.js
+++ b/examples/new/newtab/scripts.js
@@ -1,11 +1 @@
-function getManifest() {
- return chrome.runtime.getManifest()
-}
-
-const manifestData = getManifest()
-
-console.table({
- name: manifestData.name,
- version: manifestData.version,
- description: manifestData.description
-})
+console.log('Hello from the new tab page!')
diff --git a/examples/new/newtab/styles.css b/examples/new/newtab/styles.css
index 69a24316..75e01d08 100644
--- a/examples/new/newtab/styles.css
+++ b/examples/new/newtab/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/sidebar/background.js b/examples/sidebar/background.js
index a572e5a9..b7680fdc 100644
--- a/examples/sidebar/background.js
+++ b/examples/sidebar/background.js
@@ -1,6 +1,18 @@
-chrome.action.onClicked.addListener(() => {
- chrome.sidePanel.setOptions({
- path: 'side_panel/default_path.html',
- enabled: true
+if (
+ process.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+ process.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
+) {
+ // Firefox (Gecko-based browsers)
+ browser.browserAction.onClicked.addListener(() => {
+ // Opening the sidebar in Firefox
+ browser.sidebarAction.open()
})
-})
+} else {
+ // Chromium-based browsers
+ chrome.action.onClicked.addListener(() => {
+ chrome.sidePanel.setOptions({
+ path: 'side_panel/default_path.html',
+ enabled: true
+ })
+ })
+}
diff --git a/examples/sidebar/manifest.json b/examples/sidebar/manifest.json
index cb090c29..5f904643 100644
--- a/examples/sidebar/manifest.json
+++ b/examples/sidebar/manifest.json
@@ -1,36 +1,30 @@
{
"chromium:manifest_version": 3,
"firefox:manifest_version": 2,
-
"version": "0.0.1",
- "name": "Sidebar Template",
+ "name": "Sidebar",
"author": "Cezar Augusto",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
},
-
"chromium:action": {
"default_icon": {
"48": "images/extension_48.png"
},
"default_title": "Open Side Panel"
},
-
"firefox:sidebar_action": {
"default_panel": "sidebar/index.html",
"default_title": "Open Sidebar",
"default_icon": "images/extension_48.png"
},
-
"chromium:side_panel": {
"default_path": "sidebar/index.html",
"default_title": "Side Panel Content"
},
-
"chromium:permissions": ["sidePanel"],
"firefox:permissions": ["storage", "tabs"],
-
"chromium:web_accessible_resources": [
{
"resources": ["sidebar/index.html"],
@@ -38,7 +32,6 @@
}
],
"firefox:web_accessible_resources": ["sidebar/index.html"],
-
"background": {
"chromium:type": "module",
"chromium:service_worker": "background.js",
diff --git a/examples/sidebar/sidebar/scripts.js b/examples/sidebar/sidebar/scripts.js
index 7f6946b3..4ff9c24a 100644
--- a/examples/sidebar/sidebar/scripts.js
+++ b/examples/sidebar/sidebar/scripts.js
@@ -1,11 +1 @@
-function getManifest() {
- return chrome.runtime.getManifest()
-}
-
-const manifestData = getManifest()
-
-console.table({
- name: manifestData.name,
- version: manifestData.version,
- description: manifestData.description
-})
+console.log('Hello from the sidebar!')
diff --git a/examples/sidebar/sidebar/styles.css b/examples/sidebar/sidebar/styles.css
index b1c75834..5342a61a 100644
--- a/examples/sidebar/sidebar/styles.css
+++ b/examples/sidebar/sidebar/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/special-folders-pages/background.js b/examples/special-folders-pages/background.js
index f319b01f..85605452 100644
--- a/examples/special-folders-pages/background.js
+++ b/examples/special-folders-pages/background.js
@@ -1,5 +1,5 @@
-chrome.runtime.onInstalled.addListener(() => {
- chrome.tabs.create({
+browser.runtime.onInstalled.addListener(() => {
+ browser.tabs.create({
url: './pages/main.html'
})
})
diff --git a/examples/special-folders-pages/pages/main.css b/examples/special-folders-pages/main.css
similarity index 100%
rename from examples/special-folders-pages/pages/main.css
rename to examples/special-folders-pages/main.css
diff --git a/examples/special-folders-pages/pages/main.html b/examples/special-folders-pages/main.html
similarity index 100%
rename from examples/special-folders-pages/pages/main.html
rename to examples/special-folders-pages/main.html
diff --git a/examples/special-folders-pages/pages/main.js b/examples/special-folders-pages/main.js
similarity index 100%
rename from examples/special-folders-pages/pages/main.js
rename to examples/special-folders-pages/main.js
diff --git a/examples/special-folders-pages/manifest.json b/examples/special-folders-pages/manifest.json
index b270de1b..b204f756 100644
--- a/examples/special-folders-pages/manifest.json
+++ b/examples/special-folders-pages/manifest.json
@@ -1,5 +1,5 @@
{
- "name": "Special Folders Pages Template",
+ "name": "Special Folders Pages",
"version": "0.0.1",
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
@@ -12,7 +12,7 @@
"firefox:scripts": ["background.js"]
},
"action": {
- "default_popup": "pages/main.html"
+ "default_popup": "main.html"
},
"sandbox": {
"pages": ["sandbox/index.html"]
diff --git a/examples/special-folders-pages/sandbox/styles.css b/examples/special-folders-pages/sandbox/styles.css
index 247b7733..5292e48a 100644
--- a/examples/special-folders-pages/sandbox/styles.css
+++ b/examples/special-folders-pages/sandbox/styles.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/special-folders-scripts/background.js b/examples/special-folders-scripts/background.js
index 253f9a98..10942a93 100644
--- a/examples/special-folders-scripts/background.js
+++ b/examples/special-folders-scripts/background.js
@@ -1,23 +1,23 @@
-chrome.action.onClicked.addListener(openDemoTab)
+browser.action.onClicked.addListener(openDemoTab)
function openDemoTab() {
- chrome.tabs.create({url: './pages/index.html'})
+ browser.tabs.create({url: './pages/index.html'})
}
-chrome.webNavigation.onDOMContentLoaded.addListener(async ({tabId, url}) => {
+browser.webNavigation.onDOMContentLoaded.addListener(async ({tabId, url}) => {
if (url !== 'https://extension.js.org/#inject-programmatic') return
- const {options} = await chrome.storage.local.get('options')
- chrome.scripting.executeScript({
+ const {options} = await browser.storage.local.get('options')
+ browser.scripting.executeScript({
target: {tabId},
files: ['./scripts/content-script.js'],
...options
})
})
-chrome.runtime.onMessage.addListener(async ({name, options}) => {
+browser.runtime.onMessage.addListener(async ({name, options}) => {
if (name === 'inject-programmatic') {
- await chrome.storage.local.set({options})
- await chrome.tabs.create({
+ await browser.storage.local.set({options})
+ await browser.tabs.create({
url: 'https://extension.js.org/#inject-programmatic'
})
}
diff --git a/examples/special-folders-scripts/manifest.json b/examples/special-folders-scripts/manifest.json
index e4c03bb8..9aeba4ef 100644
--- a/examples/special-folders-scripts/manifest.json
+++ b/examples/special-folders-scripts/manifest.json
@@ -1,5 +1,5 @@
{
- "name": "Special Folders Scripts Template",
+ "name": "Special Folders Scripts",
"version": "0.0.1",
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
diff --git a/examples/special-folders-scripts/pages/index.css b/examples/special-folders-scripts/pages/index.css
index 963ccf6f..4e5342f5 100644
--- a/examples/special-folders-scripts/pages/index.css
+++ b/examples/special-folders-scripts/pages/index.css
@@ -37,7 +37,6 @@ h1 {
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
- -ms-word-break: break-all;
word-break: break-word;
font-size: 4.7em;
}
diff --git a/examples/special-folders-scripts/pages/index.js b/examples/special-folders-scripts/pages/index.js
index c0f1d436..32ce0f47 100644
--- a/examples/special-folders-scripts/pages/index.js
+++ b/examples/special-folders-scripts/pages/index.js
@@ -1 +1 @@
-console.log('ok')
+console.log('Hello from the index page')
diff --git a/examples/special-folders-scripts/scripts/content-script.js b/examples/special-folders-scripts/scripts/content-script.js
index 7ead8dc7..c2176a5a 100644
--- a/examples/special-folders-scripts/scripts/content-script.js
+++ b/examples/special-folders-scripts/scripts/content-script.js
@@ -1,3 +1,3 @@
-const extensionInfo = chrome.runtime.getManifest()
+const extensionInfo = browser.runtime.getManifest()
const text = `${extensionInfo.name} v${extensionInfo.version} injected this script`
alert(text)
diff --git a/examples/storage/manifest.json b/examples/storage/manifest.json
index 531de6ae..9e01c474 100644
--- a/examples/storage/manifest.json
+++ b/examples/storage/manifest.json
@@ -1,5 +1,5 @@
{
- "name": "Storage Template",
+ "name": "Storage",
"version": "0.0.1",
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f73e840..68999c13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,87 +94,11 @@ importers:
specifier: 5.3.3
version: 5.3.3
- examples/config-babel:
- devDependencies:
- '@babel/core':
- specifier: ^7.24.9
- version: 7.25.2
- babel-loader:
- specifier: ^9.1.3
- version: 9.2.1(@babel/core@7.25.2)(webpack@5.92.1(@swc/core@1.7.26)(esbuild@0.23.1))
- babel-preset-modern-browser-extension:
- specifier: ^0.7.0
- version: 0.7.0(@babel/core@7.25.2)
- stylelint:
- specifier: ^16.7.0
- version: 16.9.0(typescript@5.3.3)
-
- examples/config-eslint:
- devDependencies:
- '@eslint/js':
- specifier: ^9.6.0
- version: 9.11.0
- eslint:
- specifier: ^9.6.0
- version: 9.11.0(jiti@1.21.6)
- globals:
- specifier: ^15.9.0
- version: 15.9.0
- typescript:
- specifier: 5.3.3
- version: 5.3.3
- typescript-eslint:
- specifier: ^8.5.0
- version: 8.6.0(eslint@9.11.0(jiti@1.21.6))(typescript@5.3.3)
-
- examples/config-lint:
- devDependencies:
- '@eslint/js':
- specifier: ^9.6.0
- version: 9.11.0
- eslint:
- specifier: ^9.6.0
- version: 9.11.0(jiti@1.21.6)
- eslint-config-prettier:
- specifier: ^9.1.0
- version: 9.1.0(eslint@9.11.0(jiti@1.21.6))
- globals:
- specifier: ^15.9.0
- version: 15.9.0
- prettier:
- specifier: ^3.3.2
- version: 3.3.3
- stylelint:
- specifier: ^16.7.0
- version: 16.9.0(typescript@5.3.3)
- typescript:
- specifier: 5.3.3
- version: 5.3.3
- typescript-eslint:
- specifier: ^8.5.0
- version: 8.6.0(eslint@9.11.0(jiti@1.21.6))(typescript@5.3.3)
-
- examples/config-prettier:
- devDependencies:
- prettier:
- specifier: ^3.3.2
- version: 3.3.3
-
- examples/config-stylelint:
- devDependencies:
- sass:
- specifier: ^1.77.8
- version: 1.79.2
- stylelint:
- specifier: ^16.7.0
- version: 16.9.0(typescript@5.3.3)
- stylelint-config-standard-scss:
- specifier: ^13.1.0
- version: 13.1.0(postcss@8.4.47)(stylelint@16.9.0(typescript@5.3.3))
+ examples/action-locales: {}
examples/content: {}
- examples/content-css-module: {}
+ examples/content-css-modules: {}
examples/content-env:
devDependencies:
@@ -212,7 +136,7 @@ importers:
specifier: ^4.2.0
version: 4.2.0
- examples/content-less-module:
+ examples/content-less-modules:
devDependencies:
less:
specifier: ^4.2.0
@@ -298,18 +222,12 @@ importers:
specifier: ^1.77.8
version: 1.79.2
- examples/content-sass-module:
+ examples/content-sass-modules:
devDependencies:
sass:
specifier: ^1.77.8
version: 1.79.2
- examples/content-shadow-dom:
- dependencies:
- tailwindcss:
- specifier: ^3.4.1
- version: 3.4.12(ts-node@10.9.2(@swc/core@1.7.26)(@types/node@22.5.5)(typescript@5.3.3))
-
examples/content-tailwind:
dependencies:
tailwindcss:
@@ -339,10 +257,86 @@ importers:
examples/init: {}
- examples/locales: {}
-
examples/new: {}
+ examples/new-config-babel:
+ devDependencies:
+ '@babel/core':
+ specifier: ^7.24.9
+ version: 7.25.2
+ babel-loader:
+ specifier: ^9.1.3
+ version: 9.2.1(@babel/core@7.25.2)(webpack@5.92.1(@swc/core@1.7.26)(esbuild@0.23.1))
+ babel-preset-modern-browser-extension:
+ specifier: ^0.7.0
+ version: 0.7.0(@babel/core@7.25.2)
+ stylelint:
+ specifier: ^16.7.0
+ version: 16.9.0(typescript@5.3.3)
+
+ examples/new-config-eslint:
+ devDependencies:
+ '@eslint/js':
+ specifier: ^9.6.0
+ version: 9.11.0
+ eslint:
+ specifier: ^9.6.0
+ version: 9.11.0(jiti@1.21.6)
+ globals:
+ specifier: ^15.9.0
+ version: 15.9.0
+ typescript:
+ specifier: 5.3.3
+ version: 5.3.3
+ typescript-eslint:
+ specifier: ^8.5.0
+ version: 8.6.0(eslint@9.11.0(jiti@1.21.6))(typescript@5.3.3)
+
+ examples/new-config-lint:
+ devDependencies:
+ '@eslint/js':
+ specifier: ^9.6.0
+ version: 9.11.0
+ eslint:
+ specifier: ^9.6.0
+ version: 9.11.0(jiti@1.21.6)
+ eslint-config-prettier:
+ specifier: ^9.1.0
+ version: 9.1.0(eslint@9.11.0(jiti@1.21.6))
+ globals:
+ specifier: ^15.9.0
+ version: 15.9.0
+ prettier:
+ specifier: ^3.3.2
+ version: 3.3.3
+ stylelint:
+ specifier: ^16.7.0
+ version: 16.9.0(typescript@5.3.3)
+ typescript:
+ specifier: 5.3.3
+ version: 5.3.3
+ typescript-eslint:
+ specifier: ^8.5.0
+ version: 8.6.0(eslint@9.11.0(jiti@1.21.6))(typescript@5.3.3)
+
+ examples/new-config-prettier:
+ devDependencies:
+ prettier:
+ specifier: ^3.3.2
+ version: 3.3.3
+
+ examples/new-config-stylelint:
+ devDependencies:
+ sass:
+ specifier: ^1.77.8
+ version: 1.79.2
+ stylelint:
+ specifier: ^16.7.0
+ version: 16.9.0(typescript@5.3.3)
+ stylelint-config-standard-scss:
+ specifier: ^13.1.0
+ version: 13.1.0(postcss@8.4.47)(stylelint@16.9.0(typescript@5.3.3))
+
examples/new-crypto:
devDependencies:
node-polyfill-webpack-plugin:
@@ -364,6 +358,15 @@ importers:
specifier: ^4.2.0
version: 4.2.0
+ examples/new-node-apis:
+ devDependencies:
+ node-polyfill-webpack-plugin:
+ specifier: ^4.0.0
+ version: 4.0.0(webpack@5.92.1(@swc/core@1.7.26)(esbuild@0.23.1))
+ typescript:
+ specifier: 5.3.3
+ version: 5.3.3
+
examples/new-preact:
dependencies:
'@preact/signals':
diff --git a/programs/develop/webpack/plugin-extension/feature-html/__spec__/index.spec.ts b/programs/develop/webpack/plugin-extension/feature-html/__spec__/index.spec.ts
index 4bf18852..884d7f63 100644
--- a/programs/develop/webpack/plugin-extension/feature-html/__spec__/index.spec.ts
+++ b/programs/develop/webpack/plugin-extension/feature-html/__spec__/index.spec.ts
@@ -49,7 +49,7 @@ describe('HtmlPlugin (default behavior)', () => {
})
const sandboxHtml = path.join(outputPath, 'sandbox', 'page-0.html')
- const pagesHtml = path.join(outputPath, 'pages', 'main.html')
+ const pagesHtml = path.join(outputPath, 'pages', 'custom.html')
const excludedHtml = path.join(outputPath, '/', 'html', 'file.html')
describe('html', () => {