Merge pull request #21 from guowenfh/upgrade-vue3

Upgrade vue3

.eslintignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+public

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "@antfu",
+  "rules": {
+    "semi": "off",
+    "@typescript-eslint/semi": "off"
+  }
+}

.gitignore

@@ -1,35 +1,16 @@
 .DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw*
-
-# Vue Browser Extension Output
-*.pem
-*.pub
-*.zip
-/dist-zip
-
-# Vue Browser Extension Output
+.idea/
+.vite-ssg-dist
+.vite-ssg-temp
+*.crx
+*.local
+*.log
 *.pem
-*.pub
+*.xpi
 *.zip
-/dist-zip
-
-/artifacts
+dist
+dist-ssr
+extension/manifest.json
+node_modules
+src/auto-imports.d.ts
+src/components.d.ts

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+auto-install-peers=true

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "vue.volar",
+    "antfu.iconify",
+    "dbaeumer.vscode-eslint",
+    "voorjaar.windicss-intellisense",
+    "csstools.postcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "cSpell.words": ["Vitesse"],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vite.autoStart": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "files.associations": {
+    "*.css": "postcss"
+  },
+  "prettier.embeddedLanguageFormatting": "off",
+  "eslint.format.enable": true
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 
+Copyright (c) 2021 Anthony Fu
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,37 +1,84 @@
 # chrome-color-picker
 
