Cross-browser templates

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!')

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;
 }

examples/config-babel/newtab/scripts.js

@@ -1,5 +1,5 @@
 function getManifest() {
-  return chrome.runtime.getManifest()
+  return browser.runtime.getManifest()
 }
 
 const manifestData = getManifest()

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;
 }

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;
 }

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;
 }

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;
 }

examples/config-stylelint/newtab/scripts.js

@@ -1,5 +1,5 @@
 function getManifest() {
-  return chrome.runtime.getManifest()
+  return browser.runtime.getManifest()
 }
 
 const manifestData = getManifest()

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;
 }

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,

examples/content-css-module/content/Logo.module.css

@@ -1,5 +1,3 @@
 .logo {
-  width: 90px;
-  align-self: flex-start;
-}
-
+  width: 72px;
+}

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 += `
 <div class="content_script-box">
-  <img class=${styles.logo} src="/logo.svg" />
+  <img class=${styles.logo} src="${extensionjsLogo}" />
   <h1 class="content_script-title">
     Change the background-color ⬇
   </h1>
@@ -23,7 +24,7 @@ document.body.innerHTML += `
 `
 
 document.getElementById('colorPicker').addEventListener('input', (event) => {
-  chrome.runtime
+  browser.runtime
     .sendMessage({
       action: 'changeBackgroundColor',
       color: event.target.value

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;
 }

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,

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

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;
 }

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,

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

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;
 }

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,