前端打包成桌面應用、以及chrome擴充套件

小龍女先生發表於2017-08-02
前端Chrome套件

     前段時間在利用工作之餘開發了tomato timer這個蕃茄鍾，然後部署到github.io上，由於greatway太厲害，偶爾會有打不開的情況。上週末對比做了擴充套件和改進，使其成為chrome的外掛，或者成為桌面app。

chrome外掛的使用與開發

一、如何安裝與使用：

1、下載tomato timer專案,github地址 https://github.com/cqhaibin/tomato-timer.git

2、切換到V2.0.0.0的tag，然後如下圖所配置:

3、然後單擊 “小飛”圖示即可使用，介面如下圖：

二、打包原始碼簡單介紹

本chrome外掛的實現思路：外掛開發是通過vue、vuex等實現的；然後通過rollup打包成為一個獨立的js檔案（tomatoTimer.js）；最後配置chrome外掛的manifest.json檔案即可。

1、如何通過rollup把vue專案獨立打包成一個js檔案，程式碼片段如下：

 

var VueLoader = require('rollup-plugin-vue');
var Resolve = require('rollup-plugin-node-resolve');
var Commonjs = require("rollup-plugin-commonjs");
var replace = require('rollup-plugin-replace');
var path = require('path');
var babel = require('rollup-plugin-babel');
var paths = require("./paths");
var rollup = require('rollup');
var type = process.env.TYPE;

let config = {
    entry: path.resolve(__dirname, paths[type].source),
    plugins: [VueLoader(), babel({
      exclude: 'node_modules/**' // only transpile our source code
    }), Resolve({
    // pass custom options to the resolve plugin
    customResolveOptions: {
      moduleDirectory: 'node_modules'
    },
    jsnext: true,
    main: true,
    browser:true
  }), Commonjs(), replace({
    'process.env.NODE_ENV': JSON.stringify('development'),
    'process.env.VUE_ENV': JSON.stringify('browser')
  })]
};
rollup.rollup(config).then(function(bundle){
    bundle.write({
        format: 'iife',
        moduleName: "tomato",
        sourceMap: true,
        dest: path.resolve(__dirname, paths[type].dest)
    });
});

這裡利用了rollup-plugin-replace外掛替換vue中的一些配置，不加此外掛在browser中執行時會報錯。

2、對vue的引用需要注意，由於vue2.0開始，vue提供的檔案分為runtime、compile等型別，所以要直接指定，如下程式碼所示：

import Vue from 'vue/dist/vue.js';

此程式碼在專案的aloneindex.js檔案中。

3. chrome外掛的配置

{
    "manifest_version": 2,
    "name": "tomato timer",
    "version": "1.0.0.0",
    "description": "tomato timer",
    "icons": {
        "16": "icons/tomatotimer-16.png",
        "48": "icons/tomatotimer-48.png",
        "64": "icons/tomatotimer-64.png",
        "128": "icons/tomatotimer-128.png"
    },
    "author": "sam long",
    "permissions": [
        "tabs", //可訪問tab
        "storage" //可以訪問本地儲存
    ],
    //右鍵單擊右上角外掛logo時，彈出的視窗
    "options_page": "view/options.html",
    //左鍵單擊右上角外掛logo時，彈出的視窗
    "browser_action": {
        "default_icon": {
            "38": "icons/tomatotimer-48.png"
        },
        //"default_popup": "view/popup.html",
        "default_title": "tomato timer"
    },
    //後臺執行的js程式物件
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "content_security_policy": "script-src 'unsafe-eval'; object-src 'unsafe-eval'"
}

此配置只是實現一個chrome外掛的簡單配置，更多配置可以參考baidu。其中較為重要為background節點的配置，因為他能響應chrome外掛上的行為，如你單擊瀏覽器位址列旁邊的圖示事件就需在此檔案中捕獲。background.js程式碼如下：

chrome.browserAction.onClicked.addListener(function(tab) {
    var destUrl = './index.html';
    chrome.tabs.create({ url: destUrl });
});

然後則是content_security_policy節點，他簡稱csp策略，預設chrome外掛只會加同域下的安全資料夾下的js。所以此處要設定unsafe-eval。更多配置如下：

值 說明
self 同域(預設)
unsafe-inline 行內js可以執行
unsafe-eval 本地js檔案可以執行
none  

4. 注意

    1. browser_action中的default_popup有配置值時，chrome.browserAction.onClicked.addListener事件不會被觸發

桌面App打包

一、此打包需要安裝如下兩個npm包：

electron：可將前端專案包裝成為一個桌面app，並且他還提供了一系統的對作業系統的訪問

electron-packager：釋出桌面app

二、安裝好後，對package.json檔案進行如下配置

"name": "simple",
"version": "1.0.0",
"main": "electron/main.js",

這三個節點是必須的，且main會作為electron的入口檔案。

三、執行.\node_modules\.bin\electron . 即可看到如下介面：

四、利用electron-packager打包，輸入如下命令後，就等待他的完成吧。

.\node_modules\.bin\electron-packager . tomatoTimer --out ./outApp

 

補充：

如果打包時間過長，或者直接打包失敗（尤其是在windows平臺），有如下兩種情況：

  1. 使用的是cnpm進行的包安裝，由於cnpm安裝是扁平的，一下子展開node_modules資料夾太多，很有可能時間過長或者失敗
  2. 沒有忽略掉node_moduels中的包，使用如下命令忽略掉node_moduels包: electron-packager ./ tomatoTimer --out ./outApp --overwrite --ignore=node_modules

 

相關文章