Skip to content

Commit 3880399

Browse files
cezaraugustocezaraugusto
committed
Improve .env files handling. Fix #40 
1 parent 9425756 commit 3880399

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+979
-184
lines changed

‎examples/action-chatgpt/.env.example

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
EXTENSION_OPENAI_API_KEY='My API Key'
1+
EXTENSION_PUBLIC_OPENAI_API_KEY='My API Key'

‎examples/action-chatgpt/action/ActionApp.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import chatgptLogo from '../images/chatgpt.png'
44
import extensionJsLogo from '../images/extension_128.png'
55

66
const openai = new OpenAI({
7-
apiKey: process.env.EXTENSION_OPENAI_API_KEY!,
7+
apiKey: process.env.EXTENSION_PUBLIC_OPENAI_API_KEY!,
88
dangerouslyAllowBrowser: true
99
})
1010

@@ -19,7 +19,7 @@ function ActionApp() {
1919
content:
2020
'Hello there! This is your ChatGPT extension sample, ' +
2121
'built with React, Tailwind.css, and DaisyUI. ' +
22-
'For it to work, create a .env file with your EXTENSION_OPENAI_API_KEY. ' +
22+
'For it to work, create a .env file with your EXTENSION_PUBLIC_OPENAI_API_KEY. ' +
2323
"You can get an API key from OpenAI's website",
2424
role: 'assistant'
2525
},

‎examples/action/action/scripts.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ function getManifest() {
22
return chrome.runtime.getManifest()
33
}
44

5-
const manifest = getManifest()
5+
const manifestData = getManifest()
66

77
console.table({
8-
name: manifest.name,
9-
version: manifest.version,
10-
description: manifest.description
8+
name: manifestData.name,
9+
version: manifestData.version,
10+
description: manifestData.description
1111
})

‎examples/config-babel/newtab/scripts.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ function getManifest() {
22
return chrome.runtime.getManifest()
33
}
44

5-
const manifest = getManifest()
5+
const manifestData = getManifest()
66

77
console.table({
8-
name: manifest.name,
9-
version: manifest.version,
10-
description: manifest.description
8+
name: manifestData.name,
9+
version: manifestData.version,
10+
description: manifestData.description
1111
})

‎examples/config-eslint/newtab/scripts.ts

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1 @@
1-
function getManifest() {
2-
return chrome.runtime.getManifest()
3-
}
4-
5-
const manifest = getManifest()
6-
7-
console.table({
8-
name: manifest.name,
9-
version: manifest.version,
10-
description: manifest.description
11-
})
1+
console.log('Hello, ESLint!')

‎examples/config-lint/newtab/scripts.ts

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1 @@
1-
function getManifest() {
2-
return chrome.runtime.getManifest()
3-
}
4-
5-
const manifest = getManifest()
6-
7-
console.table({
8-
name: manifest.name,
9-
version: manifest.version,
10-
description: manifest.description
11-
})
1+
console.log('Linters gonna lint!')

‎examples/config-prettier/newtab/scripts.ts

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1 @@
1-
function getManifest() {
2-
return chrome.runtime.getManifest()
3-
}
4-
5-
const manifest = getManifest()
6-
7-
console.table({
8-
name: manifest.name,
9-
version: manifest.version,
10-
description: manifest.description
11-
})
1+
console.log('Hello, Prettier!')

‎examples/config-stylelint/newtab/scripts.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ function getManifest() {
22
return chrome.runtime.getManifest()
33
}
44

5-
const manifest = getManifest()
5+
const manifestData = getManifest()
66

77
console.table({
8-
name: manifest.name,
9-
version: manifest.version,
10-
description: manifest.description
8+
name: manifestData.name,
9+
version: manifestData.version,
10+
description: manifestData.description
1111
})

‎examples/content-env/.env.chrome

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
EXTENSION_PUBLIC_DESCRIPTION_TEXT="Chrome Extension example"

‎examples/content-env/.env.edge

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
EXTENSION_PUBLIC_DESCRIPTION_TEXT="Edge Extension example"

‎examples/content-env/.env.firefox

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
EXTENSION_PUBLIC_DESCRIPTION_TEXT="Firefox Add-on example"

