feat(vue):add newtab, and counter demo

guocaoyi · Oct 14, 2023 · 5708849 · 5708849
1 parent 742972e
commit 5708849
Show file tree

Hide file tree

Showing 45 changed files with 762 additions and 445 deletions.
diff --git a/template-vue-js/devtools.html b/template-vue-js/devtools.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Vue + JS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/devtools/index.js"></script>
+  </body>
+</html>
diff --git a/template-vue-js/newtab.html b/template-vue-js/newtab.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extension + Vue + JS + Vite</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/newtab/index.js"></script>
+  </body>
+</html>
diff --git a/template-vue-js/options.html b/template-vue-js/options.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Vue + JS + Vite App - Options</title>
+    <title>Chrome Extension + Vue + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-vue-js/popup.html b/template-vue-js/popup.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icon/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Vue + JS + Vite App - Popup</title>
+    <title>Chrome Extension + Vue + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-vue-js/sidepanel.html b/template-vue-js/sidepanel.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icons/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Vue + JS + Vite App - SidePanel</title>
+    <title>Chrome Extension + Vue + JS + Vite</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/template-vue-js/src/background/index.js b/template-vue-js/src/background/index.js
@@ -1,3 +1,7 @@
-console.info('chrome-ext template-vue-js background script')
+console.log('background is running')
 
-export {}
+chrome.runtime.onMessage.addListener((request) => {
+  if (request.type === 'COUNT') {
+    console.log('background has received a message from popup, and count is ', request?.count)
+  }
+})
diff --git a/template-vue-js/src/content/index.js b/template-vue-js/src/content/index.js
diff --git a/template-vue-js/src/contentScript/index.js b/template-vue-js/src/contentScript/index.js
@@ -0,0 +1 @@
+console.info('contentScript is running')
diff --git a/template-vue-js/src/devtools/DevTools.vue b/template-vue-js/src/devtools/DevTools.vue
@@ -0,0 +1,69 @@
+<script setup lang="js">
+import { ref } from 'vue'
+
+const link = ref('https://github.com/guocaoyi/create-chrome-ext')
+</script>
+
+<template>
+  <main>
+    <h3>DevTools Page</h3>
+
+    <a :href="link" target="_blank"> generated by create-chrome-ext </a>
+  </main>
+</template>
+
+<style>
+:root {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  color-scheme: light dark;
+  background-color: #242424;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: #fafafa;
+  }
+
+  a:hover {
+    color: #42b983;
+  }
+}
+
+body {
+  min-width: 20rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #42b983;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+</style>
diff --git a/template-vue-js/src/devtools/index.js b/template-vue-js/src/devtools/index.js
@@ -1 +1,8 @@
-export {}
+import { createApp } from 'vue'
+import App from './DevTools.vue'
+
+chrome.devtools.panels.create('Create Chrome Ext', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
+
+createApp(App).mount('#app')
diff --git a/template-vue-js/src/manifest.js b/template-vue-js/src/manifest.js
@@ -17,14 +17,15 @@ export default defineManifest({
     default_icon: 'img/logo-48.png',
   },
   options_page: 'options.html',
+  devtools_page: 'devtools.html',
   background: {
     service_worker: 'src/background/index.js',
     type: 'module',
   },
   content_scripts: [
     {
       matches: ['http://*/*', 'https://*/*'],
-      js: ['src/content/index.js'],
+      js: ['src/contentScript/index.js'],
     },
   ],
   side_panel: {
@@ -36,5 +37,8 @@ export default defineManifest({
       matches: [],
     },
   ],
-  permissions: ['sidePanel'],
+  permissions: ['sidePanel', 'storage'],
+  chrome_url_overrides: {
+    newtab: 'newtab.html',
+  },
 })
diff --git a/template-vue-js/src/newtab/NewTab.vue b/template-vue-js/src/newtab/NewTab.vue
@@ -1,51 +1,93 @@
-<script setup>
-import { ref } from 'vue'
+<script setup lang="js">
+import { ref, onMounted, onUnmounted } from 'vue'
 
-const crx = ref('create-chrome-ext')
-</script>
+const link = ref('https://github.com/guocaoyi/create-chrome-ext')
 
-<template>
-  <main>
-    <h3>Options Page!</h3>
+const getTime = () => {
+  const date = new Date()
+  const hour = String(date.getHours()).padStart(2, '0')
+  const minute = String(date.getMinutes()).padStart(2, '0')
+  return `${hour}:${minute}`
+}
 
-    <h6>v 0.0.0</h6>
+let time = ref(getTime())
+let intervalor = null
+
+onMounted(() => {
+  intervalor = setInterval(() => {
+    time.value = getTime()
+  }, 1000)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalor)
+})
+</script>
 
-    <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">Power by {{ crx }}</a>
-  </main>
+<template>
+  <section>
+    <span></span>
+    <h1>{{ time }}</h1>
+    <a :href="link" target="_blank"> generated by create-chrome-ext </a>
+  </section>
 </template>
 
 <style>
-main {
-  text-align: center;
-  padding: 1em;
-  margin: 0 auto;
+:root {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  color-scheme: light dark;
+  box-sizing: border-box;
 }
 
-h3 {
+body {
+  min-width: 20rem;
+  margin: 0;
+}
+
+section::before {
+  content: '';
+  position: fixed;
+  z-index: -1;
+  width: 100vw;
+  height: 100vh;
+  background-image: url('https://source.unsplash.com/random');
+  background-size: cover;
+  filter: blur(10px);
+}
+
+section {
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+h1 {
   color: #42b983;
   text-transform: uppercase;
-  font-size: 1.5rem;
-  font-weight: 200;
-  line-height: 1.2rem;
+  font-size: 6rem;
   margin: 2rem auto;
 }
 
-h6 {
-  font-size: 0.5rem;
-  color: #333333;
-  margin: 0.5rem;
-}
-
 a {
   font-size: 0.5rem;
   margin: 0.5rem;
   color: #cccccc;
   text-decoration: none;
 }
-
-@media (min-width: 480px) {
-  h3 {
-    max-width: none;
-  }
-}
 </style>
diff --git a/template-vue-js/src/newtab/index.js b/template-vue-js/src/newtab/index.js
@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './NewTab.vue'
 
 createApp(App).mount('#app')