Fully cross-browser templates (#196)

examples/action-chatgpt/manifest.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/chrome-manifest.json",
   "manifest_version": 3,
   "version": "0.0.1",
-  "name": "Action ChatGPT Template",
+  "name": "Action Chatgpt",
   "description": "An Extension.js example.",
   "icons": {
     "16": "images/extension_16.png",

examples/locales/_locales/pt_BR/messages.json → examples/action-locales/_locales/pt_BR/messages.json

@@ -4,7 +4,7 @@
     "description": "The title of the extension page"
   },
   "learnMore": {
-    "message": "Saiba mais sobre a criação de extensões multiplataforma em ",
+    "message": "Saiba mais sobre como criar extensões multiplataforma em ",
     "description": "The learn more text"
   }
 }

examples/action-locales/action/scripts.js

@@ -0,0 +1,12 @@
+if (
+  process.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+  process.env.EXTENSION_PUBLIC_BROWSER === 'firefox-based'
+) {
+  document.getElementById('title').textContent = chrome.i18n.getMessage('title')
+  document.getElementById('learnMore').textContent =
+    chrome.i18n.getMessage('learnMore')
+} else {
+  document.getElementById('title').textContent = chrome.i18n.getMessage('title')
+  document.getElementById('learnMore').textContent =
+    chrome.i18n.getMessage('learnMore')
+}

examples/action-locales/action/styles.css

@@ -0,0 +1,35 @@
+html {
+  font-size: 62.5%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+}
+
+body {
+  width: 300px;
+  height: 100%;
+  padding: 1rem;
+  font-size: 1.35rem;
+  line-height: 1.618;
+  color: #c9c9c9;
+  background-color: #0A0C10;
+}
+
+h1 {
+  line-height: 1.1;
+  font-weight: 700;
+  font-size: 2.7em;
+  margin-bottom: 1.5rem;
+}
+
+a {
+  text-decoration: none;
+  border-bottom: 2px solid #c9c9c9;
+  color: #e5e7eb;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+}

examples/locales/manifest.json → examples/action-locales/manifest.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/chrome-manifest.json",
   "manifest_version": 3,
   "version": "0.0.1",
-  "name": "Locales Template",
+  "name": "Action Locales",
   "author": "Cezar Augusto",
   "default_locale": "en",
   "description": "An Extension.js example.",

examples/locales/package.json → examples/action-locales/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "locales",
+  "name": "action-locales",
   "description": "An Extension.js example.",
   "version": "0.0.1",
   "author": {

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

@@ -5,52 +5,20 @@ html {
 }
 
 body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: calc(100vh - 4rem);
-  min-width: 300px;
-  padding: 2rem;
-  font-size: 1.8rem;
+  width: 300px;
+  height: 100%;
+  padding: 1rem;
+  font-size: 1.35rem;
   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;
+  font-size: 2.7em;
   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 {
@@ -59,29 +27,9 @@ a {
   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);
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
 }
-
-header > div {
-  display: flex;
-  align-items: center;
-}

examples/action/manifest.json

@@ -2,12 +2,13 @@
   "$schema": "https://json.schemastore.org/chrome-manifest.json",
   "manifest_version": 3,
   "version": "0.0.1",
-  "name": "Action Template",
+  "name": "Action",
   "description": "An Extension.js example.",
   "icons": {
     "16": "images/extension_16.png",
     "48": "images/extension_48.png"
   },
+  "permissions": ["storage", "tabs", "activeTab", "scripting"],
   "action": {
     "default_popup": "./action/index.html",
     "default_title": "Action",

examples/content-css-modules/background.js

@@ -0,0 +1 @@
+console.log('Hello from the background script!')

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

@@ -0,0 +1,5 @@
+.content_logo {
+  width: 72px;
+  background: #c9c9c9;
+  border-radius: 6px;
+}

examples/content-css-modules/content/scripts.js

@@ -0,0 +1,23 @@
+import './styles.css'
+import styles from './Logo.module.css'
+import logo from '../images/logo.png'
+
+console.log('hello from content_scripts')
+
+document.body.innerHTML += `
+  <div class="content_script">
+    <img class=${styles.content_logo} src="${logo}" />
+    <h1 class="content_title">
+      Welcome to your CSS Modules Extension
+    </h1>
+    <p class="content_description">
+      Learn more about creating cross-browser extensions at <a
+        className="underline hover:no-underline"
+        href="https://extension.js.org"
+        target="_blank"
+      >
+      https://extension.js.org
+      </a>
+    </p>
+  </div>
+  `

examples/content-css-modules/content/styles.css

@@ -0,0 +1,33 @@
+.content_script {
+  color: #c9c9c9;
+  background-color: #0a0c10;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 315px;
+  margin: 1rem;
+  padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  border-radius: 6px;
+}
+
+.content_title {
+  font-size: 1.85em;
+  line-height: 1.1;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-weight: 700;
+}
+
+.content_description {
+  font-size: small;
+}
+
+.content_description a {
+  text-decoration: none;
+  border-bottom: 2px solid #c9c9c9;
+  color: #e5e7eb;
+}