From 818ab2e6506e78925c086c457302d8b9717ad7dd Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Sat, 21 Sep 2024 17:10:28 -0300 Subject: [PATCH] Cross-browser templates --- examples/action/action/scripts.js | 12 +- examples/action/action/styles.css | 1 - examples/config-babel/newtab/scripts.js | 2 +- examples/config-babel/newtab/styles.css | 1 - examples/config-eslint/newtab/styles.css | 1 - examples/config-lint/newtab/styles.css | 1 - examples/config-prettier/newtab/styles.css | 1 - examples/config-stylelint/newtab/scripts.js | 2 +- examples/config-stylelint/newtab/styles.scss | 1 - examples/content-css-module/background.js | 4 +- .../content/Logo.module.css | 6 +- .../content-css-module/content/scripts.js | 5 +- .../content-css-module/content/styles.css | 26 +- .../content-css-module/images/extensionjs.svg | 3 + examples/content-env/background.ts | 4 +- examples/content-env/content/scripts.ts | 2 +- examples/content-env/content/styles.css | 36 +- examples/content-esm/background.mjs | 4 +- examples/content-esm/content/scripts.mjs | 2 +- examples/content-esm/content/styles.css | 46 +-- examples/content-less-module/background.js | 4 +- .../content/Logo.module.less | 19 +- .../content-less-module/content/scripts.js | 2 +- .../content-less-module/content/styles.less | 28 +- examples/content-less/background.js | 4 +- examples/content-less/content/scripts.js | 4 +- examples/content-less/content/styles.less | 60 ++-- .../content-main-world/content/styles.css | 7 +- examples/content-sass-module/background.js | 4 +- .../content/Logo.module.scss | 16 +- .../content-sass-module/content/scripts.js | 4 +- .../content-sass-module/content/styles.scss | 1 - examples/content-sass/background.js | 4 +- examples/content-sass/content/scripts.js | 4 +- examples/content-sass/content/styles.scss | 31 +- examples/content-shadow-dom/background.js | 4 +- examples/content-tailwind/background.js | 4 +- examples/content-typescript/background.ts | 4 +- .../content-typescript/content/scripts.ts | 2 +- .../content-typescript/content/styles.css | 29 +- examples/content/background.js | 4 +- examples/content/content/scripts.js | 4 +- examples/content/content/styles.css | 38 +- examples/content/template.spec.ts | 94 +++-- examples/data.ts | 338 +++++++++--------- examples/extension-fixtures-firefox.ts | 47 +++ examples/extension-fixtures.ts | 86 +++-- examples/locales/action/scripts.js | 4 +- examples/locales/action/styles.css | 1 - examples/new-crypto/newtab/styles.css | 1 - examples/new-env-esm/newtab/scripts.mjs | 2 +- examples/new-env-esm/newtab/styles.css | 1 - examples/new-env/newtab/scripts.ts | 2 +- examples/new-env/newtab/styles.css | 8 +- examples/new-esm/newtab/scripts.mjs | 2 +- examples/new-esm/newtab/styles.css | 1 - examples/new-less/newtab/scripts.js | 2 +- examples/new-less/newtab/styles.less | 1 - examples/new-preact/newtab/styles.css | 1 - examples/new-react-router/newtab/styles.css | 1 - examples/new-react/newtab/styles.css | 1 - examples/new-sass/newtab/scripts.js | 2 +- examples/new-sass/newtab/styles.scss | 1 - examples/new-typescript/newtab/scripts.ts | 2 +- examples/new-typescript/newtab/styles.css | 1 - examples/new-vue/newtab/styles.css | 1 - examples/new/newtab/scripts.js | 2 +- examples/new/newtab/styles.css | 1 - examples/sidebar/background.js | 22 +- examples/sidebar/sidebar/scripts.js | 2 +- examples/sidebar/sidebar/styles.css | 1 - examples/special-folders-pages/background.js | 4 +- examples/special-folders-pages/pages/main.css | 1 - .../special-folders-pages/sandbox/styles.css | 1 - .../special-folders-scripts/background.js | 16 +- .../special-folders-scripts/pages/index.css | 1 - .../scripts/content-script.js | 2 +- playwright.config.ts | 10 +- 78 files changed, 546 insertions(+), 558 deletions(-) create mode 100644 examples/content-css-module/images/extensionjs.svg create mode 100644 examples/extension-fixtures-firefox.ts diff --git a/examples/action/action/scripts.js b/examples/action/action/scripts.js index 7f6946b36..d2daf505c 100644 --- a/examples/action/action/scripts.js +++ b/examples/action/action/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 browser action page!') \ No newline at end of file diff --git a/examples/action/action/styles.css b/examples/action/action/styles.css index 69a24316c..75e01d08f 100644 --- a/examples/action/action/styles.css +++ b/examples/action/action/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/config-babel/newtab/scripts.js b/examples/config-babel/newtab/scripts.js index 7f6946b36..769a619ae 100644 --- a/examples/config-babel/newtab/scripts.js +++ b/examples/config-babel/newtab/scripts.js @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() diff --git a/examples/config-babel/newtab/styles.css b/examples/config-babel/newtab/styles.css index 69a24316c..75e01d08f 100644 --- a/examples/config-babel/newtab/styles.css +++ b/examples/config-babel/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/config-eslint/newtab/styles.css b/examples/config-eslint/newtab/styles.css index 69a24316c..75e01d08f 100644 --- a/examples/config-eslint/newtab/styles.css +++ b/examples/config-eslint/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/config-lint/newtab/styles.css b/examples/config-lint/newtab/styles.css index 69a24316c..75e01d08f 100644 --- a/examples/config-lint/newtab/styles.css +++ b/examples/config-lint/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/config-prettier/newtab/styles.css b/examples/config-prettier/newtab/styles.css index 69a24316c..75e01d08f 100644 --- a/examples/config-prettier/newtab/styles.css +++ b/examples/config-prettier/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/config-stylelint/newtab/scripts.js b/examples/config-stylelint/newtab/scripts.js index 7f6946b36..769a619ae 100644 --- a/examples/config-stylelint/newtab/scripts.js +++ b/examples/config-stylelint/newtab/scripts.js @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() diff --git a/examples/config-stylelint/newtab/styles.scss b/examples/config-stylelint/newtab/styles.scss index 0fb723984..7d8a01f29 100644 --- a/examples/config-stylelint/newtab/styles.scss +++ b/examples/config-stylelint/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/content-css-module/background.js b/examples/content-css-module/background.js index bfd9ec37a..612498080 100644 --- a/examples/content-css-module/background.js +++ b/examples/content-css-module/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-css-module/content/Logo.module.css b/examples/content-css-module/content/Logo.module.css index b1bcfab7a..22e2f8255 100644 --- a/examples/content-css-module/content/Logo.module.css +++ b/examples/content-css-module/content/Logo.module.css @@ -1,5 +1,3 @@ .logo { - width: 90px; - align-self: flex-start; -} - + width: 72px; +} \ No newline at end of file diff --git a/examples/content-css-module/content/scripts.js b/examples/content-css-module/content/scripts.js index bdff79381..e5ef3315d 100644 --- a/examples/content-css-module/content/scripts.js +++ b/examples/content-css-module/content/scripts.js @@ -1,11 +1,12 @@ import './styles.css' import styles from './Logo.module.css' +import extensionjsLogo from '../images/extensionjs.svg' console.log('hello from content_scripts') document.body.innerHTML += `
- +