‎examples/content-env/.gitignore

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
dist
11+
12+
# misc
13+
.DS_Store
14+
15+
# local env files
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
# lock files
22+
yarn.lock
23+
package-lock.json
24+
25+
# debug files
26+
npm-debug.log*
27+
yarn-debug.log*
28+
yarn-error.log*
29+
30+
# extension.js
31+
extension-env.d.ts

‎examples/content-env/background.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
console.log('hello from background script')
2+
3+
// eslint-disable-next-line no-undef
4+
chrome.runtime.onMessage.addListener((request, sender) => {
5+
if (request.action === 'changeBackgroundColor') {
6+
changeBackgroundColor(request.color, sender.tab?.id)
7+
}
8+
})
9+
10+
function changeBackgroundColor(color: string, tabId: number | undefined) {
11+
if (!tabId) {
12+
return
13+
}
14+
15+
chrome.scripting
16+
.executeScript({
17+
target: {tabId},
18+
func: setContentPageBackgroundColor,
19+
args: [color]
20+
})
21+
.catch(console.error)
22+
}
23+
24+
function setContentPageBackgroundColor(color: string) {
25+
document.body.style.backgroundColor = color
26+
}

‎examples/content-env/content/scripts.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import dotenvLogo from '../public/logo.png'
2+
import './styles.css'
3+
4+
console.log(
5+
'hello from content_scripts',
6+
process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT
7+
)
8+
9+
// Check if the content has already been added
10+
if (!document.querySelector('.content_script-box')) {
11+
document.body.innerHTML += `
12+
<div class="content_script-box">
13+
<div class="content_script-logo-box">
14+
<img class="content_script-logo" src=${dotenvLogo} />
15+
</div>
16+
<p class="content_script-description">${process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT}</p>
17+
<h1 class="content_script-title">
18+
Change the background-color ⬇
19+
</h1>
20+
<input type="color" class="content_script-colorPicker" id="colorPicker">
21+
<p class="content_script-description">
22+
Learn more about creating cross-browser extensions at <a
23+
class="underline hover:no-underline"
24+
href="https://extension.js.org"
25+
target="_blank"
26+
>
27+
https://extension.js.org
28+
</a>
29+
</p>
30+
</div>
31+
`
32+
}
33+
34+
const colorPicker = document.getElementById('colorPicker')
35+
36+
// Add the event listener only if it hasn't been added yet
37+
if (colorPicker && !colorPicker.hasAttribute('data-listener')) {
38+
colorPicker.addEventListener('input', (event) => {
39+
chrome.runtime
40+
.sendMessage({
41+
action: 'changeBackgroundColor',
42+
// @ts-expect-error
43+
color: event.target?.value
44+
})
45+
.catch(console.error)
46+
})
47+
48+
// Mark the element to avoid adding the listener again
49+
colorPicker.setAttribute('data-listener', 'true')
50+
}

‎examples/content-env/content/styles.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.content_script-box {
2+
background: white;
3+
position: fixed;
4+
right: 0;
5+
bottom: 0;
6+
z-index: 9;
7+
width: 315px;
8+
height: 375px;
9+
margin: 1em;
10+
padding: 1em;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
flex-direction: column;
15+
gap: 1em;
16+
box-shadow: 0px 0px 4px 1px #ccc;
17+
}
18+
19+
.content_script-logo-box {
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
gap: 1em;
24+
}
25+
26+
.content_script-logo {
27+
width: 90px;
28+
align-self: flex-start;
29+
filter: grayscale(1);
30+
transition: filter 2s;
31+
}
32+
33+
.content_script-logo:hover {
34+
filter: grayscale(0);
35+
}
36+
37+
.content_script-title {
38+
font-size: 1.85em;
39+
color: #333;
40+
line-height: 1.1;
41+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
42+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
43+
font-weight: 700;
44+
overflow-wrap: break-word;
45+
word-wrap: break-word;
46+
-ms-word-break: break-all;
47+
word-break: break-word;
48+
}
49+
50+
.content_script-description {
51+
color: #999;
52+
}
53+
54+
.content_script-colorPicker {
55+
display: block;
56+
width: 100%;
57+
height: 50px;
58+
}

‎examples/content-env/images/extension_128.png

7.45 KB
Loading

‎examples/content-env/images/extension_16.png

598 Bytes
Loading

‎examples/content-env/images/extension_48.png

