基于Chrome Extension的表格導(dǎo)出程序的設(shè)計與開發(fā)

廖若飛，廖海

（1.四川信息職業(yè)技術(shù)學(xué)院軟件學(xué)院，廣元628040；2.四川信息職業(yè)技術(shù)學(xué)院信息中心，廣元628040）

0 引言

Chrome Brower在目前瀏覽器市場占有很高的份額，已經(jīng)成為用戶的主力瀏覽器，成為業(yè)界事實上的標準。在學(xué)習(xí)、生活、工作中，大家經(jīng)常遇到這樣的場景：網(wǎng)頁上有很多表格，表格中有很多數(shù)據(jù)，如何快速且方便地保存下來？一般做法是先在網(wǎng)頁上選中相應(yīng)的內(nèi)容，然后再復(fù)制，接著打開Excel軟件，新建文件，然后粘貼保存。這種做法比較步驟比較多，操作麻煩，有沒有一種簡單的辦法實現(xiàn)一鍵下載？答案是肯定的，通過Chrome Extension程序可以實現(xiàn)。

選擇Chrome Extension程序來實現(xiàn)，基于以下四點：①開發(fā)難度小，Chrome Extension程序本身就是基于Chrome瀏覽器，不需要模擬瀏覽器、解析網(wǎng)頁[1]；②開發(fā)流程簡單；③可擴展性強，在WebKit內(nèi)核的瀏覽器中均可以使用；④用戶使用方便；⑤跨平臺，Win?dows、MacOS、Linux桌面環(huán)境都可以使用。

1 程序分析與實現(xiàn)

程序的觸發(fā)可以這樣實現(xiàn)：將表格的第一行最后一列單元格字體變紅，用以標識該表格可以下載；給該單元格增加雙擊事件，雙擊觸發(fā)數(shù)據(jù)下載。通過以上分析可以看出，程序開發(fā)中的步驟和難點，下文逐一展開討論。

1.1 觸發(fā)事件

為方便開發(fā)，程序中可引入jQuery類庫。頁面上可能會有多個table元素，可以遍歷所有table元素，然后找第一列的最后一個單元格，注意該單元格可能是th元素也可能是td元素。關(guān)聯(lián)事件的代碼需要在頁面加載完成之后才能執(zhí)行，所以要將它放在$（function（）{}）中。選擇器：“tr:first th:last,tr:first td:last”是一個難點，表示選擇當前table元素中的第一個tr元素中最后一個th或者第一個tr元素中最后一個td。downTable是一個自定義方法，該方法的功能就是實現(xiàn)數(shù)據(jù)的提取和格式化數(shù)據(jù)轉(zhuǎn)Excel文件及下載，在后面的章節(jié)中實現(xiàn)它。

1.2 表格數(shù)據(jù)的提取

如果明確知道某個table的ID,可以使用jQuery的ID選擇器選擇該table，然后通過循環(huán)來遍歷表格中的tr元素和th/td元素，從而實現(xiàn)table數(shù)據(jù)的提取。代碼如下：

代碼中定義了提取的數(shù)據(jù)集合變量aoa，它的數(shù)據(jù)類型是數(shù)組的數(shù)組。二維數(shù)組的行與列與頁面表格中行與列一一對應(yīng)。注意數(shù)據(jù)集合變量aoa在后面的代碼中要用到。

上面的代碼使用了ID選擇器,有明顯的缺陷。程序要應(yīng)用到任意的網(wǎng)頁上，顯然不應(yīng)該使用ID選擇器、類選擇等進行選擇。如果使用元素選擇器$（"table"）進行選擇，會將頁面上多個的表格的內(nèi)容全部提取出來。有沒有準確選擇的辦法？解決的辦法是通過事件的target屬性來定位td或者th，然后向上查找父節(jié)點定位到table。核心代碼如下：

根據(jù)HTML/HTML5的規(guī)范，td/th標簽一般嵌套在tr中，tr標簽可以直接放在table中，也可以放在thead中，也就是說從td/th標簽向上查找父節(jié)點找到table標簽需要2次或者3次，這也是上面的代碼需要循環(huán)2-3次的原因。

