关于葡萄城开发技术:提高工作效率的神器基于前端表格实现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/…

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

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）