Improve .env files handling. Fix #40

examples/action-chatgpt/.env.example

@@ -1 +1 @@
-EXTENSION_OPENAI_API_KEY='My API Key'
+EXTENSION_PUBLIC_OPENAI_API_KEY='My API Key'

examples/action-chatgpt/action/ActionApp.tsx

@@ -4,7 +4,7 @@ import chatgptLogo from '../images/chatgpt.png'
 import extensionJsLogo from '../images/extension_128.png'
 
 const openai = new OpenAI({
-  apiKey: process.env.EXTENSION_OPENAI_API_KEY!,
+  apiKey: process.env.EXTENSION_PUBLIC_OPENAI_API_KEY!,
   dangerouslyAllowBrowser: true
 })
 
@@ -19,7 +19,7 @@ function ActionApp() {
       content:
         'Hello there! This is your ChatGPT extension sample, ' +
         'built with React, Tailwind.css, and DaisyUI. ' +
-        'For it to work, create a .env file with your EXTENSION_OPENAI_API_KEY. ' +
+        'For it to work, create a .env file with your EXTENSION_PUBLIC_OPENAI_API_KEY. ' +
         "You can get an API key from OpenAI's website",
       role: 'assistant'
     },

examples/action/action/scripts.js

@@ -2,10 +2,10 @@ function getManifest() {
   return chrome.runtime.getManifest()
 }
 
-const manifest = getManifest()
+const manifestData = getManifest()
 
 console.table({
-  name: manifest.name,
-  version: manifest.version,
-  description: manifest.description
+  name: manifestData.name,
+  version: manifestData.version,
+  description: manifestData.description
 })

examples/config-babel/newtab/scripts.js

@@ -2,10 +2,10 @@ function getManifest() {
   return chrome.runtime.getManifest()
 }
 
-const manifest = getManifest()
+const manifestData = getManifest()
 
 console.table({
-  name: manifest.name,
-  version: manifest.version,
-  description: manifest.description
+  name: manifestData.name,
+  version: manifestData.version,
+  description: manifestData.description
 })

examples/config-eslint/newtab/scripts.ts

@@ -1,11 +1 @@
-function getManifest() {
-  return chrome.runtime.getManifest()
-}
-
-const manifest = getManifest()
-
-console.table({
-  name: manifest.name,
-  version: manifest.version,
-  description: manifest.description
-})
+console.log('Hello, ESLint!')

examples/config-lint/newtab/scripts.ts

@@ -1,11 +1 @@
-function getManifest() {
-  return chrome.runtime.getManifest()
-}
-
-const manifest = getManifest()
-
-console.table({
-  name: manifest.name,
-  version: manifest.version,
-  description: manifest.description
-})
+console.log('Linters gonna lint!')

examples/config-prettier/newtab/scripts.ts

@@ -1,11 +1 @@
-function getManifest() {
-  return chrome.runtime.getManifest()
-}
-
-const manifest = getManifest()
-
-console.table({
-  name: manifest.name,
-  version: manifest.version,
-  description: manifest.description
-})
+console.log('Hello, Prettier!')

examples/config-stylelint/newtab/scripts.js

@@ -2,10 +2,10 @@ function getManifest() {
   return chrome.runtime.getManifest()
 }
 
-const manifest = getManifest()
+const manifestData = getManifest()
 
 console.table({
-  name: manifest.name,
-  version: manifest.version,
-  description: manifest.description
+  name: manifestData.name,
+  version: manifestData.version,
+  description: manifestData.description
 })

examples/content-env/.env.chrome

@@ -0,0 +1 @@
+EXTENSION_PUBLIC_DESCRIPTION_TEXT="Chrome Extension example"

examples/content-env/.env.edge

@@ -0,0 +1 @@
+EXTENSION_PUBLIC_DESCRIPTION_TEXT="Edge Extension example"

examples/content-env/.env.firefox

@@ -0,0 +1 @@
+EXTENSION_PUBLIC_DESCRIPTION_TEXT="Firefox Add-on example"

examples/content-env/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# lock files
+yarn.lock
+package-lock.json
+
+# debug files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# extension.js
+extension-env.d.ts

examples/content-env/background.ts