2.45 KB
Loading

‎examples/content-env/manifest.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"manifest_version": 3,
3+
"version": "0.0.1",
4+
"name": "Content Scripts .env Template",
5+
"description": "$EXTENSION_PUBLIC_DESCRIPTION_TEXT",
6+
"icons": {
7+
"16": "images/extension_16.png",
8+
"48": "images/extension_48.png",
9+
"128": "images/extension_128.png"
10+
},
11+
"permissions": ["activeTab", "scripting"],
12+
"host_permissions": ["<all_urls>"],
13+
"background": {
14+
"chromium:service_worker": "background.ts",
15+
"firefox:scripts": ["background.ts"]
16+
},
17+
"content_scripts": [
18+
{
19+
"matches": ["<all_urls>"],
20+
"js": ["content/scripts.ts"]
21+
}
22+
]
23+
}

‎examples/content-env/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"private": true,
3+
"name": "content-env",
4+
"description": "An Extension.js example.",
5+
"version": "0.0.1",
6+
"author": {
7+
"name": "Cezar Augusto",
8+
"email": "[email protected]",
9+
"url": "https://cezaraugusto.com"
10+
},
11+
"devDependencies": {
12+
"typescript": "5.3.3"
13+
}
14+
}

‎examples/content-env/public/logo.png

1.38 KB
Loading

‎examples/content-env/template.spec.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import path from 'path'
2+
import {execSync} from 'child_process'
3+
import {extensionFixtures} from '../extension-fixtures'
4+
5+
const exampleDir = 'examples/content-env'
6+
const pathToExtension = path.join(__dirname, `dist/chrome`)
7+
const test = extensionFixtures(pathToExtension, true)
8+
9+
test.beforeAll(async () => {
10+
execSync(`pnpm extension build ${exampleDir}`, {
11+
cwd: path.join(__dirname, '..')
12+
})
13+
})
14+
15+
test('should exist an element with the class name content_script-box', async ({
16+
page
17+
}) => {
18+
await page.goto('https://extension.js.org/')
19+
const div = page.locator('body > div.content_script-box')
20+
await test.expect(div).toBeVisible()
21+
})
22+
23+
test('should exist an h1 element with specified content', async ({page}) => {
24+
await page.goto('https://extension.js.org/')
25+
const h1 = page.locator('body > div.content_script-box > h1')
26+
await test.expect(h1).toHaveText('Change the background-color ⬇')
27+
})
28+
29+
test('should exist a default color value', async ({page}) => {
30+
await page.goto('https://extension.js.org/')
31+
const h1 = page.locator('body > div.content_script-box > h1')
32+
const color = await page.evaluate(
33+
(locator) => {
34+
return window.getComputedStyle(locator!).getPropertyValue('color')
35+
},
36+
await h1.elementHandle()
37+
)
38+
await test.expect(color).toEqual('rgb(51, 51, 51)')
39+
})

‎examples/content-env/tsconfig.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"allowSyntheticDefaultImports": true,
5+
"esModuleInterop": true,
6+
"forceConsistentCasingInFileNames": true,
7+
"isolatedModules": true,
8+
"jsx": "react-jsx",
9+
"lib": ["dom", "dom.iterable", "esnext"],
10+
"moduleResolution": "node",
11+
"module": "esnext",
12+
"noEmit": true,
13+
"resolveJsonModule": true,
14+
"strict": true,
15+
"target": "esnext",
16+
"verbatimModuleSyntax": true,
17+
"useDefineForClassFields": true,
18+
"skipLibCheck": true
19+
},
20+
"include": ["./"],
21+
"exclude": ["node_modules", "dist"]
22+
}

‎examples/content-typescript/background.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ console.log('hello from background script')
33
// eslint-disable-next-line no-undef
44
chrome.runtime.onMessage.addListener((request, sender) => {
55
if (request.action === 'changeBackgroundColor') {
6-
changeBackgroundColor(request.color, sender.tab?.id)
6+
handleChangeBackgroundColor(request.color, sender.tab?.id)
77
}
88
})
99

10-
function changeBackgroundColor(color: string, tabId: number | undefined) {
10+
function handleChangeBackgroundColor(color: string, tabId: number | undefined) {
1111
if (!tabId) {
1212
return
1313
}

0 commit comments

Comments
 (0)