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

廖若飛，廖海

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

0 引言

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

選擇Chrome Extension程序來實現(xiàn)，基于以下四點：①開發(fā)難度小，Chrome Extension程序本身就是基于Chrome瀏覽器，不需要模擬瀏覽器、解析網頁[1]；②開發(fā)流程簡單；③可擴展性強，在WebKit內核的瀏覽器中均可以使用；④用戶使用方便；⑤跨平臺，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元素。關聯(lián)事件的代碼需要在頁面加載完成之后才能執(zhí)行，所以要將它放在$（function（）{}）中。選擇器：“tr:first th:last,tr:first td:last”是一個難點，表示選擇當前table元素中的第一個tr元素中最后一個th或者第一個tr元素中最后一個td。downTable是一個自定義方法，該方法的功能就是實現(xiàn)數(shù)據(jù)的提取和格式化數(shù)據(jù)轉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ù)組的行與列與頁面表格中行與列一一對應。注意數(shù)據(jù)集合變量aoa在后面的代碼中要用到。

上面的代碼使用了ID選擇器,有明顯的缺陷。程序要應用到任意的網頁上，顯然不應該使用ID選擇器、類選擇等進行選擇。如果使用元素選擇器$（"table"）進行選擇，會將頁面上多個的表格的內容全部提取出來。有沒有準確選擇的辦法？解決的辦法是通過事件的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）進行選擇，這樣可以修復上面的缺陷。

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

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

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

1.4 文件下載

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

將上面的代碼放到方法openDownloadDialog里面，可以方便調用。

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

1.5 開發(fā)Chrome Extension程序

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

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

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

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

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

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

屬性"run_at"的值設置為"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權限實現(xiàn)

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

對比方法一，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所示，頁面不會有任何變化。當用戶點擊地址欄右側的按鈕，如圖2所示，頁面上的表格會發(fā)生變化，如圖3所示，表格的第一行最后一個單元格字體變紅。雙擊該單元格之后，彈出確認下載的窗口，如圖4所示。確認之后可以正常下載數(shù)據(jù)。

圖1 普通含表格的頁面

圖2 地址欄右側的按鈕圖

圖3 普通含表格的頁面

圖4 確認下載

3 結語

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