-
-
- Change the background-color ⬇
+
+
+
+ Welcome to your Content Script Extension
-
-
+
Learn more about creating cross-browser extensions at
-
diff --git a/examples/content/template.spec.ts b/examples/content/template.spec.ts
index 164a642db..e1a412363 100644
--- a/examples/content/template.spec.ts
+++ b/examples/content/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).toContainText('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/data.ts b/examples/data.ts
index 4d3047b3f..6cb58584e 100644
--- a/examples/data.ts
+++ b/examples/data.ts
@@ -39,7 +39,7 @@ const JS_TEMPLATES: Template[] = [
configFiles: undefined
},
{
- name: 'content-css-module',
+ name: 'content-css-modules',
uiContext: ['content'],
uiFramework: undefined,
css: 'css',
@@ -57,7 +57,7 @@ const JS_TEMPLATES: Template[] = [
configFiles: undefined
},
{
- name: 'content-less-module',
+ name: 'content-less-modules',
uiContext: ['content'],
uiFramework: undefined,
css: 'less',
@@ -84,7 +84,7 @@ const JS_TEMPLATES: Template[] = [
configFiles: undefined
},
{
- name: 'content-sass-module',
+ name: 'content-sass-modules',
uiContext: ['content'],
uiFramework: undefined,
css: 'sass',
@@ -111,7 +111,7 @@ const JS_TEMPLATES: Template[] = [
configFiles: undefined
},
{
- name: 'locales',
+ name: 'action-locales',
uiContext: ['action'],
uiFramework: undefined,
css: 'css',
@@ -253,6 +253,15 @@ const CUSTOM_TEMPLATES: Template[] = [
hasEnv: false,
configFiles: ['tsconfig.json', 'extension.config.js']
},
+ {
+ name: 'new-node-apis',
+ uiContext: ['newTab'],
+ uiFramework: undefined,
+ css: 'css',
+ hasBackground: false,
+ hasEnv: false,
+ configFiles: ['tsconfig.json', 'extension.config.js']
+ },
{
name: 'content-react-svgr',
uiContext: ['content'],
@@ -360,7 +369,7 @@ const CONFIG_TEMPLATES: Template[] = [
// configFiles: ['babel.config.json']
// },
{
- name: 'config-eslint',
+ name: 'new-config-eslint',
uiContext: ['newTab'],
uiFramework: undefined,
css: 'css',
@@ -369,7 +378,7 @@ const CONFIG_TEMPLATES: Template[] = [
configFiles: ['tsconfig.json', 'eslint.config.mjs']
},
{
- name: 'config-lint',
+ name: 'new-config-lint',
uiContext: ['newTab'],
uiFramework: undefined,
css: 'css',
@@ -384,7 +393,7 @@ const CONFIG_TEMPLATES: Template[] = [
]
},
{
- name: 'config-prettier',
+ name: 'new-config-prettier',
uiContext: ['newTab'],
uiFramework: undefined,
css: 'css',
@@ -393,7 +402,7 @@ const CONFIG_TEMPLATES: Template[] = [
configFiles: ['tsconfig.json', '.prettierrc']
},
{
- name: 'config-stylelint',
+ name: 'new-config-stylelint',
uiContext: ['newTab'],
uiFramework: undefined,
css: 'sass',
diff --git a/examples/declarative_net_request/manifest.json b/examples/declarative_net_request/manifest.json
index a2a374ed4..157e471d1 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 8f4be86f3..10a19048a 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 573ffae1f..000000000
--- 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 69a24316c..000000000
--- 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 ebe0773a6..000000000
--- 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 a152e5262..9addd8b4a 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 000000000..7fcefeb34
--- /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 52bc73892..fa0d6b6a3 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 253046694..1bac6e20f 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 ed38f1a39..4dd04adcb 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 e7235ba30..fb1a7768d 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 aa3b861f5..bb7d0107a 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 000000000..c37d0de34
--- /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 871a1d730..855f199c7 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 6a1a3796e..7e25a60bb 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 000000000..7fcefeb34
--- /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 67e4e0457..0844f520a 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 ffffb0e22..56ed29fd1 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 3de01a9d0..51affe2c9 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-crypto/template.spec.ts b/examples/new-crypto/template.spec.ts
index 9b66fd5db..13549fdea 100644
--- a/examples/new-crypto/template.spec.ts
+++ b/examples/new-crypto/template.spec.ts
@@ -17,7 +17,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 Crypto Extension.')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-env-esm/manifest.json b/examples/new-env-esm/manifest.json
index 652f8e2d2..10f323474 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 e877c4bf9..b25c83d90 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
width="120px"
/>
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 29d939dc6..7fcefeb34 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 0fb723984..7d8a01f29 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 2620ce5ab..eec6bb0b1 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).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-env/manifest.json b/examples/new-env/manifest.json
index 8d8fba761..f622fae29 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 94404b12c..7fcefeb34 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 f888963cc..da24ea2ad 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-env/template.spec.ts b/examples/new-env/template.spec.ts
index 8b03a3f52..b58e0dead 100644
--- a/examples/new-env/template.spec.ts
+++ b/examples/new-env/template.spec.ts
@@ -17,7 +17,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 Chrome Extension.')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-esm/manifest.json b/examples/new-esm/manifest.json
index 4895f2136..564d2b265 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 042f2fd9f..584a75518 100644
--- a/examples/new-esm/newtab/index.html
+++ b/examples/new-esm/newtab/index.html
@@ -16,7 +16,7 @@
width="120px"
/>
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 7f6946b36..7fcefeb34 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 0fb723984..7d8a01f29 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-esm/template.spec.mjs b/examples/new-esm/template.spec.mjs
index 2ed345d54..7a512258f 100644
--- a/examples/new-esm/template.spec.mjs
+++ b/examples/new-esm/template.spec.mjs
@@ -23,7 +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 Extension')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-less/manifest.json b/examples/new-less/manifest.json
index 25c98aed5..3fe568117 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 7f6946b36..7fcefeb34 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 0fb723984..7d8a01f29 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/new-less/template.spec.ts b/examples/new-less/template.spec.ts
index 2108e4146..78235ccab 100644
--- a/examples/new-less/template.spec.ts
+++ b/examples/new-less/template.spec.ts
@@ -17,7 +17,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 LESS Extension')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
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 000000000..31eaea22e
--- /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 df3236980..dbdc2c680 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 000000000..2b0a6bbe0
--- /dev/null
+++ b/examples/new-node-apis/newtab/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
Node APIs
+
+
+
+
+
+
+
+
+
diff --git a/examples/new-node-apis/newtab/scripts.ts b/examples/new-node-apis/newtab/scripts.ts
new file mode 100644
index 000000000..a247a528c
--- /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 000000000..3de01a9d0
--- /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 1f6028c84..3cbf5bf99 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 000000000..416265611
--- /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-node-apis'
+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).toContainText('Welcome to your')
+})
+
+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 000000000..8f138e5de
--- /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 2693f3d6c..13f737d0d 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 0fb723984..7d8a01f29 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-preact/template.spec.ts b/examples/new-preact/template.spec.ts
index 55a903ba3..a7acdc5e4 100644
--- a/examples/new-preact/template.spec.ts
+++ b/examples/new-preact/template.spec.ts
@@ -17,7 +17,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 Preact Extension.')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-react-router/manifest.json b/examples/new-react-router/manifest.json
index c48ee3da2..2390243d0 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 d8267dbae..c7f230865 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-router/template.spec.ts b/examples/new-react-router/template.spec.ts
index 96b917315..11a3276fc 100644
--- a/examples/new-react-router/template.spec.ts
+++ b/examples/new-react-router/template.spec.ts
@@ -17,7 +17,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 React Router Extension.')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-react/manifest.json b/examples/new-react/manifest.json
index 62cc0162d..036c92e52 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 0fb723984..7d8a01f29 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-react/template.spec.ts b/examples/new-react/template.spec.ts
index 8d1303580..a00d41355 100644
--- a/examples/new-react/template.spec.ts
+++ b/examples/new-react/template.spec.ts
@@ -17,7 +17,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 React Extension.')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-sass/manifest.json b/examples/new-sass/manifest.json
index f58804e86..1a8bcb389 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 7f6946b36..7fcefeb34 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 0fb723984..7d8a01f29 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-sass/template.spec.ts b/examples/new-sass/template.spec.ts
index 8b638a705..22e7a5d20 100644
--- a/examples/new-sass/template.spec.ts
+++ b/examples/new-sass/template.spec.ts
@@ -17,7 +17,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 Sass Extension')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-tailwind/manifest.json b/examples/new-tailwind/manifest.json
index 661e177a3..81c797b23 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-tailwind/template.spec.ts b/examples/new-tailwind/template.spec.ts
index 4ded3d4b5..7c557cb43 100644
--- a/examples/new-tailwind/template.spec.ts
+++ b/examples/new-tailwind/template.spec.ts
@@ -19,7 +19,7 @@ test('should exist an element with the welcome message text', async ({
const h2 = page.locator('h2')
await test
.expect(h2)
- .toHaveText('This is a new tab page running React and Tailwind.css.')
+ .toContainText('This is a new tab page running React and Tailwind.css.')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-typescript/manifest.json b/examples/new-typescript/manifest.json
index 84d0688b2..640ffb061 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 f97b05439..7fcefeb34 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 69a24316c..75e01d08f 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 936146940..000000000
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 000000000..7fe14ba46
--- /dev/null
+++ b/examples/new-typescript/public/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/new-typescript/template.spec.ts b/examples/new-typescript/template.spec.ts
index 2ba8c16ef..9e590d324 100644
--- a/examples/new-typescript/template.spec.ts
+++ b/examples/new-typescript/template.spec.ts
@@ -17,7 +17,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 TypeScript Extension.')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new-vue/manifest.json b/examples/new-vue/manifest.json
index c6e0d89fb..9b9d3fe53 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 69a24316c..75e01d08f 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-vue/template.spec.ts b/examples/new-vue/template.spec.ts
index 115b7dec1..c05cad1d5 100644
--- a/examples/new-vue/template.spec.ts
+++ b/examples/new-vue/template.spec.ts
@@ -17,7 +17,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 Vue Extension.')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/new/manifest.json b/examples/new/manifest.json
index ffb601e49..cb6513902 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 7f6946b36..7fcefeb34 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 69a24316c..75e01d08f 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/new/template.spec.ts b/examples/new/template.spec.ts
index d96541e14..7c81fb27e 100644
--- a/examples/new/template.spec.ts
+++ b/examples/new/template.spec.ts
@@ -17,7 +17,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 Extension')
+ await test.expect(h1).toContainText('Welcome to your')
})
test('should exist a default color value', async ({page}) => {
diff --git a/examples/sidebar/background.js b/examples/sidebar/background.js
index a572e5a90..b7680fdc8 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 cb090c29d..5f904643a 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 7f6946b36..4ff9c24a4 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 b1c758346..5342a61a5 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/manifest.json b/examples/special-folders-pages/manifest.json
index b270de1bf..c484092aa 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,
diff --git a/examples/special-folders-pages/sandbox/styles.css b/examples/special-folders-pages/sandbox/styles.css
index 247b77334..5292e48a1 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/manifest.json b/examples/special-folders-scripts/manifest.json
index e4c03bb82..9aeba4ef7 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 963ccf6fd..4e5342f5b 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 c0f1d4365..32ce0f47b 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 7ead8dc78..ba9d7b161 100644
--- a/examples/special-folders-scripts/scripts/content-script.js
+++ b/examples/special-folders-scripts/scripts/content-script.js
@@ -1,3 +1,2 @@
-const extensionInfo = chrome.runtime.getManifest()
-const text = `${extensionInfo.name} v${extensionInfo.version} injected this script`
+const text = `Your browser extension injected this script`
alert(text)
diff --git a/examples/storage/manifest.json b/examples/storage/manifest.json
index 531de6aeb..9e01c474b 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/playwright.config.ts b/playwright.config.ts
index 3b4c72b00..3542fd9c2 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -11,6 +11,8 @@ import {defineConfig, devices} from '@playwright/test'
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
+ // timeout to 40s
+ timeout: 40 * 1000,
testDir: './examples',
/* Run tests in files in parallel */
fullyParallel: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f73e8403..68999c130 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/build.spec.ts b/programs/develop/build.spec.ts
index 923a86973..c08cd786d 100644
--- a/programs/develop/build.spec.ts
+++ b/programs/develop/build.spec.ts
@@ -172,7 +172,7 @@ describe('extension build', () => {
templatePath,
'dist',
SUPPORTED_BROWSERS[0],
- `${template.name}-template-0.0.1.zip`
+ `${template.name}-0.0.1.zip`
)
)
).toBeTruthy()
@@ -199,11 +199,7 @@ describe('extension build', () => {
expect(
fs.existsSync(
- path.join(
- templatePath,
- 'dist',
- `${template.name}-template-0.0.1-source.zip`
- )
+ path.join(templatePath, 'dist', `${template.name}-0.0.1-source.zip`)
)
).toBeTruthy()
},
diff --git a/programs/develop/webpack/plugin-extension/feature-html/steps/emit-html-file.ts b/programs/develop/webpack/plugin-extension/feature-html/steps/emit-html-file.ts
index 379ef7170..80e06705c 100644
--- a/programs/develop/webpack/plugin-extension/feature-html/steps/emit-html-file.ts
+++ b/programs/develop/webpack/plugin-extension/feature-html/steps/emit-html-file.ts
@@ -19,7 +19,9 @@ export class EmitHtmlFile {
public apply(compiler: Compiler): void {
const manifest = require(this.manifestPath)
- const manifestName = manifest.name || 'Extension.js'
+ const patchedManifest = utils.filterKeysForThisBrowser(manifest, 'chrome')
+
+ const manifestName = patchedManifest.name || 'Extension.js'
compiler.hooks.thisCompilation.tap('html:emit-html-file', (compilation) => {
compilation.hooks.processAssets.tap(
diff --git a/programs/develop/webpack/plugin-extension/feature-html/steps/throw-if-recompile-is-needed.ts b/programs/develop/webpack/plugin-extension/feature-html/steps/throw-if-recompile-is-needed.ts
index 15545e5e3..8880cb6b6 100644
--- a/programs/develop/webpack/plugin-extension/feature-html/steps/throw-if-recompile-is-needed.ts
+++ b/programs/develop/webpack/plugin-extension/feature-html/steps/throw-if-recompile-is-needed.ts
@@ -2,6 +2,7 @@ import fs from 'fs'
import {type Compiler} from 'webpack'
import {type FilepathList, type PluginInterface} from '../../../webpack-types'
import {getAssetsFromHtml} from '../html-lib/utils'
+import * as utils from '../../../lib/utils'
import * as messages from '../../../lib/messages'
export class ThrowIfRecompileIsNeeded {
@@ -38,7 +39,12 @@ export class ThrowIfRecompileIsNeeded {
if (htmlFile) {
if (!fs.existsSync(htmlFile)) {
const manifest = require(this.manifestPath)
- const manifestName = manifest.name || 'Extension.js'
+ const patchedManifest = utils.filterKeysForThisBrowser(
+ manifest,
+ 'chrome'
+ )
+
+ const manifestName = patchedManifest.name || 'Extension.js'
console.error(
messages.manifestFieldError(manifestName, key, htmlFile)
)
diff --git a/programs/develop/webpack/plugin-extension/feature-locales/__spec__/index.spec.ts b/programs/develop/webpack/plugin-extension/feature-locales/__spec__/index.spec.ts
index 3b2a1e1a1..0c6f81517 100644
--- a/programs/develop/webpack/plugin-extension/feature-locales/__spec__/index.spec.ts
+++ b/programs/develop/webpack/plugin-extension/feature-locales/__spec__/index.spec.ts
@@ -35,7 +35,7 @@ export const findStringInFile = async (
}
describe('LocalesPlugin', () => {
- const fixturesPath = getFixturesPath('locales')
+ const fixturesPath = getFixturesPath('action-locales')
const outputPath = path.resolve(fixturesPath, 'dist', 'chrome')
beforeAll(async () => {
diff --git a/programs/develop/webpack/plugin-extension/feature-locales/index.ts b/programs/develop/webpack/plugin-extension/feature-locales/index.ts
index 251e12c31..ff22aba24 100644
--- a/programs/develop/webpack/plugin-extension/feature-locales/index.ts
+++ b/programs/develop/webpack/plugin-extension/feature-locales/index.ts
@@ -34,11 +34,16 @@ export class LocalesPlugin {
stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
},
() => {
- const manifest = require(this.manifestPath)
- const manifestName = manifest.name || 'Extension.js'
-
// Do not emit if manifest doesn't exist.
if (!fs.existsSync(this.manifestPath)) {
+ const manifest = require(this.manifestPath)
+ const patchedManifest = utils.filterKeysForThisBrowser(
+ manifest,
+ 'chrome'
+ )
+
+ const manifestName = patchedManifest.name || 'Extension.js'
+
compilation.errors.push(
new webpack.WebpackError(
messages.manifestNotFoundError(manifestName, this.manifestPath)
diff --git a/programs/develop/webpack/plugin-extension/feature-manifest/steps/check-manifest-files.ts b/programs/develop/webpack/plugin-extension/feature-manifest/steps/check-manifest-files.ts
index a9efc28a4..50f8bc939 100644
--- a/programs/develop/webpack/plugin-extension/feature-manifest/steps/check-manifest-files.ts
+++ b/programs/develop/webpack/plugin-extension/feature-manifest/steps/check-manifest-files.ts
@@ -1,6 +1,7 @@
import fs from 'fs'
import path from 'path'
import webpack, {Compilation, Compiler} from 'webpack'
+import * as utils from '../../../lib/utils'
import * as messages from '../../../lib/messages'
import {PluginInterface, FilepathList} from '../../../webpack-types'
@@ -60,7 +61,12 @@ export class CheckManifestFiles {
for (const item of valueArr) {
const ext = path.extname(item as string)
const manifest = require(this.manifestPath)
- const manifestName = manifest.name || 'Extension.js'
+ const patchedManifest = utils.filterKeysForThisBrowser(
+ manifest,
+ 'chrome'
+ )
+
+ const manifestName = patchedManifest.name || 'Extension.js'
if (!fs.existsSync(item as string)) {
// Assume that by refrencing an absolute path, the user
diff --git a/programs/develop/webpack/plugin-extension/feature-scripts/steps/add-public-path-for-main-world.ts b/programs/develop/webpack/plugin-extension/feature-scripts/steps/add-public-path-for-main-world.ts
index 07e6c8503..30366287c 100644
--- a/programs/develop/webpack/plugin-extension/feature-scripts/steps/add-public-path-for-main-world.ts
+++ b/programs/develop/webpack/plugin-extension/feature-scripts/steps/add-public-path-for-main-world.ts
@@ -5,7 +5,8 @@ import {
type Manifest
} from '../../../webpack-types'
import * as messages from '../../../lib/messages'
-import {DevOptions} from '../../../../module'
+import * as utils from '../../../lib/utils'
+import {DevOptions} from '../../../../commands/dev'
import {CHROMIUM_BASED_BROWSERS} from '../../../lib/constants'
export class AddPublicPathForMainWorld {
@@ -22,7 +23,12 @@ export class AddPublicPathForMainWorld {
}
public apply(_compiler: Compiler): void {
- const manifest: Manifest = require(this.manifestPath)
+ const initialManifest: Manifest = require(this.manifestPath)
+ const manifest = utils.filterKeysForThisBrowser(
+ initialManifest,
+ this.browser
+ )
+
if (
manifest.content_scripts?.some(
// @ts-expect-error - TS doesn't know about content_scripts
diff --git a/programs/develop/webpack/plugin-reload/steps/setup-reload-strategy/target-web-extension-plugin/index.ts b/programs/develop/webpack/plugin-reload/steps/setup-reload-strategy/target-web-extension-plugin/index.ts
index 79cc23950..628ce702c 100644
--- a/programs/develop/webpack/plugin-reload/steps/setup-reload-strategy/target-web-extension-plugin/index.ts
+++ b/programs/develop/webpack/plugin-reload/steps/setup-reload-strategy/target-web-extension-plugin/index.ts
@@ -77,8 +77,14 @@ export class TargetWebExtensionPlugin {
private ensureFileExists(filePath: string) {
if (!fs.existsSync(filePath)) {
if (this.manifestPath) {
- const manifest: Manifest = require(this.manifestPath)
- const manifestName = manifest.name || 'Extension.js'
+ const manifest = require(this.manifestPath)
+ const patchedManifest = utils.filterKeysForThisBrowser(
+ manifest,
+ 'chrome'
+ )
+
+ const manifestName = patchedManifest.name || 'Extension.js'
+
const fieldError = messages.backgroundIsRequired(manifestName, filePath)
console.error(fieldError)
throw new Error(fieldError)
- 
-