提高工作效率的神器：基於前端表格實現Chrome Excel擴展插件
Chrome插件，官方名稱extensions（擴展程序）；為了方便理解，以下都稱為插件。
我們開發的插件需要在瀏覽器裏面運行，打開瀏覽器，通過右上角的三個點（自定義及控制）-更多工具-拓展程序-打開開發者模式。點擊”加載已解壓的拓展程序，選擇項目文件夾，就可將開發中的插件加載進來。
插件是基於Web技術構建的，例如HTML、JavaScript和CSS。它們在單獨的沙盒執行環境中運行並與Chrome瀏覽器進行交互。插件允許我們通過使用API修改瀏覽器行為和訪問Web內容來擴展和增強瀏覽器的功能。
相信使用Chrome(谷歌瀏覽器)的小夥伴們都在用Chrome擴展插件(Chrome Extension)，類似一鍵翻譯、批量下載網頁圖片、OneTab、甚至大名鼎鼎的 」油猴」 等。
但是有時候，我們需要一些Chrome應用市場上沒有的特定功能的插件，例如任務提醒、報表自動生成、與內部數據系統交互的數據分析或上傳下載等。
作為產品論壇技術支持的超級版主，每日需要回復用戶提出的大量問題，往往一個不注意，很容易漏回用戶帖子。這時候有這麼一個瀏覽器插件，隨時提醒你還有多少帖子待回復，是不是很炫酷呢？當你晚上回復完所有論壇帖子，這時候插件徽章上不再有數字，這時候是不是成就感滿滿。
今天我們就帶大家來花30分鐘時間，一起寫一個展示待辦任務的瀏覽器插件。
獲取本文的完整Demo：
//gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjM4NjU0fDgyODE0ZTIyfDE2NjYxODc0ODV8NjI2NzZ8OTk3MTg%3D
接下來就讓我們正式開始項目
- 首先在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示例 ://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html
移動端示例（可掃碼體驗）：//demo.grapecity.com.cn/spreadjs/mobilesample/
