关键词：chrome,spreadjs,chrome扩展插件、chrome extension,excel,javascript、消息推送,浏览器插件、待办任务、提醒
相信使用chrome(谷歌浏览器)的小伙伴们都在用chrome扩展插件(chrome extension)，类似一键翻译、批量下载网页图片、onetab、甚至大名鼎鼎的 ”油猴” 等。
但是有时候，我们需要一些chrome应用市场上没有的特定功能的插件，例如任务提醒、报表自动生成、与内部数据系统交互的数据分析或上传下载等。
作为一个葡萄城gcdn论坛的超级版主，每日需要回复用户提出的大量问题，往往一个不注意，很容易漏回用户帖子。这时候有这么一个浏览器插件，随时提醒你还有多少帖子待回复，是不是很炫酷呢？当你晚上回复完所有论坛帖子，这时候插件徽章上不再有数字，这时候是不是成就感满满。这多亏了一个神秘工具——spreadjs。
葡萄城表格技术的优势
葡萄城表格技术产品 spreadjs 和 gcexcel 兼容 excel 数据格式，在设计报表模板时，可以为我们提供高度类似 excel 的使用体验；在分析数据时，可以提供超过 450 种计算公式和 32 种图表类型，既可满足我们自定义、跨表格引用、异步调用等多场景计算需求，又可实现丰富的数据可视化效果，建立如 excel 般强大的数据分析能力。
更重要的是，spreadjs 是纯前端的，可以和chrome扩展插件完美结合，轻松地把excel的能力集成到chrome中，实现效果惊人的插件应用。接下来咱们就花30分钟时间，一起写一个展示待办任务的浏览器插件（想获取本文的完整demo，请访问spreadjs凯发k8官网下载官网在线咨询获取）：
1. 首先在package.json文件中引入spreadjs相关依赖文件
{
"dependencies": {
"@grapecity/spread-excelio": "15.2.0",
"@grapecity/spread-sheets": "15.2.0",
"@grapecity/spread-sheets-resources-zh": "15.2.0"
}
}
2. 其次创建spreadjs容器。在manifest.json文件中，可以配置点击插件图标时弹出的小窗口的页面。这里配置了index.html页面。
接着我们在index.html中创建spreadjs的目标dom元素：
3.创建容器之后，就可以初始化spreadjs了。在gc.spread.sheets.workbook构造函数中，有两个参数。第一个参数是宿主dom元素或者id，这里是‘ss’。第二个参数是初始化选项。这里设置了三个值： sheetcount、scrollbarmaxalign、newtabvisible；分别表示表单数量，滚动条与活动表单的最后一行和最后一列对齐，不显示新增表单选项。
window.onload = function () {
var spread = new gc.spread.sheets.workbook("ss",{ sheetcount: 1, scrollbarmaxalign:true, newtabvisible:false });
};
4.获取spreadjs对象后，就可以进行绑定数据、进行数据展示啦。首先可以为其绑定列，自定义表头，根据列名设置宽度，根据内容设置数据格式或者单元格类型等。这时候可以定义帖子标题，发帖时间，是否金牌用户、地区等等信息。
var sheet = spread.getactivesheet();
var colinfos = [
{name: "帖子标题", displayname: "帖子标题", size: 300},
{
name: "发帖时间",
displayname: "发帖时间",
size: 100,
formatter: "mm-dd hh:mm",
},
{
name: "city",
displayname: "地区",
celltype: colorarea
},
];
sheet.autogeneratecolumns = false;
sheet.bindcolumns(colinfos);
5.其次通过xmlhttprequest获取任务列表数据，获取数据后，可以进行表单数据绑定。
var xhr = new xmlhttprequest();
xhr.open("get",url,true);
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
var resp = json.parse(xhr.responsetext);
if (resp instanceof array) {
sheet.setdatasource(resp);
}
}}
xhr.send();
6.绑定数据后还可以为其添加筛选、排序等功能。如为其筛选区域。如想查看北方区所有的论坛帖子，就可以在sheet表单第9列为其绑定筛选条件。
var condition =new gc.spread.sheets.conditionalformatting.condition(
gc.spread.sheets.conditionalformatting.conditiontype.textcondition,
{comparetype: gc.spread.sheets.conditionalformatting.textcomparetype .contains,
expected: "*北方区*",} );
sheet.rowfilter().addfilteritem(9, condition);
sheet.rowfilter().filter(9);
sheet.rowfilter().filterbuttonvisible(true);
其结果如下图所示：
7.根据条件规则设置样式
sheet.conditionalformats.addspecifictextrule(
gc.spread.sheets.conditionalformatting.textcomparisonoperators.contains,
"未处理",style1,ranges);
sheet.conditionalformats.addspecifictextrule(
gc.spread.sheets.conditionalformatting.textcomparisonoperators.contains,
"处理中", style2,ranges);
以上代码分别为"未处理"与"处理中"赋值不同样式。这样子可以很醒目看到论坛帖子处理状态。其结果如下所示：
8.利用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);
}
);
说完spreadjs的一些功能，下面咱们介绍下chrom插件吧。
chrome插件，官方名称extensions（扩展程序）；为了方便理解，以下都称为插件。
我们开发的插件需要在浏览器里面运行，打开浏览器，通过右上角的三个点（自定义及控制）-更多工具-拓展程序-打开开发者模式。点击"加载已解压的拓展程序，选择项目文件夹，就可将开发中的插件加载进来。
插件是基于web技术构建的，例如html、javascript和css。它们在单独的沙盒执行环境中运行并与chrome浏览器进行交互。插件允许我们通过使用api修改浏览器行为和访问web内容来扩展和增强浏览器的功能。
首先在manifest.json文件中进行基础配置，如icons可以配置插件图标，我们的插件安装后，popup页面也运行了；但是我们也发现了，popup页面只能做临时性的交互操作，用完就关了，不能存储信息或者和其他标签页进行交互等等；这时就需要用到background（后台），它是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的；这里设置background.js 用来作为后台管理，处理通知等、刷新、徽章等数据。至于action配置之前也提到了，可以配置弹出页面，最后的permissions可以配置权限。
基础配置之后，就可以在background.js中来进行我们的处理啦。
1. 在插件安装成功后，可以通过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,
});
}
}
});
});
2. 当刷新时间到，可以为其更改插件图标徽章中待处理帖子数量。使用chrome.actionapi 控制 google chrome 工具栏中的扩展程序图标。
chrome.action.setbadgebackgroundcolor({ color: "#ccccff" });
chrome.action.setbadgetext({
text: unreadtopiccount > 0 ? "" unreadtopiccount : "",
});
其结果如下图所示，还有17个帖子需要处理，提示自己加油呀！
3. 当通知时间到，在电脑右下角可以弹窗浏览器通知，通知我们待办数量。使用chrome.notificationsapi 使用模板创建丰富的通知，并将这些通知显示给系统托盘中的用户。当你的桌面不再停留在浏览器，或许你在处理邮件，或许你在编辑excel。这时候系统发出的通知，会大大提高你的工作效率。
var options = {
type: "basic",
iconurl: "img/icon.png",
title: "gcdn提醒",
message: "你关注的板块有" unreadtopiccount "个帖子需要处理",
};
chrome.notifications.clear("userreplynotification");
chrome.notifications.create("userreplynotification", options);
其结果如下图所示：
4. 此外还可以选择在浏览器选项卡中打开任务列表。可以更清晰查看自己的待做事项。
chrome.tabs.create({url: window.location.href});
至此，基础谷歌插件的spreadjs 应用就介绍到这里啦，快来开发属于自己的插件吧。
免责声明：市场有风险，选择需谨慎！此文仅供参考，不作买卖依据。