@tomjs/create-app 5.5.0 → 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/README.zh_CN.md +2 -0
- package/dist/index.mjs +1 -1
- package/package.json +10 -10
- package/templates/config/package.json +20 -20
- package/templates/config/react/pnpm-workspace.yaml +5 -0
- package/templates/config/vue/pnpm-workspace.yaml +4 -0
- package/templates/crx-react/manifest.config.ts +28 -0
- package/templates/crx-react/package.json +14 -0
- package/templates/crx-react/public/logo.png +0 -0
- package/templates/crx-react/src/assets/crx.svg +4 -0
- package/templates/crx-react/src/assets/react.svg +1 -0
- package/templates/crx-react/src/assets/vite.svg +1 -0
- package/templates/crx-react/src/components/HelloWorld.tsx +35 -0
- package/templates/crx-react/src/content/main.tsx +14 -0
- package/templates/crx-react/src/content/views/App.css +56 -0
- package/templates/crx-react/src/content/views/App.tsx +23 -0
- package/templates/crx-react/src/popup/App.css +49 -0
- package/templates/crx-react/src/popup/App.tsx +22 -0
- package/templates/crx-react/src/popup/index.css +84 -0
- package/templates/crx-react/src/popup/index.html +10 -0
- package/templates/crx-react/src/popup/main.tsx +10 -0
- package/templates/crx-react/src/sidepanel/App.css +49 -0
- package/templates/crx-react/src/sidepanel/App.tsx +22 -0
- package/templates/crx-react/src/sidepanel/index.css +83 -0
- package/templates/crx-react/src/sidepanel/index.html +10 -0
- package/templates/crx-react/src/sidepanel/main.tsx +10 -0
- package/templates/crx-react/vite.config.ts +28 -0
- package/templates/crx-vue/README.md +1 -0
- package/templates/crx-vue/manifest.config.ts +28 -0
- package/templates/crx-vue/package.json +14 -0
- package/templates/crx-vue/pnpm-workspace.yaml +4 -0
- package/templates/crx-vue/public/logo.png +0 -0
- package/templates/crx-vue/src/assets/crx.svg +4 -0
- package/templates/crx-vue/src/assets/vite.svg +1 -0
- package/templates/crx-vue/src/assets/vue.svg +1 -0
- package/templates/crx-vue/src/components/HelloWorld.vue +38 -0
- package/templates/crx-vue/src/content/main.ts +17 -0
- package/templates/crx-vue/src/content/views/App.vue +76 -0
- package/templates/crx-vue/src/env.d.ts +3 -0
- package/templates/crx-vue/src/popup/App.vue +39 -0
- package/templates/crx-vue/src/popup/index.html +10 -0
- package/templates/crx-vue/src/popup/main.ts +5 -0
- package/templates/crx-vue/src/popup/style.css +84 -0
- package/templates/crx-vue/src/sidepanel/App.vue +39 -0
- package/templates/crx-vue/src/sidepanel/index.html +10 -0
- package/templates/crx-vue/src/sidepanel/main.ts +5 -0
- package/templates/crx-vue/src/sidepanel/style.css +83 -0
- package/templates/crx-vue/vite.config.ts +38 -0
- package/templates/web-vue/README.md +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import crxLogo from '@/assets/crx.svg';
|
|
2
|
+
import reactLogo from '@/assets/react.svg';
|
|
3
|
+
import viteLogo from '@/assets/vite.svg';
|
|
4
|
+
import HelloWorld from '@/components/HelloWorld';
|
|
5
|
+
import './App.css';
|
|
6
|
+
|
|
7
|
+
export default function App() {
|
|
8
|
+
return (
|
|
9
|
+
<div>
|
|
10
|
+
<a href="https://vite.dev" target="_blank" rel="noreferrer">
|
|
11
|
+
<img src={viteLogo} className="logo" alt="Vite logo" />
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://reactjs.org/" target="_blank" rel="noreferrer">
|
|
14
|
+
<img src={reactLogo} className="logo react" alt="React logo" />
|
|
15
|
+
</a>
|
|
16
|
+
<a href="https://crxjs.dev/vite-plugin" target="_blank" rel="noreferrer">
|
|
17
|
+
<img src={crxLogo} className="logo crx" alt="crx logo" />
|
|
18
|
+
</a>
|
|
19
|
+
<HelloWorld msg="Vite + React + CRXJS" />
|
|
20
|
+
</div>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
font-weight: 400;
|
|
4
|
+
|
|
5
|
+
font-synthesis: none;
|
|
6
|
+
line-height: 1.5;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
|
|
9
|
+
color-scheme: light dark;
|
|
10
|
+
background-color: #242424;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a {
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
color: #646cff;
|
|
19
|
+
text-decoration: inherit;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
a:hover {
|
|
23
|
+
color: #535bf2;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
body {
|
|
27
|
+
display: flex;
|
|
28
|
+
place-items: center;
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
margin: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h1 {
|
|
34
|
+
font-size: 3.2em;
|
|
35
|
+
line-height: 1.1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
button {
|
|
39
|
+
padding: 0.6em 1.2em;
|
|
40
|
+
font-family: inherit;
|
|
41
|
+
font-size: 1em;
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
background-color: #1a1a1a;
|
|
45
|
+
border: 1px solid transparent;
|
|
46
|
+
border-radius: 8px;
|
|
47
|
+
transition: border-color 0.25s;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
button:hover {
|
|
51
|
+
border-color: #646cff;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
button:focus,
|
|
55
|
+
button:focus-visible {
|
|
56
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.card {
|
|
60
|
+
padding: 2em;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
#app {
|
|
64
|
+
max-width: 1280px;
|
|
65
|
+
padding: 2rem;
|
|
66
|
+
margin: 0 auto;
|
|
67
|
+
text-align: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media (prefers-color-scheme: light) {
|
|
71
|
+
:root {
|
|
72
|
+
color: #213547;
|
|
73
|
+
background-color: #ffffff;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
a:hover {
|
|
77
|
+
color: #747bff;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
button {
|
|
81
|
+
background-color: #f9f9f9;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import path from 'node:path';
|
|
2
|
+
import { fileURLToPath, URL } from 'node:url';
|
|
3
|
+
import { crx } from '@crxjs/vite-plugin';
|
|
4
|
+
import react from '@vitejs/plugin-react-swc';
|
|
5
|
+
import { defineConfig } from 'vite';
|
|
6
|
+
import manifest from './manifest.config.js';
|
|
7
|
+
|
|
8
|
+
// https://vite.dev/config/
|
|
9
|
+
export default defineConfig({
|
|
10
|
+
resolve: {
|
|
11
|
+
alias: {
|
|
12
|
+
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
|
13
|
+
// https://github.com/facebook/react/issues/24928#issuecomment-2267624188
|
|
14
|
+
'react': path.resolve(process.cwd(), 'node_modules/react'),
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
server: {
|
|
18
|
+
cors: {
|
|
19
|
+
origin: [
|
|
20
|
+
/chrome-extension:\/\//,
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
plugins: [
|
|
25
|
+
react(),
|
|
26
|
+
crx({ manifest }),
|
|
27
|
+
],
|
|
28
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# vue example
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { defineManifest } from '@crxjs/vite-plugin';
|
|
2
|
+
import pkg from './package.json';
|
|
3
|
+
|
|
4
|
+
export default defineManifest({
|
|
5
|
+
manifest_version: 3,
|
|
6
|
+
name: pkg.name,
|
|
7
|
+
version: pkg.version,
|
|
8
|
+
icons: {
|
|
9
|
+
48: 'public/logo.png',
|
|
10
|
+
},
|
|
11
|
+
action: {
|
|
12
|
+
default_icon: {
|
|
13
|
+
48: 'public/logo.png',
|
|
14
|
+
},
|
|
15
|
+
default_popup: 'src/popup/index.html',
|
|
16
|
+
},
|
|
17
|
+
content_scripts: [{
|
|
18
|
+
js: ['src/content/main.ts'],
|
|
19
|
+
matches: ['https://*/*'],
|
|
20
|
+
}],
|
|
21
|
+
permissions: [
|
|
22
|
+
'sidePanel',
|
|
23
|
+
'contentSettings',
|
|
24
|
+
],
|
|
25
|
+
side_panel: {
|
|
26
|
+
default_path: 'src/sidepanel/index.html',
|
|
27
|
+
},
|
|
28
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "crx-vue",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"private": true,
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vue-tsc -b && vite build"
|
|
9
|
+
},
|
|
10
|
+
"devDependencies": {
|
|
11
|
+
"@crxjs/vite-plugin": "^2.3.0",
|
|
12
|
+
"@types/chrome": "^0.1.36"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path d="M 737.01 736.911 C 737.01 678.236 764.861 631.584 810.593 611.455 C 856.348 591.328 907.915 602.151 947.752 638.471 C 960.533 650.102 971.7 655.694 983.37 650.253 C 995.344 644.66 997.302 624.163 997.302 611.423 L 997.302 392.795 C 997.302 363.576 975.601 342.696 946.365 342.696 L 731.973 342.696 C 660.472 342.696 644.538 282.455 681.12 241.018 C 741.347 172.79 709.081 67.292 599.496 62.714 C 489.923 67.276 457.668 172.603 517.886 240.835 C 554.463 282.291 538.543 342.692 467.042 342.692 L 255.813 342.692 C 226.593 342.692 202.699 363.572 202.699 392.792 L 202.699 1083.335 C 202.699 1112.559 226.594 1137.287 255.813 1137.287 L 946.355 1137.287 C 975.592 1137.287 997.293 1112.559 997.293 1083.335 L 997.293 866.134 C 997.293 853.393 994.377 831.952 982.17 826.265 C 970.045 820.619 955.743 826.511 942.823 838.293 C 903.146 874.487 854.555 884.556 809.295 864.635 C 763.798 844.598 737.001 797.483 737.001 738.631 L 737.01 736.911 Z" style="fill: rgb(242, 186, 228);"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from 'vue';
|
|
3
|
+
|
|
4
|
+
defineProps({
|
|
5
|
+
msg: String,
|
|
6
|
+
});
|
|
7
|
+
|
|
8
|
+
const count = ref(0);
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<template>
|
|
12
|
+
<h1>{{ msg }}</h1>
|
|
13
|
+
|
|
14
|
+
<div class="card">
|
|
15
|
+
<button type="button" @click="count++">
|
|
16
|
+
count is {{ count }}
|
|
17
|
+
</button>
|
|
18
|
+
<p>
|
|
19
|
+
Edit
|
|
20
|
+
<code>src/components/HelloWorld.vue</code> to test HMR
|
|
21
|
+
</p>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<p>
|
|
25
|
+
Check out
|
|
26
|
+
<a href="https://github.com/crxjs/create-crxjs" target="_blank">create-crxjs</a>, the official starter
|
|
27
|
+
</p>
|
|
28
|
+
|
|
29
|
+
<p class="read-the-docs">
|
|
30
|
+
Click on the Vite, Vue and CRXJS logos to learn more
|
|
31
|
+
</p>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<style scoped>
|
|
35
|
+
.read-the-docs {
|
|
36
|
+
color: #888;
|
|
37
|
+
}
|
|
38
|
+
</style>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { createApp } from 'vue';
|
|
2
|
+
import App from './views/App.vue';
|
|
3
|
+
|
|
4
|
+
console.log('[CRXJS] Hello world from content script!');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Mount the Vue app to the DOM.
|
|
8
|
+
*/
|
|
9
|
+
function mountApp() {
|
|
10
|
+
const container = document.createElement('div');
|
|
11
|
+
container.id = 'crxjs-app';
|
|
12
|
+
document.body.appendChild(container);
|
|
13
|
+
const app = createApp(App);
|
|
14
|
+
app.mount(container);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
mountApp();
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from 'vue';
|
|
3
|
+
import Logo from '@/assets/crx.svg';
|
|
4
|
+
|
|
5
|
+
const show = ref(false);
|
|
6
|
+
const toggle = () => show.value = !show.value;
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<template>
|
|
10
|
+
<div class="popup-container">
|
|
11
|
+
<div
|
|
12
|
+
v-show="show"
|
|
13
|
+
class="popup-content"
|
|
14
|
+
:class="show ? 'opacity-100' : 'opacity-0'"
|
|
15
|
+
>
|
|
16
|
+
<h1>HELLO CRXJS</h1>
|
|
17
|
+
</div>
|
|
18
|
+
<button
|
|
19
|
+
class="toggle-button"
|
|
20
|
+
@click="toggle()"
|
|
21
|
+
>
|
|
22
|
+
<img :src="Logo" alt="CRXJS logo" class="button-icon">
|
|
23
|
+
</button>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<style scoped>
|
|
28
|
+
.popup-container {
|
|
29
|
+
position: fixed;
|
|
30
|
+
right: 0;
|
|
31
|
+
bottom: 0;
|
|
32
|
+
z-index: 100;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: flex-end;
|
|
35
|
+
margin: 1.25rem;
|
|
36
|
+
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
37
|
+
line-height: 1em;
|
|
38
|
+
user-select: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.popup-content {
|
|
42
|
+
width: max-content;
|
|
43
|
+
height: min-content;
|
|
44
|
+
padding: 0.5rem 1rem;
|
|
45
|
+
margin: auto 0.5rem 0 0;
|
|
46
|
+
color: #1f2937;
|
|
47
|
+
background-color: white;
|
|
48
|
+
border-radius: 0.5rem;
|
|
49
|
+
box-shadow:
|
|
50
|
+
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
51
|
+
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
52
|
+
transition: opacity 300ms;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.toggle-button {
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
width: 2.5rem;
|
|
59
|
+
height: 2.5rem;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
background-color: #288cd7;
|
|
62
|
+
border: none;
|
|
63
|
+
border-radius: 9999px;
|
|
64
|
+
box-shadow:
|
|
65
|
+
0 1px 3px 0 rgb(0 0 0 / 0.1),
|
|
66
|
+
0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.toggle-button:hover {
|
|
70
|
+
background-color: #1e6aa3;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.button-icon {
|
|
74
|
+
padding: 4px;
|
|
75
|
+
}
|
|
76
|
+
</style>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import HelloWorld from '@/components/HelloWorld.vue';
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<template>
|
|
6
|
+
<div>
|
|
7
|
+
<a href="https://vite.dev" target="_blank">
|
|
8
|
+
<img src="@/assets/vite.svg" class="logo" alt="Vite logo">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://vuejs.org/" target="_blank">
|
|
11
|
+
<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo">
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://crxjs.dev/vite-plugin" target="_blank">
|
|
14
|
+
<img src="@/assets/crx.svg" class="logo crx" alt="crx logo">
|
|
15
|
+
</a>
|
|
16
|
+
</div>
|
|
17
|
+
<HelloWorld msg="Vite + Vue + CRXJS" />
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<style scoped>
|
|
21
|
+
.logo {
|
|
22
|
+
height: 6em;
|
|
23
|
+
padding: 1.5em;
|
|
24
|
+
transition: filter 300ms;
|
|
25
|
+
will-change: filter;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.logo:hover {
|
|
29
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.logo.vue:hover {
|
|
33
|
+
filter: drop-shadow(0 0 2em #42b883aa);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.logo.crx:hover {
|
|
37
|
+
filter: drop-shadow(0 0 2em #f2bae4aa);
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
font-weight: 400;
|
|
4
|
+
|
|
5
|
+
font-synthesis: none;
|
|
6
|
+
line-height: 1.5;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
|
|
9
|
+
color-scheme: light dark;
|
|
10
|
+
background-color: #242424;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a {
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
color: #646cff;
|
|
19
|
+
text-decoration: inherit;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
a:hover {
|
|
23
|
+
color: #535bf2;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
body {
|
|
27
|
+
display: flex;
|
|
28
|
+
place-items: center;
|
|
29
|
+
min-width: 450px;
|
|
30
|
+
min-height: 100vh;
|
|
31
|
+
margin: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
h1 {
|
|
35
|
+
font-size: 3.2em;
|
|
36
|
+
line-height: 1.1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
button {
|
|
40
|
+
padding: 0.6em 1.2em;
|
|
41
|
+
font-family: inherit;
|
|
42
|
+
font-size: 1em;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
background-color: #1a1a1a;
|
|
46
|
+
border: 1px solid transparent;
|
|
47
|
+
border-radius: 8px;
|
|
48
|
+
transition: border-color 0.25s;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
button:hover {
|
|
52
|
+
border-color: #646cff;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
button:focus,
|
|
56
|
+
button:focus-visible {
|
|
57
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.card {
|
|
61
|
+
padding: 2em;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
#app {
|
|
65
|
+
max-width: 1280px;
|
|
66
|
+
padding: 2rem;
|
|
67
|
+
margin: 0 auto;
|
|
68
|
+
text-align: center;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@media (prefers-color-scheme: light) {
|
|
72
|
+
:root {
|
|
73
|
+
color: #213547;
|
|
74
|
+
background-color: #ffffff;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
a:hover {
|
|
78
|
+
color: #747bff;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
button {
|
|
82
|
+
background-color: #f9f9f9;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import HelloWorld from '@/components/HelloWorld.vue';
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<template>
|
|
6
|
+
<div>
|
|
7
|
+
<a href="https://vite.dev" target="_blank">
|
|
8
|
+
<img src="@/assets/vite.svg" class="logo" alt="Vite logo">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://vuejs.org/" target="_blank">
|
|
11
|
+
<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo">
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://crxjs.dev/vite-plugin" target="_blank">
|
|
14
|
+
<img src="@/assets/crx.svg" class="logo crx" alt="crx logo">
|
|
15
|
+
</a>
|
|
16
|
+
</div>
|
|
17
|
+
<HelloWorld msg="Vite + Vue + CRXJS" />
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<style scoped>
|
|
21
|
+
.logo {
|
|
22
|
+
height: 6em;
|
|
23
|
+
padding: 1.5em;
|
|
24
|
+
transition: filter 300ms;
|
|
25
|
+
will-change: filter;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.logo:hover {
|
|
29
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.logo.vue:hover {
|
|
33
|
+
filter: drop-shadow(0 0 2em #42b883aa);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.logo.crx:hover {
|
|
37
|
+
filter: drop-shadow(0 0 2em #f2bae4aa);
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
font-weight: 400;
|
|
4
|
+
|
|
5
|
+
font-synthesis: none;
|
|
6
|
+
line-height: 1.5;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
|
|
9
|
+
color-scheme: light dark;
|
|
10
|
+
background-color: #242424;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a {
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
color: #646cff;
|
|
19
|
+
text-decoration: inherit;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
a:hover {
|
|
23
|
+
color: #535bf2;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
body {
|
|
27
|
+
display: flex;
|
|
28
|
+
place-items: center;
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
margin: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h1 {
|
|
34
|
+
font-size: 3.2em;
|
|
35
|
+
line-height: 1.1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
button {
|
|
39
|
+
padding: 0.6em 1.2em;
|
|
40
|
+
font-family: inherit;
|
|
41
|
+
font-size: 1em;
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
background-color: #1a1a1a;
|
|
45
|
+
border: 1px solid transparent;
|
|
46
|
+
border-radius: 8px;
|
|
47
|
+
transition: border-color 0.25s;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
button:hover {
|
|
51
|
+
border-color: #646cff;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
button:focus,
|
|
55
|
+
button:focus-visible {
|
|
56
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.card {
|
|
60
|
+
padding: 2em;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
#app {
|
|
64
|
+
max-width: 1280px;
|
|
65
|
+
padding: 2rem;
|
|
66
|
+
margin: 0 auto;
|
|
67
|
+
text-align: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media (prefers-color-scheme: light) {
|
|
71
|
+
:root {
|
|
72
|
+
color: #213547;
|
|
73
|
+
background-color: #ffffff;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
a:hover {
|
|
77
|
+
color: #747bff;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
button {
|
|
81
|
+
background-color: #f9f9f9;
|
|
82
|
+
}
|
|
83
|
+
}
|