Skip to content

Commit d3c6bbc

Browse files
guocaoyiguocaoyi
authored
Merge pull request #57 from guocaoyi/feat/0.9.0
Feat/0.9.0
2 parents 95bf50e + fb82175 commit d3c6bbc

Some content is hidden

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

89 files changed

+1333
-407
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Summary
99
5. version timestamp follow the yyyy.MM.dd format
1010
```
1111

12-
## 0.9.0 [xxxx.xx.xx]
12+
## 0.9.0 [2023.10.15]
1313

1414
- feat: depen version update, <vite@4.x>
1515
- feat: support devtools \ sidepanel \ newtab override

‎docs/img/crx-preview.png

544 KB
Loading

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-chrome-ext",
3-
"version": "0.8.11",
3+
"version": "0.9.0",
44
"type": "module",
55
"description": "Scaffolding your chrome extension, multiple boilerplates supported!",
66
"author": "yalda",

‎template-solid-js/devtools.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/icon/logo.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Chrome Extension + Solid + JS + Vite</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/devtools/index.jsx"></script>
12+
</body>
13+
</html>

‎template-solid-js/newtab.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/icon/logo.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Chrome Extension + Solid + JS + Vite</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/newtab/index.jsx"></script>
12+
</body>
13+
</html>

‎template-solid-js/options.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/icons/logo.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Solid + JS + Vite - Options</title>
7+
<title>Chrome Extension + Solid + JS + Vite</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎template-solid-js/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
"devDependencies": {
2525
"@crxjs/vite-plugin": "^2.0.0-beta.19",
2626
"prettier": "^3.0.3",
27-
"vite": "^3.2.7",
28-
"vite-plugin-solid": "^2.7.0"
27+
"vite": "^4.4.11",
28+
"vite-plugin-solid": "^2.7.1"
2929
},
3030
"dependencies": {
31-
"solid-js": "^1.4.2"
31+
"solid-js": "^1.8.1"
3232
}
3333
}

‎template-solid-js/popup.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/icon/logo.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Solid + TS + Vite - Popup</title>
7+
<title>Chrome Extension + Solid + JS + Vite</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎template-solid-js/sidepanel.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/icon/logo.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Solid + TS + Vite - Side Panel</title>
7+
<title>Chrome Extension + Solid + JS + Vite</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎template-solid-js/src/background/index.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
console.info('chrome-ext template-svelte-ts background script')
1+
console.log('background is running')
22

3-
export {}
3+
chrome.runtime.onMessage.addListener((request) => {
4+
if (request.type === 'COUNT') {
5+
console.log('background has received a message from popup, and count is ', request?.count)
6+
}
7+
})

‎template-solid-js/src/content/index.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎template-solid-js/src/contentScript/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.info('contentScript is running')

‎template-solid-js/src/popup/Popup.module.css renamed to ‎template-solid-js/src/devtools/DevTools.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
'Open Sans', 'Helvetica Neue', sans-serif;
44
}
55

6+
@media (prefers-color-scheme: light) {
7+
:root {
8+
color: #213547;
9+
background-color: #ffffff;
10+
}
11+
a:hover {
12+
color: #142d61;
13+
}
14+
}
15+
616
main {
717
text-align: center;
818
padding: 1em;

‎template-solid-js/src/devtools/DevTools.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import './DevTools.css'
2+
3+
export const DevTools = () => {
4+
const link = 'https://github.com/guocaoyi/create-chrome-ext'
5+
6+
return (
7+
<main>
8+
<h3>DevTools Page</h3>
9+
<a href={link} target="_blank">
10+
generated by create-chrome-ext
11+
</a>
12+
</main>
13+
)
14+
}
15+
16+
export default DevTools

‎template-solid-js/src/devtools/index.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
:root {
2+
font-family:
3+
system-ui,
4+
-apple-system,
5+
BlinkMacSystemFont,
6+
'Segoe UI',
7+
Roboto,
8+
Oxygen,
9+
Ubuntu,
10+
Cantarell,
11+
'Open Sans',
12+
'Helvetica Neue',
13+
sans-serif;
14+
15+
color-scheme: light dark;
16+
background-color: #242424;
17+
}
18+
19+
@media (prefers-color-scheme: light) {
20+
:root {
21+
background-color: #fafafa;
22+
}
23+
}
24+
25+
body {
26+
min-width: 20rem;
27+
margin: 0;
28+
}

‎template-solid-js/src/devtools/index.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* @refresh reload */
2+
import { render } from 'solid-js/web'
3+
4+
import './index.css'
5+
import { DevTools } from './DevTools'
6+
7+
render(() => <DevTools />, document.getElementById('app') ?? document.body)
8+
9+
chrome.devtools.panels.create('SolidCrx', '', '../../devtools.html', function () {
10+
console.log('devtools panel create')
11+
})

‎template-solid-js/src/manifest.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { defineManifest } from '@crxjs/vite-plugin'
2+
import packageData from '../package.json'
23

34
export default defineManifest({
4-
name: 'create-chrome-ext',
5-
description: '',
6-
version: '0.0.0',
5+
name: packageData.name,
6+
description: packageData.description,
7+
version: packageData.version,
78
manifest_version: 3,
89
icons: {
910
16: 'img/logo-16.png',
@@ -16,14 +17,15 @@ export default defineManifest({
1617
default_icon: 'img/logo-48.png',
1718
},
1819
options_page: 'options.html',
20+
devtools_page: 'devtools.html',
1921
background: {
2022
service_worker: 'src/background/index.js',
2123
type: 'module',
2224
},
2325
content_scripts: [
2426
{
2527
matches: ['http://*/*', 'https://*/*'],
26-
js: ['src/content/index.js'],
28+
js: ['src/contentScript/index.js'],
2729
},
2830
],
2931
side_panel: {
@@ -35,5 +37,8 @@ export default defineManifest({
3537
matches: [],
3638
},
3739
],
38-
permissions: ['sidePanel'],
40+
permissions: ['sidePanel', 'storage'],
41+
chrome_url_overrides: {
42+
newtab: 'newtab.html',
43+
},
3944
})

‎template-solid-js/src/newtab/NewTab.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
section::before {
2+
content: '';
3+
position: fixed;
4+
z-index: -1;
5+
width: 100vw;
6+
height: 100vh;
7+
background-image: url('https://source.unsplash.com/random');
8+
background-size: cover;
9+
filter: blur(10px);
10+
}
11+
12+
section {
13+
width: 100vw;
14+
height: 100vh;
15+
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: space-between;
19+
align-items: center;
20+
}
21+
22+
h1 {
23+
color: #142d61;
24+
text-transform: uppercase;
25+
font-size: 6rem;
26+
margin: 2rem auto;
27+
}
28+
29+
a {
30+
font-size: 0.5rem;
31+
margin: 0.5rem;
32+
color: #cccccc;
33+
text-decoration: none;
34+
}

‎template-solid-js/src/newtab/NewTab.jsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { createSignal, onCleanup } from 'solid-js'
2+
3+
import './NewTab.css'
4+
5+
export const NewTab = () => {
6+
const getTime = () => {
7+
const date = new Date()
8+
const hour = String(date.getHours()).padStart(2, '0')
9+
const minute = String(date.getMinutes()).padStart(2, '0')
10+
return `${hour}:${minute}`
11+
}
12+
13+
const [time, setTime] = createSignal(getTime())
14+
const link = 'https://github.com/guocaoyi/create-chrome-ext'
15+
16+
let interval = setInterval(() => {
17+
setTime(getTime())
18+
}, 1000)
19+
20+
onCleanup(() => clearInterval(interval))
21+
22+
return (
23+
<section>
24+
<span></span>
25+
<h1>{time()}</h1>
26+
<a href={link} target="_blank">
27+
generated by create-chrome-ext
28+
</a>
29+
</section>
30+
)
31+
}
32+
33+
export default NewTab

‎template-solid-js/src/newtab/index.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
:root {
2+
font-family:
3+
system-ui,
4+
-apple-system,
5+
BlinkMacSystemFont,
6+
'Segoe UI',
7+
Roboto,
8+
Oxygen,
9+
Ubuntu,
10+
Cantarell,
11+
'Open Sans',
12+
'Helvetica Neue',
13+
sans-serif;
14+
15+
color-scheme: light dark;
16+
background-color: #242424;
17+
}
18+
19+
@media (prefers-color-scheme: light) {
20+
:root {
21+
background-color: #fafafa;
22+
}
23+
}
24+
25+
body {
26+
min-width: 20rem;
27+
margin: 0;
28+
}

‎template-solid-js/src/newtab/index.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* @refresh reload */
2+
import { render } from 'solid-js/web'
3+
4+
import './index.css'
5+
import { NewTab } from './NewTab'
6+
7+
render(() => <NewTab />, document.getElementById('app') ?? document.body)

‎template-solid-ts/src/options/Options.module.css renamed to ‎template-solid-js/src/options/Options.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
'Open Sans', 'Helvetica Neue', sans-serif;
44
}
55

6+
@media (prefers-color-scheme: light) {
7+
a:hover {
8+
color: #142d61;
9+
}
10+
}
11+
612
main {
713
text-align: center;
814
padding: 1em;

‎template-solid-js/src/options/Options.jsx

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
1-
import { createSignal } from 'solid-js'
1+
import { createSignal, createEffect } from 'solid-js'
22

3-
import './Options.module.css'
3+
import './Options.css'
44

5-
/**
6-
* Options component.
7-
*/
85
export const Options = () => {
9-
const [crx] = createSignal('create-chrome-ext')
10-
return (
11-
<main>
12-
<h3>Options Page!</h3>
6+
const [countSync, setCountSync] = createSignal(0)
7+
const link = 'https://github.com/guocaoyi/create-chrome-ext'
8+
9+
createEffect(() => {
10+
chrome.storage.sync.get(['count'], (result) => {
11+
setCountSync(result.count || 0)
12+
})
1313

14-
<h6>v 0.0.0</h6>
14+
chrome.runtime.onMessage.addListener((request) => {
15+
if (request.type === 'COUNT') {
16+
setCountSync(request.count || 0)
17+
}
18+
})
19+
}, [])
1520

16-
<a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
17-
Power by {crx}
21+
return (
22+
<main>
23+
<h3>Options Page</h3>
24+
<h4>Count from Popup: {countSync()}</h4>
25+
<a href={link} target="_blank">
26+
generated by create-chrome-ext
1827
</a>
1928
</main>
2029
)

0 commit comments

Comments
 (0)