前端打包成桌面应用、以及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.binelectron . 即可看到如下界面:
四、利用electron-packager打包,输入如下命令后,就等待他的完成吧。
.node_modules.binelectron-packager . tomatoTimer --out ./outApp
补充:
如果打包时间过长,或者直接打包失败(尤其是在windows平台),有如下两种情况:
- 使用的是cnpm进行的包安装,由于cnpm安装是扁平的,一下子展开node_modules文件夹太多,很有可能时间过长或者失败
- 没有忽略掉node_moduels中的包,使用如下命令忽略掉node_moduels包:
electron-packager ./ tomatoTimer --out ./outApp --overwrite --ignore=node_modules
- 数据结构C#版笔记--队列(Quene)
- 数据结构C#版笔记--堆栈(Stack)
- MySQL基础入门-第一课 新建数据库(linux版本)
- 2017年度最不安全密码报告,看看你的密码安全吗?
- 数据结构C#版笔记--顺序表(SeqList)
- 数据结构C#版笔记--单链表(LinkList)
- 操作系统 页式存储 页与块之间的关系详解
- 数据结构C#版笔记--双向链表(DbLinkList)
- 斐波那契数列与IE9
- DateTime.ToString()输出"年/月/日 时:分:秒"的格式
- Flash在线拍摄用户头象
- win7 64位下如何折腾Tubro C 3.0
- TweenLite的又一应用:图片的拼图加载效果
- mysql创建数据表时如何判断是否已经存在?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【python-leetcode03-滑动窗口法】无重复字符的最大子串
- 编程语言中的值数据类型和引用数据类型之间的区别
- c++之结构体
- c++结构体实例之按结构体中指定变量进行排序
- springboot消息之整合rabbitmq
- springboot消息之@RabbitListener和@EnableRabbit
- c++实例之通讯录管理系统之显示菜单和退出功能(一)
- c++实例之通讯录管理系统之添加联系人功能(二)
- c++实例之通讯录管理系统之显示联系人功能(三)
- c++实例之通讯录管理系统之删除联系人功能(四)
- springboot检索之Elasticsearch简介
- c++实例之通讯录管理系统之查找联系人功能(五)
- 【python-leetcode424-滑动窗口法】替换后的最长重复字符
- c++实例之通讯录管理系统之修改联系人功能(六)
- 解决arxiv.org打开pdf缓慢问题