浏览器可以配合独立窗口打开快捷键 #56

9f3efbe5 · baiy · ninecents · ea3dcdea · 9f3efbe5 · 9f3efbe5
11 changed file
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ yarn-error.log*
 *.sln
 *.sw*
 test.js
+/public/background.html
--- a/README.md
+++ b/README.md
@@ -5,18 +5,20 @@
 ## chrome 安装

 - 方法1: 在 [Chrome 应用商店](https://chrome.google.com/webstore/detail/ipfcebkfhpkjeikaammlkcnalknjahmh) 安装
- 方法2: [下载 .crx 安装包](https://github.com/baiy/Ctool/releases/latest)手动安装 [猛戳这里查看手动安装教程](http://www.cnplugins.com/tool/outline-install-crx-file.html)
+- 方法2: [下载 .crx 安装包](https://github.com/baiy/Ctool/releases/latest)
 - 方法3: [百度网盘下载](https://pan.baidu.com/s/1mhWbqWC) 安装方法和方法2一致

 > 方法2 / 方法3 不定期维护 仅供网络环境特别恶劣的同学使用
+> 
+> [猛戳这里查看手动安装`.crx`教程](http://www.cnplugins.com/tool/outline-install-crx-file.html)

 ### 本地打包/调试

 ```
 # 打包
-npm run build -adapter=chrome
+npm run build -adapter=[chrome|edge|utools|web]
 # 调试
-npm run serve -adapter=chrome
+npm run serve -adapter=[chrome|edge|utools|web]
 ```

 ## 微软 Edge 安装

--- a/package.json
+++ b/package.json
 {
    "name": "c-tool",
-    "version": "1.6.6",
+    "version": "1.6.7",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --port 8081",

--- a/src/adapter/chrome/manifest.json
+++ b/src/adapter/chrome/manifest.json
@@ -11,6 +11,9 @@
        "default_title": "常用开发工具",
        "default_popup": "index.html"
    },
+    "background": {
+        "page": "background.html"
+    },
    "icons": {
        "16": "img/icon_chrome.png",
        "48": "img/icon_chrome.png",
@@ -19,7 +22,14 @@
    "permissions": [
        "clipboardWrite",
        "clipboardRead",
-        "*://ifconfig.co/*"
+        "*://ifconfig.co/*",
+        "*://*.baiy.org/*"
    ],
+    "commands": {
+        "panel": {
+            "description": "打开独立工具串口",
+            "global": true
+        }
+    },
    "update_url": "http://clients2.google.com/service/update2/crx"
 }
\ No newline at end of file
--- a/src/adapter/chromium/background.html
+++ b/src/adapter/chromium/background.html
+<!DOCTYPE html>
+<html>
+<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>Ctool 程序开发常用工具</title>
+</head>
+<body>
+<div>
+    <div id="app"></div>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/src/adapter/edge/manifest.json
+++ b/src/adapter/edge/manifest.json
@@ -6,15 +6,13 @@
    "offline_enabled": true,
    "homepage_url": "https://github.com/baiy/Ctool",
    "manifest_version": 2,
-    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "browser_action": {
        "default_icon": "img/icon_chrome.png",
        "default_title": "常用开发工具",
        "default_popup": "index.html"
    },
-    "default_locale": "zh_CN",
    "background": {
-        "scripts": ["background.js"]
+        "page": "background.html"
    },
    "icons": {
        "16": "img/icon_chrome.png",
@@ -24,13 +22,13 @@
    "permissions": [
        "clipboardWrite",
        "clipboardRead",
-        "*://get.geojs.io/*",
+        "*://ifconfig.co/*",
        "*://*.baiy.org/*"
    ],
    "commands": {
        "panel": {
-            "description": "打开独立工具窗口",
+            "description": "打开独立工具串口",
            "global": true
        }
    }
-}
+}
\ No newline at end of file
--- a/src/background.js
+++ b/src/background.js
+import cache from './tool/cache'
+// 打开独立窗口
+const panel = {
+    cacheName: "background:panel:window_id",
+    create() {
+        chrome.windows.create({
+            url: chrome.runtime.getURL("tool.html"),
+            type: "popup",
+            width: 850,
+            left: 200,
+            top: 200,
+            height: 580,
+        }, (w) => {
+            cache.set(this.cacheName, w.id)
+        })
+    },
+    open() {
+        let windowId = cache.get(this.cacheName)
+        if (windowId === null) {
+            this.create()
+        } else {
+            chrome.windows.get(windowId, (w) => {
+                if (!w) {
+                    this.create()
+                } else {
+                    chrome.windows.update(windowId, {focused: true})
+                }
+            })
+        }
+
+    },
+    onRemoved(id) {
+        if (id === cache.get(this.cacheName)) {
+            cache.remove(this.cacheName)
+        }
+    }
+}
+
+// 注册快捷键
+chrome.commands.onCommand.addListener((command) => {
+    switch (command) {
+        case "panel":
+            panel.open()
+
+            break;
+        default:
+            return;
+    }
+})
+
+// 窗口关闭事件
+chrome.windows.onRemoved.addListener((id) => {
+    panel.onRemoved(id);
+})
+
--- a/src/helper.js
+++ b/src/helper.js
@@ -5,6 +5,8 @@ export const env = function (key) {
 };

 export const isChrome = !!env('isChrome')
+export const isEdge = !!env('isEdge')
+export const isChromium = !!env('isChromium')
 export const isWeb = !!env('isWeb')
 export const isUtools = !!env('isUtools')

@@ -27,10 +29,10 @@ export const inArray = function (value, arr) {
 };

 export const openTab = function (url) {
-    if (isChrome && chrome.tabs) {
+    if (isChromium && chrome.tabs) {
        return chrome.tabs.create({url: url, selected: true});
    }
-    if (isUtools && window.utools){
+    if (isUtools && window.utools) {
        return window.utools.shellOpenExternal(url)
    }
    return window.open(url);
@@ -45,7 +47,7 @@ export const stat = function (action, data = {}) {
                    {
                        v: env('version'),
                        a: action,
-                        p:env('platform'),
+                        p: env('platform'),
                        r: Math.random()
                    },
                    data

--- a/src/tool/adapter.js
+++ b/src/tool/adapter.js
 const path = require('path');
 const _ = require('lodash');
+const fs = require('fs');
 // 运行平台适配
 let platform = process.env.hasOwnProperty('npm_config_adapter') ? process.env.npm_config_adapter : "";
-platform = ["chrome", 'utools'].includes(platform) ? platform : "web"
+platform = ["chrome", 'utools', 'edge'].includes(platform) ? platform : "web"

 const IS_CHROME = "chrome" === platform
+const IS_EDGE = "edge" === platform
 const IS_UTOOLS = "utools" === platform
+const IS_CHROMIUM = ['chrome', 'edge'].includes(platform)
 const IS_WEB = "web" === platform

 const toolConfig = require('../config')
@@ -22,31 +25,45 @@ const getToolFeatureTitle = (name, features = []) => {
    return name
 }

+// 删除文件
+const removeFile = (filePath) => {
+    fs.existsSync(filePath) && fs.unlinkSync(filePath)
+}
+
 const chromeConfigWrite = () => {
-    let fs = require('fs');
-    // 移除环境配置文件
-    let manifestPath = path.join(__dirname, '../../public/manifest.json');
-    fs.unlink(manifestPath, () => {
-    });
    if (IS_CHROME) {
-        fs.readFile(path.join(__dirname, "../adapter/chrome/manifest.json"), 'utf8', function (err, files) {
-            if (err) return console.log(err);
-            let result = files.replace(/##version##/g, process.env.npm_package_version);
-            fs.writeFile(manifestPath, result, 'utf8', function (err) {
-                if (err) return console.log(err);
-            });
-        });
+        fs.writeFileSync(
+            path.join(__dirname, '../../public/manifest.json'),
+            fs.readFileSync(path.join(__dirname, "../adapter/chrome/manifest.json")).toString().replace(/##version##/g, process.env.npm_package_version)
+        );
+    }
+}
+
+const edgeConfigWrite = () => {
+    if (IS_EDGE) {
+        fs.writeFileSync(
+            path.join(__dirname, '../../public/manifest.json'),
+            fs.readFileSync(path.join(__dirname, "../adapter/edge/manifest.json")).toString().replace(/##version##/g, process.env.npm_package_version)
+        );
+    }
+}
+
+const chromiumConfigWrite = () => {
+    // 移除环境配置文件
+    removeFile(path.join(__dirname, '../../public/manifest.json'));
+    let backgroundPath = path.join(__dirname, '../../public/background.html');
+    removeFile(backgroundPath);
+    if (IS_CHROMIUM) {
+        fs.copyFileSync(path.join(__dirname, "../adapter/chromium/background.html"), backgroundPath);
    }
 }

 const utoolsConfigWrite = () => {
-    let fs = require('fs');
    // 移除环境配置文件
    let fileArr = ['plugin.json', 'README.md']
    fileArr.forEach((file) => {
        let filePath = path.join(__dirname, '../../public/' + file);
-        fs.unlink(filePath, () => {
-        });
+        removeFile(filePath);
    })
    if (IS_UTOOLS) {
        let pluginPath = path.join(__dirname, '../../public/plugin.json');
@@ -116,9 +133,7 @@ const utoolsConfigWrite = () => {
            let result = files
                .replace(/##version##/g, process.env.npm_package_version)
                .replace(/"##features##"/g, JSON.stringify(features));
-            fs.writeFile(pluginPath, result, 'utf8', function (err) {
-                if (err) return console.log(err);
-            });
+            fs.writeFileSync(pluginPath, result);
        });
        let readmePath = path.join(__dirname, '../../public/README.md');
        fs.copyFile(path.join(__dirname, "../../README.md"), readmePath, function (err) {
@@ -130,10 +145,14 @@ const utoolsConfigWrite = () => {
 module.exports = {
    platform: platform,
    isChrome: IS_CHROME,
+    isChromium: IS_CHROMIUM,
+    isEdge: IS_EDGE,
    isWeb: IS_WEB,
    isUtools: IS_UTOOLS,
    initialize: function () {
+        chromiumConfigWrite();
        chromeConfigWrite();
+        edgeConfigWrite();
        utoolsConfigWrite();
    }
 }
\ No newline at end of file
--- a/src/views/setting/block.vue
+++ b/src/views/setting/block.vue
@@ -3,7 +3,7 @@
        <div>
            <CellGroup @on-click="open">
                <Cell title="常用工具设置" name="setting"/>
-                <Cell v-if="is_chrome" title="快捷键设置" name="shortcuts"/>
+                <Cell v-if="is_chromium" title="快捷键设置" name="shortcuts"/>
            </CellGroup>
            <CellGroup>
                <Cell title="自动复制结果到剪贴板">
@@ -24,7 +24,7 @@
 </template>

 <script>
-import {isChrome, isUtools, openTab} from '../../helper'
+import {isChromium, isUtools, openTab} from '../../helper'
 import setting from '../../tool/setting'
 import settingBlock from './setting'

@@ -38,7 +38,7 @@ export default {
            auto_save_copy: true,
            auto_read_copy: true,
            auto_read_copy_filter: false,
-            is_chrome: isChrome,
+            is_chromium: isChromium,
            is_utools: isUtools,
        }
    },

--- a/vue.config.js
+++ b/vue.config.js
 let adapter = require('./src/tool/adapter');

+let pages = {}
+pages.tool = {
+    entry: 'src/tool.js',
+    template: 'public/tool.html',
+};
+if (adapter.isChromium) {
+    pages.background = {
+        entry: 'src/background.js',
+        template: 'public/background.html',
+    };
+}
 const config = {
    productionSourceMap: false,
-    publicPath:"./",
-    pages: {
-        tool: {
-            entry: 'src/tool.js',
-            template: 'public/tool.html',
-        }
-    },
+    publicPath: "./",
+    pages: pages,
    chainWebpack: config => {
        config.plugin('define').tap(args => {
            args[0]['process.ctool'] = JSON.stringify({
@@ -16,6 +22,8 @@ const config = {
                updateTime: Date.parse((new Date()).toString()) / 1000,
                platform: adapter.platform,
                isChrome: adapter.isChrome,
+                isEdge: adapter.isEdge,
+                isChromium: adapter.isChromium,
                isWeb: adapter.isWeb,
                isUtools: adapter.isUtools,
            });