Change the background-color ⬇

@@ -23,7 +24,7 @@ document.body.innerHTML += ` ` document.getElementById('colorPicker').addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', color: event.target.value diff --git a/examples/content-css-module/content/styles.css b/examples/content-css-module/content/styles.css index d837965a7..aa2320fc4 100644 --- a/examples/content-css-module/content/styles.css +++ b/examples/content-css-module/content/styles.css @@ -1,40 +1,38 @@ .content_script-box { - background: white; + 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-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; + font-size: small; +} + +.content_script-description a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; } .content_script-colorPicker { - display: block; width: 100%; height: 50px; } diff --git a/examples/content-css-module/images/extensionjs.svg b/examples/content-css-module/images/extensionjs.svg new file mode 100644 index 000000000..ebe0773a6 --- /dev/null +++ b/examples/content-css-module/images/extensionjs.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/content-env/background.ts b/examples/content-env/background.ts index 265bf0f8b..b95280507 100644 --- a/examples/content-env/background.ts +++ b/examples/content-env/background.ts @@ -1,7 +1,7 @@ console.log('hello from background script') // eslint-disable-next-line no-undef -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab?.id) } @@ -12,7 +12,7 @@ function changeBackgroundColor(color: string, tabId: number | undefined) { return } - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, func: setContentPageBackgroundColor, diff --git a/examples/content-env/content/scripts.ts b/examples/content-env/content/scripts.ts index d33abad24..e482ad2e3 100644 --- a/examples/content-env/content/scripts.ts +++ b/examples/content-env/content/scripts.ts @@ -35,7 +35,7 @@ const colorPicker = document.getElementById('colorPicker') // Add the event listener only if it hasn't been added yet if (colorPicker && !colorPicker.hasAttribute('data-listener')) { colorPicker.addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', // @ts-expect-error diff --git a/examples/content-env/content/styles.css b/examples/content-env/content/styles.css index 6e8dd596c..1a0f4bd74 100644 --- a/examples/content-env/content/styles.css +++ b/examples/content-env/content/styles.css @@ -1,52 +1,42 @@ .content_script-box { - background: white; + color: #c9c9c9; + background-color: #0a0c10; position: fixed; right: 0; bottom: 0; z-index: 9; width: 315px; - height: 375px; - 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; -} - -.content_script-logo-box { - display: flex; - align-items: center; - justify-content: center; - gap: 1em; + border-radius: 6px; } .content_script-logo { - width: 90px; - align-self: flex-start; + width: 72px; } .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; + font-size: small; +} + +.content_script-description a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; } .content_script-colorPicker { - display: block; width: 100%; height: 50px; } diff --git a/examples/content-esm/background.mjs b/examples/content-esm/background.mjs index 062b03a0d..67e2eb72d 100644 --- a/examples/content-esm/background.mjs +++ b/examples/content-esm/background.mjs @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-esm/content/scripts.mjs b/examples/content-esm/content/scripts.mjs index 60a1ea6b1..8de8a41fa 100644 --- a/examples/content-esm/content/scripts.mjs +++ b/examples/content-esm/content/scripts.mjs @@ -6,7 +6,7 @@ console.log('hello from content_scripts') document.body.innerHTML += contentComponent document.getElementById('colorPicker').addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', color: event.target.value diff --git a/examples/content-esm/content/styles.css b/examples/content-esm/content/styles.css index 0deb61ca1..1a0f4bd74 100644 --- a/examples/content-esm/content/styles.css +++ b/examples/content-esm/content/styles.css @@ -1,62 +1,42 @@ .content_script-box { - background: white; + 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; - color: #333; -} - -.content_script-header { - display: flex; - align-items: center; - justify-content: left; - gap: 1em; + border-radius: 6px; } .content_script-logo { - width: 90px; - align-self: flex-start; - filter: grayscale(1); - transition: - filter 2s, - border-color 2s; -} - -.content_script-logo:hover { - filter: grayscale(0); - border-color: aquamarine; + width: 72px; } .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; + font-size: small; +} + +.content_script-description a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; } .content_script-colorPicker { - display: block; width: 100%; height: 50px; } diff --git a/examples/content-less-module/background.js b/examples/content-less-module/background.js index bfd9ec37a..612498080 100644 --- a/examples/content-less-module/background.js +++ b/examples/content-less-module/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-less-module/content/Logo.module.less b/examples/content-less-module/content/Logo.module.less index abc7cf934..22e2f8255 100644 --- a/examples/content-less-module/content/Logo.module.less +++ b/examples/content-less-module/content/Logo.module.less @@ -1,18 +1,3 @@ .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; -} - + width: 72px; +} \ No newline at end of file diff --git a/examples/content-less-module/content/scripts.js b/examples/content-less-module/content/scripts.js index d42223dba..f84348276 100644 --- a/examples/content-less-module/content/scripts.js +++ b/examples/content-less-module/content/scripts.js @@ -23,7 +23,7 @@ document.body.innerHTML += ` ` document.getElementById('colorPicker').addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', color: event.target.value diff --git a/examples/content-less-module/content/styles.less b/examples/content-less-module/content/styles.less index d837965a7..dbc0cdd96 100644 --- a/examples/content-less-module/content/styles.less +++ b/examples/content-less-module/content/styles.less @@ -1,40 +1,38 @@ .content_script-box { - background: white; + 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-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; + font-size: small; +} + +.content_script-description a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; } .content_script-colorPicker { - display: block; width: 100%; height: 50px; -} +} \ No newline at end of file diff --git a/examples/content-less/background.js b/examples/content-less/background.js index bfd9ec37a..612498080 100644 --- a/examples/content-less/background.js +++ b/examples/content-less/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-less/content/scripts.js b/examples/content-less/content/scripts.js index 1a1116eae..d34192116 100644 --- a/examples/content-less/content/scripts.js +++ b/examples/content-less/content/scripts.js @@ -4,7 +4,7 @@ console.log('hello from content_scripts') document.body.innerHTML += `
- +

Change the background-color ⬇

@@ -22,7 +22,7 @@ document.body.innerHTML += ` ` document.getElementById('colorPicker').addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', color: event.target.value diff --git a/examples/content-less/content/styles.less b/examples/content-less/content/styles.less index 092f3152d..4b7f80a2a 100644 --- a/examples/content-less/content/styles.less +++ b/examples/content-less/content/styles.less @@ -1,45 +1,41 @@ .content_script-box { - background: white; + 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_script-logo { + width: 72px; + } -.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-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_script-description { - color: #999; -} + .content_script-description { + font-size: small; -.content_script-colorPicker { - display: block; - width: 100%; - height: 50px; -} + a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; + } + } + + .content_script-colorPicker { + width: 100%; + height: 50px; + } +} \ No newline at end of file diff --git a/examples/content-main-world/content/styles.css b/examples/content-main-world/content/styles.css index 553baa42c..0b6d34126 100644 --- a/examples/content-main-world/content/styles.css +++ b/examples/content-main-world/content/styles.css @@ -1,6 +1,6 @@ .content_script-box { color: #c9c9c9; - background-color: #0A0C10; + background-color: #0a0c10; position: fixed; right: 0; bottom: 0; @@ -17,11 +17,11 @@ } .content_script-logo { - width: 90px; + width: 72px; + align-self: flex-start; } .content_script-title { - text-align: left; font-size: 1.85em; color: #ffffff; line-height: 1.1; @@ -30,7 +30,6 @@ font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; - -ms-word-break: break-all; word-break: break-word; } diff --git a/examples/content-sass-module/background.js b/examples/content-sass-module/background.js index bfd9ec37a..612498080 100644 --- a/examples/content-sass-module/background.js +++ b/examples/content-sass-module/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-sass-module/content/Logo.module.scss b/examples/content-sass-module/content/Logo.module.scss index abc7cf934..1ad612e40 100644 --- a/examples/content-sass-module/content/Logo.module.scss +++ b/examples/content-sass-module/content/Logo.module.scss @@ -1,18 +1,4 @@ .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; + width: 72px; } diff --git a/examples/content-sass-module/content/scripts.js b/examples/content-sass-module/content/scripts.js index 6f7580711..2d4e46ee1 100644 --- a/examples/content-sass-module/content/scripts.js +++ b/examples/content-sass-module/content/scripts.js @@ -5,7 +5,7 @@ console.log('hello from content_scripts') document.body.innerHTML += `
- +

Change the background-color ⬇

@@ -23,7 +23,7 @@ document.body.innerHTML += ` ` document.getElementById('colorPicker').addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', color: event.target.value diff --git a/examples/content-sass-module/content/styles.scss b/examples/content-sass-module/content/styles.scss index d837965a7..2780073e1 100644 --- a/examples/content-sass-module/content/styles.scss +++ b/examples/content-sass-module/content/styles.scss @@ -25,7 +25,6 @@ font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; - -ms-word-break: break-all; word-break: break-word; } diff --git a/examples/content-sass/background.js b/examples/content-sass/background.js index bfd9ec37a..612498080 100644 --- a/examples/content-sass/background.js +++ b/examples/content-sass/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-sass/content/scripts.js b/examples/content-sass/content/scripts.js index 847d54fda..8ada58bb7 100644 --- a/examples/content-sass/content/scripts.js +++ b/examples/content-sass/content/scripts.js @@ -4,7 +4,7 @@ console.log('hello from content_scripts') document.body.innerHTML += `
- +

Change the background-color ⬇

@@ -22,7 +22,7 @@ document.body.innerHTML += ` ` document.getElementById('colorPicker').addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', color: event.target.value diff --git a/examples/content-sass/content/styles.scss b/examples/content-sass/content/styles.scss index 092f3152d..415e64bcc 100644 --- a/examples/content-sass/content/styles.scss +++ b/examples/content-sass/content/styles.scss @@ -1,45 +1,42 @@ .content_script-box { - background: white; + 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; + width: 72px; } .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; + font-size: small; +} + +.content_script-description a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; } .content_script-colorPicker { - display: block; width: 100%; height: 50px; -} +} \ No newline at end of file diff --git a/examples/content-shadow-dom/background.js b/examples/content-shadow-dom/background.js index bfd9ec37a..612498080 100644 --- a/examples/content-shadow-dom/background.js +++ b/examples/content-shadow-dom/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-tailwind/background.js b/examples/content-tailwind/background.js index bfd9ec37a..612498080 100644 --- a/examples/content-tailwind/background.js +++ b/examples/content-tailwind/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content-typescript/background.ts b/examples/content-typescript/background.ts index 3f38062b0..5d243a56c 100644 --- a/examples/content-typescript/background.ts +++ b/examples/content-typescript/background.ts @@ -1,7 +1,7 @@ console.log('hello from background script') // eslint-disable-next-line no-undef -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { handleChangeBackgroundColor(request.color, sender.tab?.id) } @@ -12,7 +12,7 @@ function handleChangeBackgroundColor(color: string, tabId: number | undefined) { return } - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, func: setPageBackgroundColor, diff --git a/examples/content-typescript/content/scripts.ts b/examples/content-typescript/content/scripts.ts index 6e92e5ab2..897441397 100644 --- a/examples/content-typescript/content/scripts.ts +++ b/examples/content-typescript/content/scripts.ts @@ -22,7 +22,7 @@ document.body.innerHTML += ` ` document.getElementById('colorPicker')?.addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', // @ts-expect-error diff --git a/examples/content-typescript/content/styles.css b/examples/content-typescript/content/styles.css index 092f3152d..1a0f4bd74 100644 --- a/examples/content-typescript/content/styles.css +++ b/examples/content-typescript/content/styles.css @@ -1,45 +1,42 @@ .content_script-box { - background: white; + 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; + width: 72px; } .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; + font-size: small; +} + +.content_script-description a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; } .content_script-colorPicker { - display: block; width: 100%; height: 50px; } diff --git a/examples/content/background.js b/examples/content/background.js index bfd9ec37a..612498080 100644 --- a/examples/content/background.js +++ b/examples/content/background.js @@ -1,13 +1,13 @@ console.log('hello from background script') -chrome.runtime.onMessage.addListener((request, sender) => { +browser.runtime.onMessage.addListener((request, sender) => { if (request.action === 'changeBackgroundColor') { changeBackgroundColor(request.color, sender.tab.id) } }) function changeBackgroundColor(color, tabId) { - chrome.scripting + browser.scripting .executeScript({ target: {tabId}, function: setPageBackgroundColor, diff --git a/examples/content/content/scripts.js b/examples/content/content/scripts.js index 1f4557094..abd573db3 100644 --- a/examples/content/content/scripts.js +++ b/examples/content/content/scripts.js @@ -4,7 +4,7 @@ console.log('hello from content_scripts') document.body.innerHTML += `
- +

Change the background-color ⬇

@@ -22,7 +22,7 @@ document.body.innerHTML += ` ` document.getElementById('colorPicker').addEventListener('input', (event) => { - chrome.runtime + browser.runtime .sendMessage({ action: 'changeBackgroundColor', color: event.target.value diff --git a/examples/content/content/styles.css b/examples/content/content/styles.css index 3e90a6391..1a0f4bd74 100644 --- a/examples/content/content/styles.css +++ b/examples/content/content/styles.css @@ -1,54 +1,42 @@ .content_script-box { - background: white; + 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_script-logo:hover { - filter: grayscale(0); - border-color: aquamarine; + width: 72px; } .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; + font-size: small; +} + +.content_script-description a { + text-decoration: none; + border-bottom: 2px solid #c9c9c9; + color: #e5e7eb; } .content_script-colorPicker { - display: block; width: 100%; height: 50px; } diff --git a/examples/content/template.spec.ts b/examples/content/template.spec.ts index 164a642db..d5d234bd0 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-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('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-box > 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-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)') + }) }) diff --git a/examples/data.ts b/examples/data.ts index 4d3047b3f..4d0a557ce 100644 --- a/examples/data.ts +++ b/examples/data.ts @@ -11,15 +11,15 @@ const DEFAULT_TEMPLATE: Template = { } const JS_TEMPLATES: Template[] = [ - { - name: 'action', - uiContext: ['action'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, + // { + // name: 'action', + // uiContext: ['action'], + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, { name: 'content', uiContext: ['content'], @@ -29,71 +29,8 @@ const JS_TEMPLATES: Template[] = [ hasEnv: false, configFiles: undefined }, - { - name: 'content-esm', - uiContext: ['content'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'content-css-module', - uiContext: ['content'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'content-less', - uiContext: ['content'], - uiFramework: undefined, - css: 'less', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'content-less-module', - uiContext: ['content'], - uiFramework: undefined, - css: 'less', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'content-main-world', - uiContext: ['content'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'content-sass', - uiContext: ['content'], - uiFramework: undefined, - css: 'sass', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'content-sass-module', - uiContext: ['content'], - uiFramework: undefined, - css: 'sass', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, // { - // name: 'content-shadow-dom', + // name: 'content-esm', // uiContext: ['content'], // uiFramework: undefined, // css: 'css', @@ -101,96 +38,159 @@ const JS_TEMPLATES: Template[] = [ // hasEnv: false, // configFiles: undefined // }, - { - name: 'declarative_net_request', - uiContext: undefined, - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'locales', - uiContext: ['action'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'new', - uiContext: ['newTab'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'new-esm', - uiContext: ['newTab'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'new-less', - uiContext: ['newTab'], - uiFramework: undefined, - css: 'less', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'new-sass', - uiContext: ['newTab'], - uiFramework: undefined, - css: 'sass', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'sidebar', - uiContext: ['sidebar'], - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'special-folders-pages', - uiContext: undefined, - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'special-folders-scripts', - uiContext: undefined, - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - }, - { - name: 'storage', - uiContext: undefined, - uiFramework: undefined, - css: 'css', - hasBackground: false, - hasEnv: false, - configFiles: undefined - } + // { + // name: 'content-css-module', + // uiContext: ['content'], + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'content-less', + // uiContext: ['content'], + // uiFramework: undefined, + // css: 'less', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'content-less-module', + // uiContext: ['content'], + // uiFramework: undefined, + // css: 'less', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'content-main-world', + // uiContext: ['content'], + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'content-sass', + // uiContext: ['content'], + // uiFramework: undefined, + // css: 'sass', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'content-sass-module', + // uiContext: ['content'], + // uiFramework: undefined, + // css: 'sass', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // // { + // // name: 'content-shadow-dom', + // // uiContext: ['content'], + // // uiFramework: undefined, + // // css: 'css', + // // hasBackground: false, + // // hasEnv: false, + // // configFiles: undefined + // // }, + // { + // name: 'declarative_net_request', + // uiContext: undefined, + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'locales', + // uiContext: ['action'], + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'new', + // uiContext: ['newTab'], + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'new-esm', + // uiContext: ['newTab'], + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'new-less', + // uiContext: ['newTab'], + // uiFramework: undefined, + // css: 'less', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'new-sass', + // uiContext: ['newTab'], + // uiFramework: undefined, + // css: 'sass', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'sidebar', + // uiContext: ['sidebar'], + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'special-folders-pages', + // uiContext: undefined, + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'special-folders-scripts', + // uiContext: undefined, + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // }, + // { + // name: 'storage', + // uiContext: undefined, + // uiFramework: undefined, + // css: 'css', + // hasBackground: false, + // hasEnv: false, + // configFiles: undefined + // } ] const WASM_TEMPLATES: Template[] = [] @@ -422,13 +422,13 @@ const CONFIG_TEMPLATES: Template[] = [ ] const ALL_TEMPLATES: Template[] = [ - DEFAULT_TEMPLATE, + // DEFAULT_TEMPLATE, ...JS_TEMPLATES, - ...WASM_TEMPLATES, - ...TS_TEMPLATES, - ...CUSTOM_TEMPLATES, - ...FRAMEWORK_TEMPLATES, - ...CONFIG_TEMPLATES + // ...WASM_TEMPLATES, + // ...TS_TEMPLATES, + // ...CUSTOM_TEMPLATES, + // ...FRAMEWORK_TEMPLATES, + // ...CONFIG_TEMPLATES ] const ALL_TEMPLATES_BUT_DEFAULT = ALL_TEMPLATES.filter( diff --git a/examples/extension-fixtures-firefox.ts b/examples/extension-fixtures-firefox.ts new file mode 100644 index 000000000..4fd73f471 --- /dev/null +++ b/examples/extension-fixtures-firefox.ts @@ -0,0 +1,47 @@ +import {test as base, firefox, type BrowserContext} from '@playwright/test' + +export const extensionFixturesFirefox = ( + pathToExtension: string, + headless: boolean +) => { + return base.extend<{ + context: BrowserContext + extensionId: string + }>({ + context: async ({}, use) => { + // Override or add custom preferences here if needed + const masterPreferences = {} + + // Create a temporary profile path for Firefox + // Optionally set a custom profile path if needed, or leave it as '' + const firefoxProfilePath = '' + + const context = await firefox.launchPersistentContext( + firefoxProfilePath, + { + headless: headless, + args: [ + `--disable-extensions-except=${pathToExtension}`, + `--load-extension=${pathToExtension}`, + // Add other required arguments for Firefox here + '--no-first-run', + '--disable-background-networking' + ].filter((arg) => !!arg), + // Set preferences for the Firefox context + firefoxUserPrefs: masterPreferences + } + ) + + await use(context) + await context.close() + }, + extensionId: async ({context}, use) => { + // for manifest v2: + let [background] = context.backgroundPages() + if (!background) background = await context.waitForEvent('backgroundpage') + + const extensionId = background.url().split('/')[2] + await use(extensionId) + } + }) +} diff --git a/examples/extension-fixtures.ts b/examples/extension-fixtures.ts index 0aa35acc8..e12f1f4ff 100644 --- a/examples/extension-fixtures.ts +++ b/examples/extension-fixtures.ts @@ -9,49 +9,59 @@ export const extensionFixtures = ( extensionId: string }>({ context: async ({}, use) => { - const context = await chromium.launchPersistentContext('', { - headless: false, - args: [ - headless ? `--headless=new` : '', - `--disable-extensions-except=${pathToExtension}`, - `--load-extension=${pathToExtension}`, - '--no-first-run', // Disable Chrome's native first run experience. - '--disable-client-side-phishing-detection', // Disables client-side phishing detection - '--disable-component-extensions-with-background-pages', // Disable some built-in extensions that aren't affected by '--disable-extensions' - '--disable-default-apps', // Disable installation of default apps - '--disable-features=InterestFeedContentSuggestions', // Disables the Discover feed on NTP - '--disable-features=Translate', // Disables Chrome translation, both the manual option and the popup prompt when a page with differing language is detected. - '--hide-scrollbars', // Hide scrollbars from screenshots. - '--mute-audio', // Mute any audio - '--no-default-browser-check', // Disable the default browser check, do not prompt to set it as such - '--no-first-run', // Skip first run wizards - '--ash-no-nudges', // Avoids blue bubble "user education" nudges (eg., "… give your browser a new look", Memory Saver) - '--disable-search-engine-choice-screen', // Disable the 2023+ search engine choice screen - '--disable-features=MediaRoute', // Avoid the startup dialog for `Do you want the application “Chromium.app” to accept incoming network connections?`. Also disables the Chrome Media Router which creates background networking activity to discover cast targets. A superset of disabling DialMediaRouteProvider. - '--use-mock-keychain', // Use mock keychain on Mac to prevent the blocking permissions dialog about "Chrome wants to use your confidential information stored in your keychain" - '--disable-background-networking', // Disable various background network services, including extension updating, safe browsing service, upgrade detector, translate, UMA - '--disable-breakpad', // Disable crashdump collection (reporting is already disabled in Chromium) - '--disable-component-update', // Don't update the browser 'components' listed at chrome://components/ - '--disable-domain-reliability', // Disables Domain Reliability Monitoring, which tracks whether the browser has difficulty contacting Google-owned sites and uploads reports to Google. - '--disable-features=AutofillServerCommunicatio', // Disables autofill server communication. This feature isn't disabled via other 'parent' flags. - '--disable-features=CertificateTransparencyComponentUpdate', - '--disable-sync', // Disable syncing to a Google account - '--disable-features=OptimizationHints', // Used for turning on Breakpad crash reporting in a debug environment where crash reporting is typically compiled but disabled. Disable the Chrome Optimization Guide and networking with its service API - '--disable-features=DialMediaRouteProvider', // A weaker form of disabling the MediaRouter feature. See that flag's details. - '--no-pings', // Don't send hyperlink auditing pings - '--enable-features=SidePanelUpdates' // Ensure the side panel is visible. This is used for testing the side panel feature. - ].filter((arg) => !!arg) - }) + // Override or add custom preferences here if needed + // const masterPreferences = {} + + // Create a temporary profile path for Firefox + // Optionally set a custom profile path if needed, or leave it as '' + const chromiumProfilePath = '' + + const context = await chromium.launchPersistentContext( + chromiumProfilePath, + { + headless: false, + args: [ + headless ? `--headless=new` : '', + `--disable-extensions-except=${pathToExtension}`, + `--load-extension=${pathToExtension}`, + '--no-first-run', // Disable Chrome's native first run experience. + '--disable-client-side-phishing-detection', // Disables client-side phishing detection + '--disable-component-extensions-with-background-pages', // Disable some built-in extensions that aren't affected by '--disable-extensions' + '--disable-default-apps', // Disable installation of default apps + '--disable-features=InterestFeedContentSuggestions', // Disables the Discover feed on NTP + '--disable-features=Translate', // Disables Chrome translation, both the manual option and the popup prompt when a page with differing language is detected. + '--hide-scrollbars', // Hide scrollbars from screenshots. + '--mute-audio', // Mute any audio + '--no-default-browser-check', // Disable the default browser check, do not prompt to set it as such + '--no-first-run', // Skip first run wizards + '--ash-no-nudges', // Avoids blue bubble "user education" nudges (eg., "… give your browser a new look", Memory Saver) + '--disable-search-engine-choice-screen', // Disable the 2023+ search engine choice screen + '--disable-features=MediaRoute', // Avoid the startup dialog for `Do you want the application “Chromium.app” to accept incoming network connections?`. Also disables the Chrome Media Router which creates background networking activity to discover cast targets. A superset of disabling DialMediaRouteProvider. + '--use-mock-keychain', // Use mock keychain on Mac to prevent the blocking permissions dialog about "Chrome wants to use your confidential information stored in your keychain" + '--disable-background-networking', // Disable various background network services, including extension updating, safe browsing service, upgrade detector, translate, UMA + '--disable-breakpad', // Disable crashdump collection (reporting is already disabled in Chromium) + '--disable-component-update', // Don't update the browser 'components' listed at chrome://components/ + '--disable-domain-reliability', // Disables Domain Reliability Monitoring, which tracks whether the browser has difficulty contacting Google-owned sites and uploads reports to Google. + '--disable-features=AutofillServerCommunicatio', // Disables autofill server communication. This feature isn't disabled via other 'parent' flags. + '--disable-features=CertificateTransparencyComponentUpdate', + '--disable-sync', // Disable syncing to a Google account + '--disable-features=OptimizationHints', // Used for turning on Breakpad crash reporting in a debug environment where crash reporting is typically compiled but disabled. Disable the Chrome Optimization Guide and networking with its service API + '--disable-features=DialMediaRouteProvider', // A weaker form of disabling the MediaRouter feature. See that flag's details. + '--no-pings', // Don't send hyperlink auditing pings + '--enable-features=SidePanelUpdates' // Ensure the side panel is visible. This is used for testing the side panel feature. + ].filter((arg) => !!arg), + }, + ) await use(context) await context.close() }, extensionId: async ({context}, use) => { /* - // for manifest v2: - let [background] = context.backgroundPages() - if (!background) - background = await context.waitForEvent('backgroundpage') - */ + // for manifest v2: + let [background] = context.backgroundPages() + if (!background) + background = await context.waitForEvent('backgroundpage') + */ // for manifest v3: let [background] = context.serviceWorkers() diff --git a/examples/locales/action/scripts.js b/examples/locales/action/scripts.js index 573ffae1f..09f4b4c37 100644 --- a/examples/locales/action/scripts.js +++ b/examples/locales/action/scripts.js @@ -1,3 +1,3 @@ -document.getElementById('title').textContent = chrome.i18n.getMessage('title') +document.getElementById('title').textContent = browser.i18n.getMessage('title') document.getElementById('learnMore').textContent = - chrome.i18n.getMessage('learnMore') + browser.i18n.getMessage('learnMore') diff --git a/examples/locales/action/styles.css b/examples/locales/action/styles.css index 69a24316c..75e01d08f 100644 --- a/examples/locales/action/styles.css +++ b/examples/locales/action/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/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-env-esm/newtab/scripts.mjs b/examples/new-env-esm/newtab/scripts.mjs index 29d939dc6..bb608103a 100644 --- a/examples/new-env-esm/newtab/scripts.mjs +++ b/examples/new-env-esm/newtab/scripts.mjs @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() 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/newtab/scripts.ts b/examples/new-env/newtab/scripts.ts index 94404b12c..f1038e237 100644 --- a/examples/new-env/newtab/scripts.ts +++ b/examples/new-env/newtab/scripts.ts @@ -1,5 +1,5 @@ function getManifestData() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const extensionManifest = getManifestData() 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-esm/newtab/scripts.mjs b/examples/new-esm/newtab/scripts.mjs index 7f6946b36..769a619ae 100644 --- a/examples/new-esm/newtab/scripts.mjs +++ b/examples/new-esm/newtab/scripts.mjs @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() 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-less/newtab/scripts.js b/examples/new-less/newtab/scripts.js index 7f6946b36..769a619ae 100644 --- a/examples/new-less/newtab/scripts.js +++ b/examples/new-less/newtab/scripts.js @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() 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-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-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/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-sass/newtab/scripts.js b/examples/new-sass/newtab/scripts.js index 7f6946b36..769a619ae 100644 --- a/examples/new-sass/newtab/scripts.js +++ b/examples/new-sass/newtab/scripts.js @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() 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-typescript/newtab/scripts.ts b/examples/new-typescript/newtab/scripts.ts index f97b05439..c850f498f 100644 --- a/examples/new-typescript/newtab/scripts.ts +++ b/examples/new-typescript/newtab/scripts.ts @@ -1,5 +1,5 @@ function getRuntimeManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getRuntimeManifest() 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-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/newtab/scripts.js b/examples/new/newtab/scripts.js index 7f6946b36..769a619ae 100644 --- a/examples/new/newtab/scripts.js +++ b/examples/new/newtab/scripts.js @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() 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/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/sidebar/scripts.js b/examples/sidebar/sidebar/scripts.js index 7f6946b36..769a619ae 100644 --- a/examples/sidebar/sidebar/scripts.js +++ b/examples/sidebar/sidebar/scripts.js @@ -1,5 +1,5 @@ function getManifest() { - return chrome.runtime.getManifest() + return browser.runtime.getManifest() } const manifestData = getManifest() 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/background.js b/examples/special-folders-pages/background.js index f319b01ff..856054522 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/pages/main.css index 01d5ad62f..a0fe902c1 100644 --- a/examples/special-folders-pages/pages/main.css +++ b/examples/special-folders-pages/pages/main.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/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/background.js b/examples/special-folders-scripts/background.js index 253f9a98e..10942a93b 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/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/scripts/content-script.js b/examples/special-folders-scripts/scripts/content-script.js index 7ead8dc78..c2176a5ab 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/playwright.config.ts b/playwright.config.ts index 3b4c72b00..46a7f0f41 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -36,12 +36,12 @@ export default defineConfig({ { name: 'chromium', use: {...devices['Desktop Chrome']} - } + }, - // { - // name: 'firefox', - // use: { ...devices['Desktop Firefox'] }, - // }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, // { // name: 'webkit',