前端打包成桌面应用、以及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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏安恒网络空间安全讲武堂

翻译 | Linux利用动态链接共享对象库提权

Linux利用动态链接共享对象库提权 RPATH和弱文件权限会导致系统的损害。Linux应用程序可以利用动态链接的共享对象库(我们从现在开始称它们为共享库)来提...

2465
来自专栏木制robot技术杂谈

懒人神器 autoenv

前言 每次去不同的项目下运行程序都要更改相对应的 Python 环境,那么有什么办法可以省去这繁琐的一步吗?答案肯定是有的,Kenneth Reitz 已经为我...

4316
来自专栏Web项目聚集地

Git简洁教程-本地项目推送到GitHub

Git是当今最流行的版本控制软件,它包含了许多高级工具,这里小编就讲一下Git的安装和使用,怎样推送到自己的远程仓库。

1152
来自专栏云计算教程系列

如何在Ubuntu 14.04上安装Munin监视工具

Munin是一个系统,网络和基础设施监控应用程序,通过Web浏览器以图形形式提供信息。它是围绕客户端 - 服务器架构设计的,可以配置为监控它所安装的机器(Mun...

1150
来自专栏北京马哥教育

Gitlab CE 8.1.3 安装手册(Debian/Ubuntu)

安装概述 Gitlab的安装过程主要包括以下组件的配置: 安装软件包及解决依赖项 Ruby环境 Go 系统用户 数据库(Mysql/Postgresql) Re...

3465
来自专栏WindCoder

ubuntu中常用命令

作用:赋予当前命令行为管理员权限。 样式:sudo 其它命令 举例:sudo su #切换到超级管理员权限模式#

3462
来自专栏别先生

Eclipse连接到My sql数据库之前操作

Eclipse连接到My sql数据库之前操作 1:首先是安装My sql数据库(为了减少你的麻烦,按照下面的连接,下载即可)百度云链接:http://pan....

2558
来自专栏守望轩

Visual Studio 2008 每日提示(二十七)

#261、按Ctrl+Alt+B打开断点窗口 原文链接:You can press Ctrl+Alt+B to open the Breakpoint Win...

3266
来自专栏云计算教程系列

如何在Ubuntu 18.04上安装和配置Postfix

Postfix是一种流行的开源邮件传输代理(MTA),可用于在Linux系统上路由和传递电子邮件。据估计,互联网上约有25%的公共邮件服务器运行Postfix。

3111
来自专栏Django中文社区

注销和页面跳转

当用户想切换登录账号,或者想退出登录状态时,这时候就需要注销已登录的账号。现在我们来为网站添加注销登录的功能,这个功能 Django 也已经为我们提供,我们只需...

5809

扫码关注云+社区

领取腾讯云代金券