定位到觸發(fā)雙擊事件的table元素，將它保存在ta?ble變量中，使用$（table）進行選擇，這樣可以修復(fù)上面的缺陷。

由于條件的限制，本次研究分3個部分2個板塊來實施。3個部分是指分別針對視覺障礙、聽覺障礙和老年人設(shè)計的課程，2個板塊是指在同樣的條件下實驗組運用設(shè)計好的無障礙模式進行學(xué)習(xí)，對照組則是用普通模式進行學(xué)習(xí)。

1.3 格式化數(shù)據(jù)轉(zhuǎn)Excel文件

近幾年前端技術(shù)飛速發(fā)展，涌現(xiàn)出很多優(yōu)秀的前端類庫。格式化數(shù)據(jù)轉(zhuǎn)Excel文件可以使用第三類庫Js-xlsx來實現(xiàn)。Js-xlsx是一款由SheetJS公司開發(fā)的開源產(chǎn)品，它可以實現(xiàn)各種電子表格格式的解析和編寫，兼容IE6以及ES3/ES5標準。使用方法也非常簡單，先將數(shù)據(jù)轉(zhuǎn)換為sheet對象。核心代碼如下：

1.4 文件下載

有了文件的Blob對象，可以通過URL.createObjec?tURL（）方法獲取Blob對象的URL，將URL設(shè)置到鏈接元素的href屬性上，點擊之后就可以下載文件了。如果要實現(xiàn)自動化操作，鏈接元素甚至不用放到頁面上，可以是動態(tài)創(chuàng)建出來的，創(chuàng)建點擊事件的event對象，由代碼觸發(fā)該事件，核心代碼如下。

將上面的代碼放到方法openDownloadDialog里面，可以方便調(diào)用。

可以將上面1.1到1.4小節(jié)的所有代碼存放到一個js文件exportExcel/main.js中，然后創(chuàng)建含多個表格的靜態(tài)網(wǎng)頁文件，引入JQuery和Js-xlsx的類庫文件，進行調(diào)試和測試。正常情況下table的第一行最后一個的單元格會變成紅色，雙擊該單元格可以下載導(dǎo)出的Excel文件。以上所有代碼只需要用到前端開發(fā)技術(shù)，與Chrome Extension開發(fā)技術(shù)并無關(guān)聯(lián)。

1.5 開發(fā)Chrome Extension程序

完成上面1.1到1.4小節(jié)代碼的編寫和調(diào)試后，可以進行Chrome Extension程序的開發(fā)。Chrome Exten?sion程序的結(jié)構(gòu)、開發(fā)方法等本文不做介紹。Chrome Extension提供了豐富的API,可以將自定義腳本，樣式表注入到頁面中。前面的腳本已經(jīng)實現(xiàn)了表格數(shù)據(jù)的提取、格式化數(shù)據(jù)轉(zhuǎn)Excel文件和文件下載的功能，接下來可以將上述功能整合到擴展程序中。

Chrome Extension程序的運行實質(zhì)是將自定義的腳本注入到特定的網(wǎng)頁中，以實現(xiàn)特定的功能。谷歌采用最小特權(quán)、特權(quán)分離、強制隔離的擴展安全架構(gòu)保障用戶安全[2]。腳本注入的方式受擴展程序申請的權(quán)限不同，又有所差異。至少有兩種方法實現(xiàn)：一是申請匹配所有地址的權(quán)限實現(xiàn)。二是利用activeTab權(quán)限實現(xiàn)。下文詳細介紹兩種不同方法的實現(xiàn)原理及步驟。

方法一：申請匹配所有地址的權(quán)限實現(xiàn)

manifest.json文件是Chrome Extension程序的核心，用于設(shè)置擴展程序的資源、申請權(quán)限等。其中content_scripts屬性用于設(shè)置需要直接注入頁面的Java Script和CSS文件。Matches屬性指定擴展程序可以匹配到的地址，申請匹配所有地址的權(quán)限，因此值為：“”,表示瀏覽器訪問任意地址時，擴展程序都能匹配到，才能加載并且運行。

