chrome插件的使用与支出

     前段时间在运用工作之余开发了tomato
timer这些蕃茄钟,然后计划到github.io上,由于greatway太狠心,偶尔会有打不开的动静。下一周末比较做了扩展和革新,使其改为chrome的插件,只怕成为桌面app。

一 、怎样设置与使用:

1、下载tomato timer项目,github地址
https://github.com/cqhaibin/tomato-timer.git

二 、切换来V2.0.0.0的tag,然后如下图所布署:

json 1

三 、然后单击 “小飞”图标即可使用,界面如下图:

json 2

桌面App打包

壹 、此打包要求设置如下多少个npm包:

electron:可将前端项目包装成为1个桌面app,并且他还提供了一系统的对操作系统的造访

electron-packager:发表桌面app

② 、安装好后,对package.json文件进行如下配置

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

这八个节点是必须的,且main会作为electron的进口文件。

三、运行.\node_modules\.bin\electron . 即可知到如下界面:
json 3

四 、利用electron-packager打包,输入如下命令后,就等候他的形成吗。

json,.\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

 

贰 、打包源码简单介绍

本chrome插件的贯彻思路:插件开发是因而vue、vuex等落到实处的;然后经过rollup打包改成三个独门的js文件(tomatoTimer.js);最终安顿chrome插件的manifest.json文件即可。

壹 、怎么样通过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中运作时会报错。

二 、对vue的引用须要留意,由于vue2.0上马,vue提供的文书分为runtime、compile等品类,所以要一向钦定,如下代码所示:

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

此代码在项目标aloneindex.js文件中。

  1. 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  
  1. 注意

    1.
browser_action中的default_popup有安排值时,chrome.browserAction.onClicked.addListener事件不会被触发

相关文章

网站地图xml地图