基于Chrome Extension的表格导出程序的设计与开发

廖若飞，廖海

（1.四川信息职业技术学院软件学院，广元628040；2.四川信息职业技术学院信息中心，广元628040）

0 引言

Chrome Brower在目前浏览器市场占有很高的份额，已经成为用户的主力浏览器，成为业界事实上的标准。在学习、生活、工作中，大家经常遇到这样的场景：网页上有很多表格，表格中有很多数据，如何快速且方便地保存下来？一般做法是先在网页上选中相应的内容，然后再复制，接着打开Excel软件，新建文件，然后粘贴保存。这种做法比较步骤比较多，操作麻烦，有没有一种简单的办法实现一键下载？答案是肯定的，通过Chrome Extension程序可以实现。

选择Chrome Extension程序来实现，基于以下四点：①开发难度小，Chrome Extension程序本身就是基于Chrome浏览器，不需要模拟浏览器、解析网页[1]；②开发流程简单；③可扩展性强，在WebKit内核的浏览器中均可以使用；④用户使用方便；⑤跨平台，Win⁃dows、MacOS、Linux桌面环境都可以使用。

1 程序分析与实现

程序的触发可以这样实现：将表格的第一行最后一列单元格字体变红，用以标识该表格可以下载；给该单元格增加双击事件，双击触发数据下载。通过以上分析可以看出，程序开发中的步骤和难点，下文逐一展开讨论。

1.1 触发事件

为方便开发，程序中可引入jQuery类库。页面上可能会有多个table元素，可以遍历所有table元素，然后找第一列的最后一个单元格，注意该单元格可能是th元素也可能是td元素。关联事件的代码需要在页面加载完成之后才能执行，所以要将它放在$（function（）{}）中。选择器：“tr:first th:last,tr:first td:last”是一个难点，表示选择当前table元素中的第一个tr元素中最后一个th或者第一个tr元素中最后一个td。downTable是一个自定义方法，该方法的功能就是实现数据的提取和格式化数据转Excel文件及下载，在后面的章节中实现它。

1.2 表格数据的提取

如果明确知道某个table的ID,可以使用jQuery的ID选择器选择该table，然后通过循环来遍历表格中的tr元素和th/td元素，从而实现table数据的提取。代码如下：

代码中定义了提取的数据集合变量aoa，它的数据类型是数组的数组。二维数组的行与列与页面表格中行与列一一对应。注意数据集合变量aoa在后面的代码中要用到。

上面的代码使用了ID选择器,有明显的缺陷。程序要应用到任意的网页上，显然不应该使用ID选择器、类选择等进行选择。如果使用元素选择器$（"table"）进行选择，会将页面上多个的表格的内容全部提取出来。有没有准确选择的办法？解决的办法是通过事件的target属性来定位td或者th，然后向上查找父节点定位到table。核心代码如下：

根据HTML/HTML5的规范，td/th标签一般嵌套在tr中，tr标签可以直接放在table中，也可以放在thead中，也就是说从td/th标签向上查找父节点找到table标签需要2次或者3次，这也是上面的代码需要循环2-3次的原因。

定位到触发双击事件的table元素，将它保存在ta⁃ble变量中，使用$（table）进行选择，这样可以修复上面的缺陷。

由于条件的限制，本次研究分3个部分2个板块来实施。3个部分是指分别针对视觉障碍、听觉障碍和老年人设计的课程，2个板块是指在同样的条件下实验组运用设计好的无障碍模式进行学习，对照组则是用普通模式进行学习。

1.3 格式化数据转Excel文件

近几年前端技术飞速发展，涌现出很多优秀的前端类库。格式化数据转Excel文件可以使用第三类库Js-xlsx来实现。Js-xlsx是一款由SheetJS公司开发的开源产品，它可以实现各种电子表格格式的解析和编写，兼容IE6以及ES3/ES5标准。使用方法也非常简单，先将数据转换为sheet对象。核心代码如下：

1.4 文件下载

有了文件的Blob对象，可以通过URL.createObjec⁃tURL（）方法获取Blob对象的URL，将URL设置到链接元素的href属性上，点击之后就可以下载文件了。如果要实现自动化操作，链接元素甚至不用放到页面上，可以是动态创建出来的，创建点击事件的event对象，由代码触发该事件，核心代码如下。

将上面的代码放到方法openDownloadDialog里面，可以方便调用。