本項目依賴jQuery和Js-xlsx兩個第三方類庫，可以先將它們下載到本地，直接引用本地資源。如果引用外部資源，會有兩方面的負面影響。一是外部資源加載受網(wǎng)絡(luò)環(huán)境的限制，影響頁面加載速度。二是如果要將軟件發(fā)布到Google Web Store，Google會嚴格審核引入的外部資源，增加審核的時間。三是引入外部資源使擴展程序本身容易受到攻擊。

為保持擴展程序目錄的整潔，可以在擴展程序根目錄下創(chuàng)建jsLib目錄，然后在其中創(chuàng)建各第三方類庫的子目錄如：jquery,xlsx，以及自定義的exportExcel類庫。main.js中包含了1.1到1.4小節(jié)的所有代碼。

屬性"run_at"的值設(shè)置為"document_start",表示代碼注入的時間為頁面加載的時候。核心代碼如下：

在該方法中，用戶頁面加載的同時，會自動加載content_scripts屬性中配置的三個腳本文件：jquery-3.4.1.min.js、xlsx.full.min.js、main.js。其中main.js依賴前兩個文件，因此main.js放在最后。main.js中實現(xiàn)所有功能，因此擴展程序能正常工作。在這種方式下，用戶頁面的表格在頁面加載完成之后，所有表格的第一行最后一個單元格字體變紅，無須額外操作，雙擊就可以下載。

方法二：利用activeTab權(quán)限實現(xiàn)

匹配所有地址的權(quán)限非常高，擴展程序提交到Google Web Store不一定能通過審核。放棄匹配所有地址的權(quán)限后，content_scripts中配置的腳本文件不會加載。Google推薦的方式是使用activeTab權(quán)限，申請到activeTab權(quán)限后，可以利用chrome.browserAction.on?Clicked事件動態(tài)加載腳本。也就是說，頁面打開之后，用戶需要點擊地址欄右側(cè)的browser_action，觸發(fā)click事件，然后程序動態(tài)加載腳本，實現(xiàn)功能。mani?fest.json文件核心內(nèi)容如下：

對比方法一，background字段增加了腳本back?ground.js；permissions字 段 增 加 了activeTab；con?tent_scripts字段里去掉了JS的配置，增加了CSS的配置，JS與CSS兩者之間必須配一個，這里可配一個空文件custom.css；matches里配制的域名無實際意義，僅為滿足manifest.json文件的語法要求。

新增的background.js文件代碼如下：

2 程序運行界面效果

采用1.5小節(jié)方法二開發(fā)的擴展程序運行之后，打開任意普通含表格的頁面，如圖1所示，頁面不會有任何變化。當用戶點擊地址欄右側(cè)的按鈕，如圖2所示，頁面上的表格會發(fā)生變化，如圖3所示，表格的第一行最后一個單元格字體變紅。雙擊該單元格之后，彈出確認下載的窗口，如圖4所示。確認之后可以正常下載數(shù)據(jù)。

圖1 普通含表格的頁面

圖2 地址欄右側(cè)的按鈕圖

圖3 普通含表格的頁面

圖4 確認下載

3 結(jié)語

本文介紹了開發(fā)基于Chrome Extension的表格導(dǎo)出軟件的設(shè)計和開發(fā)的思路和方法，提出了先在靜態(tài)頁面中開發(fā)和驗證核心功能，然后再打包到擴展程序中的開發(fā)思路，有一定的創(chuàng)新性，可以大幅降低開發(fā)難度，提高開發(fā)效率。并且該擴展程序有一定的應(yīng)用價值，也可以作為教學(xué)案例應(yīng)用于軟件技術(shù)專業(yè)Web前端開發(fā)方向的教學(xué)中。在擴展程序注入腳本的過程中，提供了兩種完全不同的解決辦法，闡明了兩種不同的設(shè)計理念和各自的利弊。在本文發(fā)表前，本軟件已發(fā)布到Google Web Store中，可以用關(guān)鍵字“表格導(dǎo)出助手”搜索到。