From 57088493e8dc3964d29afa5f80310f45137b9ccd Mon Sep 17 00:00:00 2001 From: Yalda Date: Sat, 14 Oct 2023 14:51:34 +0800 Subject: [PATCH] feat(vue):add newtab, and counter demo --- template-vue-js/devtools.html | 14 +++ template-vue-js/newtab.html | 14 +++ template-vue-js/options.html | 2 +- template-vue-js/popup.html | 2 +- template-vue-js/sidepanel.html | 2 +- template-vue-js/src/background/index.js | 8 +- template-vue-js/src/content/index.js | 3 - template-vue-js/src/contentScript/index.js | 1 + template-vue-js/src/devtools/DevTools.vue | 69 ++++++++++++ template-vue-js/src/devtools/index.js | 9 +- template-vue-js/src/manifest.js | 8 +- template-vue-js/src/newtab/NewTab.vue | 102 ++++++++++++------ template-vue-js/src/newtab/index.js | 1 - template-vue-js/src/options/Options.vue | 79 +++++++++----- template-vue-js/src/options/index.js | 2 +- template-vue-js/src/options/style.css | 30 ------ template-vue-js/src/popup/Popup.vue | 114 +++++++++++++++----- template-vue-js/src/popup/index.js | 6 +- template-vue-js/src/popup/style.css | 30 ------ template-vue-js/src/sidepanel/Sidepanel.vue | 79 +++++++++----- template-vue-js/src/sidepanel/index.js | 6 +- template-vue-js/src/sidepanel/style.css | 30 ------ template-vue-ts/devtools.html | 4 +- template-vue-ts/newtab.html | 14 +++ template-vue-ts/options.html | 2 +- template-vue-ts/popup.html | 2 +- template-vue-ts/sidepanel.html | 2 +- template-vue-ts/src/background/index.ts | 8 +- template-vue-ts/src/content/index.ts | 3 - template-vue-ts/src/contentScript/index.ts | 1 + template-vue-ts/src/devtools/DevTools.vue | 69 ++++++++++++ template-vue-ts/src/devtools/index.ts | 9 +- template-vue-ts/src/manifest.ts | 7 +- template-vue-ts/src/newtab/NewTab.vue | 100 ++++++++++++----- template-vue-ts/src/newtab/index.ts | 4 - template-vue-ts/src/options/Options.vue | 77 ++++++++----- template-vue-ts/src/options/index.ts | 2 +- template-vue-ts/src/options/style.css | 30 ------ template-vue-ts/src/popup/Popup.vue | 112 ++++++++++++++----- template-vue-ts/src/popup/index.ts | 6 +- template-vue-ts/src/popup/style.css | 30 ------ template-vue-ts/src/sidepanel/SidePanel.vue | 77 ++++++++----- template-vue-ts/src/sidepanel/index.ts | 6 +- template-vue-ts/src/sidepanel/style.css | 30 ------ template-vue-ts/vite.config.ts | 1 + 45 files changed, 762 insertions(+), 445 deletions(-) create mode 100644 template-vue-js/devtools.html create mode 100644 template-vue-js/newtab.html delete mode 100644 template-vue-js/src/content/index.js create mode 100644 template-vue-js/src/contentScript/index.js create mode 100644 template-vue-js/src/devtools/DevTools.vue delete mode 100644 template-vue-js/src/options/style.css delete mode 100644 template-vue-js/src/popup/style.css delete mode 100644 template-vue-js/src/sidepanel/style.css create mode 100644 template-vue-ts/newtab.html delete mode 100644 template-vue-ts/src/content/index.ts create mode 100644 template-vue-ts/src/contentScript/index.ts create mode 100644 template-vue-ts/src/devtools/DevTools.vue delete mode 100644 template-vue-ts/src/options/style.css delete mode 100644 template-vue-ts/src/popup/style.css delete mode 100644 template-vue-ts/src/sidepanel/style.css diff --git a/template-vue-js/devtools.html b/template-vue-js/devtools.html new file mode 100644 index 0000000..d695f93 --- /dev/null +++ b/template-vue-js/devtools.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Vue + JS + Vite + + + +
+ + + diff --git a/template-vue-js/newtab.html b/template-vue-js/newtab.html new file mode 100644 index 0000000..d57a36e --- /dev/null +++ b/template-vue-js/newtab.html @@ -0,0 +1,14 @@ + + + + + + + Chrome Extension + Vue + JS + Vite + + + +
+ + + diff --git a/template-vue-js/options.html b/template-vue-js/options.html index d2249f9..a7c6929 100644 --- a/template-vue-js/options.html +++ b/template-vue-js/options.html @@ -4,7 +4,7 @@ - Chrome Extension + Vue + JS + Vite App - Options + Chrome Extension + Vue + JS + Vite
diff --git a/template-vue-js/popup.html b/template-vue-js/popup.html index 0250052..5750613 100644 --- a/template-vue-js/popup.html +++ b/template-vue-js/popup.html @@ -4,7 +4,7 @@ - Chrome Extension + Vue + JS + Vite App - Popup + Chrome Extension + Vue + JS + Vite
diff --git a/template-vue-js/sidepanel.html b/template-vue-js/sidepanel.html index 44403f2..48361e3 100644 --- a/template-vue-js/sidepanel.html +++ b/template-vue-js/sidepanel.html @@ -4,7 +4,7 @@ - Chrome Extension + Vue + JS + Vite App - SidePanel + Chrome Extension + Vue + JS + Vite
diff --git a/template-vue-js/src/background/index.js b/template-vue-js/src/background/index.js index 2a67e2f..4a0687b 100644 --- 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 deleted file mode 100644 index fbabdf6..0000000 --- a/template-vue-js/src/content/index.js +++ /dev/null @@ -1,3 +0,0 @@ -console.info('chrome-ext template-vue-js content script') - -export {} diff --git a/template-vue-js/src/contentScript/index.js b/template-vue-js/src/contentScript/index.js new file mode 100644 index 0000000..bbbc97d --- /dev/null +++ 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 new file mode 100644 index 0000000..08d0f98 --- /dev/null +++ b/template-vue-js/src/devtools/DevTools.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/template-vue-js/src/devtools/index.js b/template-vue-js/src/devtools/index.js index 336ce12..d6abf81 100644 --- 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 index 1c3ebcf..c00a230 100644 --- a/template-vue-js/src/manifest.js +++ b/template-vue-js/src/manifest.js @@ -17,6 +17,7 @@ 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', @@ -24,7 +25,7 @@ export default defineManifest({ 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 index a5a8302..5bb4337 100644 --- a/template-vue-js/src/newtab/NewTab.vue +++ b/template-vue-js/src/newtab/NewTab.vue @@ -1,51 +1,93 @@ - +const link = ref('https://github.com/guocaoyi/create-chrome-ext') -