相信使用Chrome(谷歌瀏覽器)的小伙伴們都在用Chrome擴展插件(Chrome Extension)，類似一鍵翻譯、批量下載網頁圖片、OneTab、甚至大名鼎鼎的“油猴” 等。

 但是有時候，我們需要一些Chrome應用市場上沒有的特定功能的插件，例如任務提醒、報表自動生成、與內部數據系統交互的數據分析或上傳下載等。

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

獲取SpreadJS最新正式版下載

SpreadJS 是純前端的，可以和Chrome擴展插件完美結合，輕松地把Excel的能力集成到Chrome中，實現效果驚人的插件應用。接下來咱們就花30分鐘時間，一起寫一個展示待辦任務的瀏覽器插件（想獲取本文的完整Demo，請咨詢“”獲取）：

首先在package.json文件中引入SpreadJS相關依賴文件。

{

"dependencies": {

"\@grapecity/spread-excelio": "15.2.0",

"\@grapecity/spread-sheets": "15.2.0",

"\@grapecity/spread-sheets-resources-zh": "15.2.0"

}

}

其次創建SpreadJS容器。在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);

}

);

說完SpreadJS的一些功能，下面咱們介紹下Chrom插件吧。

Chrome插件，官方名稱extensions（擴展程序）；為了方便理解，以下都稱為插件。

 我們開發的插件需要在瀏覽器里面運行，打開瀏覽器，通過右上角的三個點（自定義及控制）-更多工具-拓展程序-打開開發者模式。點擊"加載已解壓的拓展程序，選擇項目文件夾，就可將開發中的插件加載進來。

 插件是基于Web技術構建的，例如HTML、JavaScript和CSS。它們在單獨的沙盒執行環境中運行并與Chrome瀏覽器進行交互。插件允許我們通過使用API修改瀏覽器行為和訪問Web內容來擴展和增強瀏覽器的功能。

 首先在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});

至此，基礎谷歌插件的SpreadJS應用就介紹到這里啦，快來開發屬于自己的插件吧。

本文內容源自