关于葡萄城开发技术:提高工作效率的神器基于前端表格实现Chrome-Excel扩展插件

Chrome插件，官网名称extensions（扩大程序）；为了不便了解，以下都称为插件。
咱们开发的插件须要在浏览器外面运行，关上浏览器，通过右上角的三个点（自定义及管制）-更多工具-拓展程序-关上开发者模式。点击"加载已解压的拓展程序，抉择我的项目文件夹，就可将开发中的插件加载进来。
插件是基于Web技术构建的，例如HTML、JavaScript和CSS。它们在独自的沙盒执行环境中运行并与Chrome浏览器进行交互。插件容许咱们通过应用API批改浏览器行为和拜访Web内容来扩大和加强浏览器的性能。
置信应用Chrome(谷歌浏览器)的小伙伴们都在用Chrome扩大插件(Chrome Extension)，相似一键翻译、批量下载网页图片、OneTab、甚至赫赫有名的 ”油猴” 等。

然而有时候，咱们须要一些Chrome利用市场上没有的特定性能的插件，例如工作揭示、报表主动生成、与外部数据系统交互的数据分析或上传下载等。
作为产品论坛技术支持的超级版主，每日须要回复用户提出的大量问题，往往一个不留神，很容易漏回用户帖子。这时候有这么一个浏览器插件，随时揭示你还有多少帖子待回复，是不是很炫酷呢？当你早晨回复完所有论坛帖子，这时候插件徽章上不再有数字，这时候是不是成就感满满。

明天咱们就带大家来花30分钟工夫，一起写一个展现待办工作的浏览器插件。

获取本文的残缺Demo：
https://gcdn.grapecity.com.cn...

接下来就让咱们正式开始我的项目

首先在package.json文件中引入相干依赖文件

{  "dependencies": {    "@grapecity/spread-excelio": "15.2.0",    "@grapecity/spread-sheets": "15.2.0",    "@grapecity/spread-sheets-resources-zh": "15.2.0"  }}

其次创立容器。在manifest.json文件中，能够配置点击插件图标时弹出的小窗口的页面。这里配置了index.html页面。

接着咱们在index.html中创立SpreadJS的指标DOM元素：

<div id="ss" style="width: 99%; height: 430px;"></div>

创立容器之后，就能够初始化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 });};
```

获取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);

其次通过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();

绑定数据后还能够为其增加筛选、排序等性能。如为其筛选区域。如想查看南方区所有的论坛帖子，就能够在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);

其后果如下图所示：

依据条件规定设置款式

sheet.conditionalFormats.addSpecificTextRule(  GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,  "未解决",style1,ranges);sheet.conditionalFormats.addSpecificTextRule(  GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,  "解决中", style2,ranges);

以上代码别离为"未解决"与"解决中"赋值不同款式。这样子能够很醒目看到论坛帖子解决状态。其后果如下所示：

利用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能够配置权限。

根底配置之后，就能够在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.notificationsAPI 应用模板创立丰盛的告诉，并将这些告诉显示给系统托盘中的用户。当你的桌面不再停留在浏览器，或者你在解决邮件，或者你在编辑Excel。这时候零碎收回的告诉，会大大提高你的工作效率。

var options = {      type: "basic",      iconUrl: "img/icon.png",      title: "GCDN揭示",      message: "你关注的板块有" + unreadTopicCount + "个帖子须要解决",    };chrome.notifications.clear("UserReplyNotification");chrome.notifications.create("UserReplyNotification", options);

其后果如下图所示：

此外还能够抉择在浏览器选项卡中关上工作列表。能够更清晰查看本人的待做事项。

chrome.tabs.create({url: window.location.href});

至此，根底谷歌插件的纯前端表格控件利用就介绍到这里啦，快来开发属于本人的插件吧。

更多纯前端表格在线demo示例 :https://demo.grapecity.com.cn...
挪动端示例（可扫码体验）：http://demo.grapecity.com.cn/...