@@ -0,0 +1,26 @@
+console.log('hello from background script')
+
+// eslint-disable-next-line no-undef
+chrome.runtime.onMessage.addListener((request, sender) => {
+  if (request.action === 'changeBackgroundColor') {
+    changeBackgroundColor(request.color, sender.tab?.id)
+  }
+})
+
+function changeBackgroundColor(color: string, tabId: number | undefined) {
+  if (!tabId) {
+    return
+  }
+
+  chrome.scripting
+    .executeScript({
+      target: {tabId},
+      func: setContentPageBackgroundColor,
+      args: [color]
+    })
+    .catch(console.error)
+}
+
+function setContentPageBackgroundColor(color: string) {
+  document.body.style.backgroundColor = color
+}

examples/content-env/content/scripts.ts

@@ -0,0 +1,50 @@
+import dotenvLogo from '../public/logo.png'
+import './styles.css'
+
+console.log(
+  'hello from content_scripts',
+  process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT
+)
+
+// Check if the content has already been added
+if (!document.querySelector('.content_script-box')) {
+  document.body.innerHTML += `
+  <div class="content_script-box">
+    <div class="content_script-logo-box">
+      <img class="content_script-logo" src=${dotenvLogo} />
+    </div>
+    <p class="content_script-description">${process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT}</p>
+    <h1 class="content_script-title">
+      Change the background-color ⬇
+    </h1>
+    <input type="color" class="content_script-colorPicker" id="colorPicker">
+    <p class="content_script-description">
+      Learn more about creating cross-browser extensions at <a
+        class="underline hover:no-underline"
+        href="https://extension.js.org"
+        target="_blank"
+      >
+      https://extension.js.org
+      </a>
+    </p>
+  </div>
+  `
+}
+
+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
+      .sendMessage({
+        action: 'changeBackgroundColor',
+        // @ts-expect-error
+        color: event.target?.value
+      })
+      .catch(console.error)
+  })
+
+  // Mark the element to avoid adding the listener again
+  colorPicker.setAttribute('data-listener', 'true')
+}

examples/content-env/content/styles.css

@@ -0,0 +1,58 @@
+.content_script-box {
+  background: white;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 315px;
+  height: 375px;
+  margin: 1em;
+  padding: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1em;
+  box-shadow: 0px 0px 4px 1px #ccc;
+}
+
+.content_script-logo-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+}
+
+.content_script-logo {
+  width: 90px;
+  align-self: flex-start;
+  filter: grayscale(1);
+  transition: filter 2s;
+}
+
+.content_script-logo:hover {
+  filter: grayscale(0);
+}
+
+.content_script-title {
+  font-size: 1.85em;
+  color: #333;
+  line-height: 1.1;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-weight: 700;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+}
+
+.content_script-description {
+  color: #999;
+}
+
+.content_script-colorPicker {
+  display: block;
+  width: 100%;
+  height: 50px;
+}

examples/content-env/manifest.json

@@ -0,0 +1,23 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "Content Scripts .env Template",
+  "description": "$EXTENSION_PUBLIC_DESCRIPTION_TEXT",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "permissions": ["activeTab", "scripting"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "chromium:service_worker": "background.ts",
+    "firefox:scripts": ["background.ts"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content/scripts.ts"]
+    }
+  ]
+}

examples/content-env/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "content-env",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "[email protected]",
+    "url": "https://cezaraugusto.com"
+  },
+  "devDependencies": {
+    "typescript": "5.3.3"
+  }
+}

examples/content-env/template.spec.ts

@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-env'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name 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('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)')
+})

examples/content-env/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"]
+}

examples/content-typescript/background.ts

@@ -3,11 +3,11 @@ console.log('hello from background script')
 // eslint-disable-next-line no-undef
 chrome.runtime.onMessage.addListener((request, sender) => {
   if (request.action === 'changeBackgroundColor') {
-    changeBackgroundColor(request.color, sender.tab?.id)
+    handleChangeBackgroundColor(request.color, sender.tab?.id)
   }
 })
 
-function changeBackgroundColor(color: string, tabId: number | undefined) {
+function handleChangeBackgroundColor(color: string, tabId: number | undefined) {
   if (!tabId) {
     return
   }