可以将上面1.1到1.4小节的所有代码存放到一个js文件exportExcel/main.js中，然后创建含多个表格的静态网页文件，引入JQuery和Js-xlsx的类库文件，进行调试和测试。正常情况下table的第一行最后一个的单元格会变成红色，双击该单元格可以下载导出的Excel文件。以上所有代码只需要用到前端开发技术，与Chrome Extension开发技术并无关联。

1.5 开发Chrome Extension程序

完成上面1.1到1.4小节代码的编写和调试后，可以进行Chrome Extension程序的开发。Chrome Exten⁃sion程序的结构、开发方法等本文不做介绍。Chrome Extension提供了丰富的API,可以将自定义脚本，样式表注入到页面中。前面的脚本已经实现了表格数据的提取、格式化数据转Excel文件和文件下载的功能，接下来可以将上述功能整合到扩展程序中。

Chrome Extension程序的运行实质是将自定义的脚本注入到特定的网页中，以实现特定的功能。谷歌采用最小特权、特权分离、强制隔离的扩展安全架构保障用户安全[2]。脚本注入的方式受扩展程序申请的权限不同，又有所差异。至少有两种方法实现：一是申请匹配所有地址的权限实现。二是利用activeTab权限实现。下文详细介绍两种不同方法的实现原理及步骤。

方法一：申请匹配所有地址的权限实现

manifest.json文件是Chrome Extension程序的核心，用于设置扩展程序的资源、申请权限等。其中content_scripts属性用于设置需要直接注入页面的Java Script和CSS文件。Matches属性指定扩展程序可以匹配到的地址，申请匹配所有地址的权限，因此值为：“”,表示浏览器访问任意地址时，扩展程序都能匹配到，才能加载并且运行。

本项目依赖jQuery和Js-xlsx两个第三方类库，可以先将它们下载到本地，直接引用本地资源。如果引用外部资源，会有两方面的负面影响。一是外部资源加载受网络环境的限制，影响页面加载速度。二是如果要将软件发布到Google Web Store，Google会严格审核引入的外部资源，增加审核的时间。三是引入外部资源使扩展程序本身容易受到攻击。

为保持扩展程序目录的整洁，可以在扩展程序根目录下创建jsLib目录，然后在其中创建各第三方类库的子目录如：jquery,xlsx，以及自定义的exportExcel类库。main.js中包含了1.1到1.4小节的所有代码。

属性"run_at"的值设置为"document_start",表示代码注入的时间为页面加载的时候。核心代码如下：

在该方法中，用户页面加载的同时，会自动加载content_scripts属性中配置的三个脚本文件：jquery-3.4.1.min.js、xlsx.full.min.js、main.js。其中main.js依赖前两个文件，因此main.js放在最后。main.js中实现所有功能，因此扩展程序能正常工作。在这种方式下，用户页面的表格在页面加载完成之后，所有表格的第一行最后一个单元格字体变红，无须额外操作，双击就可以下载。

方法二：利用activeTab权限实现

匹配所有地址的权限非常高，扩展程序提交到Google Web Store不一定能通过审核。放弃匹配所有地址的权限后，content_scripts中配置的脚本文件不会加载。Google推荐的方式是使用activeTab权限，申请到activeTab权限后，可以利用chrome.browserAction.on⁃Clicked事件动态加载脚本。也就是说，页面打开之后，用户需要点击地址栏右侧的browser_action，触发click事件，然后程序动态加载脚本，实现功能。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小节方法二开发的扩展程序运行之后，打开任意普通含表格的页面，如图1所示，页面不会有任何变化。当用户点击地址栏右侧的按钮，如图2所示，页面上的表格会发生变化，如图3所示，表格的第一行最后一个单元格字体变红。双击该单元格之后，弹出确认下载的窗口，如图4所示。确认之后可以正常下载数据。

图1 普通含表格的页面

图2 地址栏右侧的按钮图

图3 普通含表格的页面

图4 确认下载

3 结语

本文介绍了开发基于Chrome Extension的表格导出软件的设计和开发的思路和方法，提出了先在静态页面中开发和验证核心功能，然后再打包到扩展程序中的开发思路，有一定的创新性，可以大幅降低开发难度，提高开发效率。并且该扩展程序有一定的应用价值，也可以作为教学案例应用于软件技术专业Web前端开发方向的教学中。在扩展程序注入脚本的过程中，提供了两种完全不同的解决办法，阐明了两种不同的设计理念和各自的利弊。在本文发表前，本软件已发布到Google Web Store中，可以用关键字“表格导出助手”搜索到。