-使用 @vue/cli3 + vue-cli-plugin-browser-extension + vue-color 驱动的 chrome 调试器风格的取色器插件。
+> 旧版本可见：https://github.com/guowenfh/chrome-color-picker/tree/backup-vue2-vue-cli
+
+本项目使用 https://github.com/antfu/vitesse-webext chrome 插件开发模板
+
+使用 pnpm + vue3 + vite 强力驱动。
+
 
 Chrome 商店 已上架 地址 :[chrome-color-picker](https://chrome.google.com/webstore/detail/chrome-color-picker/ojaclcbknieckfcapcbifaijoocfmpaj?hl=zh-CN)
 
 ## 项目开发
 
+```bash
+// 如果没有安装 pnpm
+npm install -g pnpm
+```
+### 文件
+
+- `src`--主文件夹。
+  - `contentScript` - 作为`content_script`被注入的脚本和组件。
+  - `background` - 背景的脚本。
+  - `components` - 自动导入的Vue组件，在弹出窗口和选项页中共享。
+  - `styles` - 在弹出窗口和选项页中共享的样式。
+  - `assets` - Vue组件中使用的资产
+  - `manifest.ts` - 扩展的清单。
+- `extension` - 扩展包根。
+  - `assets` - 静态资产（主要用于`manifest.json`）。
+  - `dist` - 内置文件，也是Vite在开发时的存根条目。
+- `scripts` - 开发和捆绑的辅助脚本。
+
+### 开发
+
+```bash
+pnpm dev
 ```
-yarn install
-yarn run serve # dev 调试
-yarn run build # 打包
-yarn run lint  # 代码风格检查
+
+然后**在浏览器中用`extension/`文件夹加载扩展**。
+
+对于 Firefox 的开发者，你可以运行以下命令来代替。
+
+```bash
+
+pnpm start:firefox
 ```
 
-项目介绍
+`web-ext`在`extension/`文件改变时自动重新加载扩展。
 
-使用 Alt+Shift+A 可以快捷呼出/关闭取色器
+> 虽然Vite在大多数情况下自动处理HMR，但仍建议使用[Extensions Reloader](https://chrome.google.com/webstore/detail/fimgfedafeadlieiabdeeaodndnlbhid)来进行更清洁的硬重载。
 
-页面截图
+### 构建
+
+要构建该扩展，请运行
+
+```bash
+pnpm build
+```
+
+然后在`extension`下打包文件，你可以把`extension.crx`或`extension.xpi`上传到相应的扩展商店。
+
+## 演示截图
 
 1.弹出层
 
-![pouup](./demo/popup.png)
+![pouup](./src/assets/demo/popup.png)
 
 2.右键菜单
 
-![contextMenu](./demo/contextMenu.png)
+![contextMenu](./src/assets/demo/contextMenu.png)
 
 3.移动取色器
 
-![active](./demo/active.png)
+![active](./src/assets/demo/active.png)
+
+
+## 修改
+
+- 2.1.0: 默认使用 eyeDropper API 取色
+- 2.0.0: 升级到 vue3 + vite 
 
-change log：
+old change log：
 
 - 1.5.0: 修复取色记录不正确的问题
 - 1.4.0: 产品体验优化

package.json

@@ -1,43 +1,68 @@
 {
   "name": "chrome-color-picker",
-  "version": "1.5.0",
+  "displayName": "Chrome Color Picker",
+  "version": "2.1.0",
   "private": true,
+  "packageManager": "[email protected]",
+  "description": "A chrome debugger style color picker plugin",
   "scripts": {
-    "serve": "vue-cli-service build --mode development --watch",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "vue": "^2.6.10",
-    "vue-color": "^2.7.0",
-    "vuex": "^3.1.1",
-    "webextension-polyfill": "^0.4.0"
+    "dev": "npm run clear && cross-env NODE_ENV=development run-p dev:*",
+    "dev:prepare": "esno scripts/prepare.ts",
+    "dev:web": "vite",
+    "dev:js": "npm run build:js -- --mode development",
+    "build": "cross-env NODE_ENV=production run-s clear build:web build:prepare build:js",
+    "build:prepare": "esno scripts/prepare.ts",
+    "build:web": "vite build",
+    "build:js": "vite build --config vite.config.content.ts",
+    "pack": "cross-env NODE_ENV=production run-p pack:*",
+    "pack:zip": "rimraf extension.zip && jszip-cli add extension/* -o ./extension.zip",
+    "pack:crx": "crx pack extension -o ./extension.crx",
+    "pack:xpi": "cross-env WEB_EXT_ARTIFACTS_DIR=./ web-ext build --source-dir ./extension --filename extension.xpi --overwrite-dest",
+    "start:chromium": "web-ext run --source-dir ./extension --target=chromium",
+    "start:firefox": "web-ext run --source-dir ./extension --target=firefox-desktop",
+    "clear": "rimraf extension/dist extension/manifest.json extension.*",
+    "lint": "eslint .",
+    "test": "vitest test"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-service": "^3.8.4",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "babel-eslint": "^10.0.2",
-    "babel-plugin-import": "^1.12.0",
-    "eslint": "^6.4.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.2.2",
-    "husky": "^3.0.5",
-    "imports-loader": "^0.8.0",
-    "lint-staged": "^9.2.5",
-    "vue-cli-plugin-browser-extension": "^0.22.4",
-    "vue-template-compiler": "^2.6.10"
+    "@antfu/eslint-config": "^0.27.0",
+    "@ffflorian/jszip-cli": "^3.1.6",
+    "@iconify/json": "^2.1.119",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@types/fs-extra": "^9.0.13",
+    "@types/node": "^18.8.3",
+    "@types/webextension-polyfill": "^0.9.1",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@unocss/reset": "^0.45.29",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "@vue/compiler-sfc": "^3.2.40",
+    "@vue/test-utils": "^2.1.0",
+    "@vueuse/core": "^9.3.0",
+    "chokidar": "^3.5.3",
+    "cross-env": "^7.0.3",
+    "crx": "^5.0.1",
+    "eslint": "^8.25.0",
+    "esno": "^0.16.3",
+    "fs-extra": "^10.1.0",
+    "jsdom": "^20.0.1",
+    "kolorist": "^1.6.0",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.8.4",
+    "unocss": "^0.45.29",
+    "unplugin-auto-import": "^0.11.2",
+    "unplugin-icons": "^0.14.11",
+    "unplugin-vue-components": "^0.22.8",
+    "vite": "^3.1.6",
+    "vitest": "^0.24.0",
+    "vue": "^3.2.40",
+    "vue-demi": "^0.13.11",
+    "web-ext": "^7.2.0",
+    "webext-bridge": "^5.0.5",
+    "webextension-polyfill": "^0.10.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/**.{js,vue}": [
-      "vue-cli-service lint --fix",
-      "git add"
-    ]
+  "dependencies": {
+    "@ckpack/vue-color": "^1.1.9",
+    "copy-to-clipboard": "^3.3.2"
   }
 }