Added popup page

matdv · Sep 2, 2022 · 73a8b54 · 73a8b54
1 parent 33c0879
commit 73a8b54
Show file tree

Hide file tree

Showing 16 changed files with 742 additions and 8 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -9,6 +9,9 @@ module.exports = {
     '@vue/eslint-config-typescript/recommended',
     '@vue/eslint-config-prettier',
   ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
   parserOptions: {
     ecmaVersion: 'latest',
     'prettier/prettier': [

diff --git a/components.d.ts b/components.d.ts
@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     'Carbon:faceCool': typeof import('~icons/carbon/face-cool')['default']
     CarbonApi: typeof import('~icons/carbon/api')['default']
     CarbonArea: typeof import('~icons/carbon/area')['default']
+    CarbonBee: typeof import('~icons/carbon/bee')['default']
     CarbonCharacterLowerCase: typeof import('~icons/carbon/character-lower-case')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,13 @@
+{
+    "manifest_version": 3,
+    "name": "CRXJS Vue Vite Example",
+    "version": "1.0.0",
+    "action": { "default_popup": "src/popup/index.html" },
+    "permissions": ["storage"],
+    "icons": {
+        "16": "src/assets/bee16.png",
+        "32": "src/assets/bee32.png",
+        "48": "src/assets/bee48.png",
+        "128": "src/assets/bee128.png"
+    }
+  }
diff --git a/package.json b/package.json
@@ -11,11 +11,14 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@vueuse/core": "^9.1.1",
     "vue": "^3.2.37"
   },
   "devDependencies": {
+    "@crxjs/vite-plugin": "^1.0.14",
     "@iconify/json": "^2.1.101",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@types/chrome": "^0.0.196",
     "@types/jsdom": "^20.0.0",
     "@types/node": "^16.11.47",
     "@vitejs/plugin-vue": "^3.0.1",

diff --git a/src/assets/bee128.png b/src/assets/bee128.png
diff --git a/src/assets/bee16.png b/src/assets/bee16.png
diff --git a/src/assets/bee32.png b/src/assets/bee32.png
diff --git a/src/assets/bee48.png b/src/assets/bee48.png
diff --git a/src/composables/useStorageLocal.ts b/src/composables/useStorageLocal.ts
@@ -0,0 +1,29 @@
+import { storage } from 'webextension-polyfill';
+import type {
+  MaybeRef,
+  RemovableRef,
+  StorageLikeAsync,
+  UseStorageAsyncOptions,
+} from '@vueuse/core';
+import { useStorageAsync } from '@vueuse/core';
+
+const storageLocal: StorageLikeAsync = {
+  removeItem(key: string) {
+    return storage.local.remove(key);
+  },
+
+  setItem(key: string, value: string) {
+    return storage.local.set({ [key]: value });
+  },
+
+  async getItem(key: string) {
+    debugger;
+    return (await storage.local.get(key))[key];
+  },
+};
+
+export const useStorageLocal = <T>(
+  key: string,
+  initialValue: MaybeRef<T>,
+  options?: UseStorageAsyncOptions<T>
+): RemovableRef<T> => useStorageAsync(key, initialValue, storageLocal, options);
diff --git a/src/logic/index.ts b/src/logic/index.ts
@@ -0,0 +1 @@
+export * from './storage';
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
@@ -0,0 +1,5 @@
+import { useStorageLocal } from '@/composables/useStorageLocal';
+
+export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo', {
+  listenToStorageChanges: true,
+});
diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { storageDemo } from '@/logic/storage';
+function openOptionsPage() {
+  chrome.runtime.openOptionsPage();
+}
+</script>
+
+<template>
+  <main class="w-[300px] px-4 py-5 text-center text-gray-700">
+    <carbon-bee class="text-red-20 text-6xl m-auto" />
+    <p class="mt-2 opacity-50">This is the popup page</p>
+    <button
+      class="btn mt-2 bg-blue-300 px-4 py-1 rounded-md hover:bg-blue-400"
+      @click="openOptionsPage"
+    >
+      Open Options
+    </button>
+    <div class="mt-2">
+      <span class="opacity-50">Storage:</span> {{ storageDemo }}
+    </div>
+  </main>
+</template>
diff --git a/src/popup/index.html b/src/popup/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <base target="_blank">
+  <title>Popup</title>
+</head>
+<body style="min-width: 100px">
+  <div id="app"></div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>
diff --git a/src/popup/main.ts b/src/popup/main.ts
@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import 'virtual:windi.css';
+import App from './Popup.vue';
+import '@/assets/main.css';
+
+const app = createApp(App);
+app.mount('#app');
diff --git a/vite.config.ts b/vite.config.ts
@@ -8,6 +8,8 @@ import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
 import AutoImport from 'unplugin-auto-import/vite';
 import WindiCSS from 'vite-plugin-windicss';
+import { crx } from '@crxjs/vite-plugin';
+import manifest from './manifest.json';
 import windiConfig from './windi.config';
 
 // export const r = (...args: string[]) => fileURLToPath(new URL('./src', import.meta.url);
@@ -16,7 +18,7 @@ import windiConfig from './windi.config';
 export default defineConfig({
   plugins: [
     vue(),
-
+    crx({ manifest }),
     AutoImport({
       imports: [
         'vue',