提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件( 三 )


文章插图

  1. 利用SpreadJS 可以导出Excel的特性 , 可以将当前sheet导出到Excel中 。在导出Excel前 , 要通过toJSON获取其序列化数据 。这时候要注意序列化选项:将includeBindingSource设置为true, columnHeadersAsFrozenRows设置为true 。
var serializationOption = {        includeBindingSource: true,        columnHeadersAsFrozenRows: true,};var json = spread.toJSON(serializationOption);在序列化成功后 , 就可以导出到Excel文件啦 。var excelIo = new GC.Spread.Excel.IO();excelIo.save( json,function (blob) {    saveAs(blob, fileName);},function (e) {    console.log(e);});在manifest.json文件中进行基础配置 , 如icons可以配置插件图标 , 我们的插件安装后 , popup页面也运行了;但是我们也发现了 , popup页面只能做临时性的交互操作 , 用完就关了 , 不能存储信息或者和其他标签页进行交互等等;这时就需要用到background(后台) , 它是一个常驻的页面 , 它的生命周期是插件中所有类型页面中最长的;这里设置background.js 用来作为后台管理 , 处理通知等、刷新、徽章等数据 。至于action配置之前也提到了 , 可以配置弹出页面 , 最后的permissions可以配置权限 。
提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

文章插图
基础配置之后 , 就可以在background.js中来进行我们的处理啦 。在插件安装成功后 , 可以通过chrome.alarms这个api创建刷新时间与通知时间 。
chrome.runtime.onInstalled.addListener(function () {console.log("插件已被安装");chrome.storage.sync.get(["notiTime", "updateTime"], function (result) {    if (result && result.notiTime) {      var notiTime = parseFloat(result.notiTime);      if (notiTime > 0) {        chrome.alarms.create("UserReplyTimer", { periodInMinutes: notiTime });      }    }    if (result && result.updateTime) {      var updateTime = parseFloat(result.updateTime);      if (updateTime > 0) {        chrome.alarms.create("UpdateCountTimer", {          periodInMinutes: updateTime,        });      }    }  });});当刷新时间到 , 可以为其更改插件图标徽章中待处理帖子数量 。使用chrome.actionAPI 控制 Google Chrome 工具栏中的扩展程序图标 。
chrome.action.setBadgeBackgroundColor({ color: "#CCCCFF" });chrome.action.setBadgeText({ text: unreadTopicCount > 0 ? "" + unreadTopicCount : "",  });其结果如下图所示 , 还有17个帖子需要处理 , 提示自己加油呀!
提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

文章插图
当通知时间到 , 在电脑右下角可以弹窗浏览器通知 , 通知我们待办数量 。使用chrome.notificationsAPI 使用模板创建丰富的通知 , 并将这些通知显示给系统托盘中的用户 。当你的桌面不再停留在浏览器 , 或许你在处理邮件 , 或许你在编辑Excel 。这时候系统发出的通知 , 会大大提高你的工作效率 。

经验总结扩展阅读