feat: 🎸 add chrome plugin

add chrome plugin
lgf-136 · Sep 28, 2022 · d89da41 · d89da41
1 parent fafa1ad
commit d89da41
Show file tree

Hide file tree

Showing 14 changed files with 387 additions and 6 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/all-in-one-template/config/chrome/index.ts b/projects/all-in-one-template/config/chrome/index.ts
@@ -0,0 +1,50 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+import copy from 'rollup-plugin-copy';
+// import styleImport from 'vite-plugin-style-import';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  plugins: [
+
+    /*
+     * styleImport({
+     *   libs: [
+     *     {
+     *       libraryName: 'antd',
+     *       esModule: true,
+     *       resolveStyle: name => `antd/es/${name}/style/css`,
+     *     },
+     *   ],
+     * }),
+     */
+    react(),
+    copy({
+      targets: [
+        { src: 'src/manifest.json',
+          dest: 'dist' },
+        { src: 'src/assets',
+          dest: 'dist' },
+      ],
+      hook: 'writeBundle',
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      input: [ 'index.html', 'src/background.ts', 'src/contentScript.ts' ],
+      output: {
+        chunkFileNames: '[name].[hash].js',
+        assetFileNames: '[name].[hash].[ext]',
+        entryFileNames: '[name].js',
+        dir: 'dist',
+      },
+    },
+  },
+});
diff --git a/projects/all-in-one-template/package.json b/projects/all-in-one-template/package.json
@@ -30,6 +30,7 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@faker-js/faker": "^7.5.0",
+    "@types/chrome": "^0.0.197",
     "@types/node": "^18.7.23",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
@@ -55,6 +56,7 @@
     "postcss-preset-env": "^7.8.2",
     "postcss-pxtorem": "^6.0.0",
     "postcss-scss": "^4.0.5",
+    "rollup-plugin-copy": "^3.4.0",
     "standard-version": "^9.5.0",
     "stylelint": "^14.12.1",
     "stylelint-config-recess-order": "^3.0.0",
@@ -66,12 +68,14 @@
     "vite-plugin-ejs": "^1.5.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-monkey": "^2.5.1",
+    "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-utools": "^0.1.1-beta.1",
     "vue-eslint-parser": "^9.1.0"
   },
   "dependencies": {
     "@lgf136/utils": "workspace:^0.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.1"
   }
 }
diff --git a/projects/all-in-one-template/public/background/background.html b/projects/all-in-one-template/public/background/background.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>background</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/projects/all-in-one-template/public/img/icon_128x128.png b/projects/all-in-one-template/public/img/icon_128x128.png
diff --git a/projects/all-in-one-template/public/img/icon_16x16.png b/projects/all-in-one-template/public/img/icon_16x16.png
diff --git a/projects/all-in-one-template/public/img/icon_32x32.png b/projects/all-in-one-template/public/img/icon_32x32.png
diff --git a/projects/all-in-one-template/public/img/icon_48x48.png b/projects/all-in-one-template/public/img/icon_48x48.png
diff --git a/projects/all-in-one-template/public/img/icon_64x64.png b/projects/all-in-one-template/public/img/icon_64x64.png
diff --git a/projects/all-in-one-template/public/manifest.json b/projects/all-in-one-template/public/manifest.json
@@ -0,0 +1,36 @@
+{
+  "name": "Vite Chrome Extension",
+  "version": "1.0",
+  "manifest_version": 3,
+  "action": {
+    "default_icon": {
+      "16": "img/icon_16x16.png",
+      "48": "img/icon_48x48.png",
+      "128": "img/icon_128x128.png"
+    },
+    "default_title": "Popup",
+    "default_popup": "index.html"
+  },
+  "background": {
+    "matches": [
+      "http://localhost/*"
+    ],
+    "service_worker": "background.js"
+  },
+  "permissions": [],
+  "content_scripts": [
+    {
+      "matches": [
+        "http://localhost/*"
+      ],
+      "js": [
+        "contentScript.js"
+      ],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "host_permissions": [
+    "https://*/"
+  ]
+}
diff --git a/projects/all-in-one-template/src/background.ts b/projects/all-in-one-template/src/background.ts
@@ -0,0 +1,2 @@
+console.log('init background.js');
+export {};
diff --git a/projects/all-in-one-template/src/contentScript.ts b/projects/all-in-one-template/src/contentScript.ts
@@ -0,0 +1,2 @@
+console.log('init contentScript');
+export {};
diff --git a/projects/all-in-one-template/tsconfig.json b/projects/all-in-one-template/tsconfig.json
@@ -1,14 +1,15 @@
 // react
 {
   "compilerOptions": {
+    "baseUrl": "./",
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": [
       "DOM",
       "DOM.Iterable",
       "ESNext"
     ],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
@@ -19,7 +20,15 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+    },
+    "types": [
+      "@types/chrome",
+    ]
   },
   "include": [
     "src"

diff --git a/projects/all-in-one-template/vite.config.ts b/projects/all-in-one-template/vite.config.ts
@@ -11,6 +11,7 @@ const viteServeConfig = require('./config/vite/vite.serve.config');
 const viteBuildConfig = require('./config/vite/vite.build.config');
 
 import utoolsPlugin from './config/utools';
+import chromePlugin from './config/chrome';
 // pnpm create monkey    to generate tampermonkey template with vite
 const tampermonkeyPluginConfig = require('./config/tampermonkey/react-ts');
 // import viteConfig from '@lgf136/config'; // 不能导入模块？？？
@@ -54,6 +55,8 @@ const utoolsPluginConfig = defineConfig(({ command = '', mode = 'development', u
 
 // module.exports = utoolsPluginConfig;
 
+module.exports = chromePlugin;
+
 // build tampermonkey plugin
 
-module.exports = tampermonkeyPluginConfig;
+// module.exports = tampermonkeyPluginConfig;