基于 Chrome 浏览器扩展的图书采访插件开发

田思 杨雁

摘要：随着社会的进步，高校为培养高素质人才，对图书馆在馆藏建设及学科服务等方面的要求越来越高。而目前图书采访中存在依赖书商以及混杂低价值书等问题，如何利用网络资源更广范围，针对性更强地选书并且便捷地形成书单显得很有必要。通过Chrome浏览器图书采访插件从各大网上书店、出版社等获取书目数据，高效自动化地信息抽取，可以以最便捷的方式组织成与馆藏数据对接的采访订单。实际运行表明，该插件使用效果良好，适合广大图书馆图书采访人员使用。

关键词：图书采访；Chrome浏览器；插件

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2019）05-0093-03

图书采访工作是图书馆文献资源建设的基础性工作。由于书价上涨、经费短缺、文献载体多样化、馆藏结构的改变、图书市场多元化发展等原因，图书馆图书采访工作面临着新的挑战。为保证馆藏结构的合理，各图书馆都在探索适合自己的采访模式，以适应当代图书馆的发展。随着计算机技术和网络技术的应用，在网络环境下，图书馆采用何种有效的图书采访模式来满足读者需求，是图书馆文献采访人员值得探讨的问题，能否从海量信息中选取出有用、实用、新颖的知识信息，对图书馆未来生存与发展有重要影响。

Chrome是一个跨平台的浏览器，用户数据庞大，根据StatCounter 公布的2018年6月全球浏览器市场份额数据，Chrome 以66.87% 的市场占有率毫无疑问地稳居第一。而且在国内360浏览器，Sogou浏览器等众多浏览器都是基于Chrome的内核进行开发的，原则上讲只要是Chrome扩展都能在这些浏览器上使用。这也大大地提高开发Chrome扩展的可用性。本文将重点从利用Chrome扩展的方式来实现图书的采访工作，提升图书采购的效率。

1 Chrome 浏览器扩展

Chrome扩展是用于扩充Chrome浏览器功能的程序，主要用于对浏览器功能的增强，它更强调与浏览器相结合。通过扩展可以对用户当前浏览的页面进行操作，实际上就是对用户当前浏览页面的DOM进行操作，当用户访问这些页面后，相应脚本即可自动运行，从而实现对页面DOM进行任意增、删、改等复杂操作。而它的界面则使用HTML和CSS进行描述，这样的好处是可以用很短的时间构建出赏心悦目的UI。同时由于编写扩展的语言JavaScript是一门解释语言，无需对其配置编译器，调试代码时只要刷新一下浏览器就可以看到修改后的结果，这使得开发周期大大缩短。

2 基于Chrome采购插件的实现

2.1 扩展基本文件结构

一个Chrome扩展是由HTML、CSS、JavaScript、图片等文件压缩而成。每个扩展由下列文件组成：

1）一个manifest文件（主文件.json格式，必备）

2）至少一个HTML文件（主题可以没有HTML文件）

3）JavaScript文件 （可选，非必须）

4）任何其他需要的文件（比如图片，CSS文件等）

根据实现需要，本项目研究扩展具体的文档结构如图1所示：

css目录存放css文件，用于控制设置页面，注入内容的界面样式；images目录存放扩展用到的所有图片文件，包括扩展按钮图标等；js目录存放扩展用到的所有js文件，包括有背景页、设置页、注入内容页、通用类等；Book_pop.html是Browser action的弹出页面，用于展示后端链接入口和扩展的设置入口；Options.html是扩展设置页面，用于设置后端处理的URL地址；Mainfest.json是图书采购扩展的主文件，也是Chrome扩展唯一要求必须存在的文件，文件的内容是以JSON格式存储，用来描述扩展的扩展名字、版本、调用文件、可用域等内容。文件源代码如下：

{

"manifest_version"： 2，

"name"： "图书采购之星"，

"version"： "1.0.0"，

"description"： "该插件能够实现对当当，京东，豆瓣，亚马逊等图书类网站的图书信息的直接数据采集，并能够与汇文系统实现采集数据的对接，生成采购订单。"，

"permissions"： [ "http：//*/*"，"https：//*/*"]，

"web_accessible_resources"： ["images/add_cart1.png"，"images/add_cart2.png"， "images/recom.png"， "js/jquery.min.js"，"js/book_action.js"]，

"browser_action"： {"default_icon"： "images/book-48.png"，"default_title"： "圖书采购之星"， "default_popup"： "book_pop.html" }，

"background"： {

"scripts"： ["js/jquery.min.js"，"js/book_background.js"]，

"persistent"： true

}，

"options_page"： "options.html"，

"icons"： {"48"： "images/book-48.png"，"128"： "images/book-128.png"

}，

"content_scripts"： [

{

"matches"： ["http：//*/*"，"https：//*/*"]，

"css"： ["css/icon.css"，"css/content.css"]，

"js"： ["js/jquery.min.js"，"js/book_action.js"，"js/book_contentscript.js"]

}

]

}

以上文件name定义了扩展的名称，version定义了扩展的版本，description定义了扩展的描述，icons定义了扩展相关图标文件的位置，web_accessible_resources定义了扩展在注入的目标页面上所需使用的资源的路径（相对于扩展的安装根目录），permissions属性定义了需要跨域的权限。browser_action指定扩展的图标放在Chrome的工具栏中，browser_action中的default_icon属性定义了相应图标文件的位置，default_title定义了当用户鼠标悬停于扩展图标上所显示的文字，default_popup則定义了当用户单击扩展图标时所显示页面的文件位置。content_scripts指定脚本注入域及注入页面用到的css和js文件，由于拥有图书信息的网站很多，划词采购在所有页面都需要用到，随着各网站对信息安全的重视，https的站点也越来越多，并将会成功未来的主流，因此本扩展选用匹配所有http/https站点，当用户访问这些页面后，相应的采购注入脚本即可自动运行，从而对页面DOM进行操作，并提取图书信息。

2.2 扩展核心功能开发

项目确定了以当当网、京东、豆瓣、亚马逊、微博读书等主流综合性图书网站及图灵社区、Chin-pub等专业技术类图书网站为对象进行研究，通过Chrome扩展精确实现对网页内题名、ISBN、价格、图片等重要图书信息的抽取；并且通过正则表达式获取所有含13位ISBN号网页的图书信息抽取；实现所有网站划词选定图书题名的图书信息抽取。这些核心功能是通过content_scripts（内容脚本）来实现的，content_scripts在Chrome扩展编写中扮演着非常重要的角色，其内容就是JavaScript代码，虽然其物理位置是在扩展目录中，但其内容代码是根据匹配规则被注入到对应的访问网页中。在扩展的开发中，笔者将注入的类型分为以下几种：

2.2.1 所有网站中宽度和高度都大于90像素的图片

上述网站绝大部分图书的封面图片的宽度和高度都会大于90像素，对于这一通用特征可以大大地提高注入代码的可用性。具体的实现上是，在网页加载完成后，通过jQuery（"img"）来获取所有的图片，然后再对图片的宽度和高度做相应的判断，如果符合要求，则为该图片添加一个鼠标经过事件，也就是当鼠标放在图片上时会弹出一个“采购”的按钮，点击“采购”按钮后将图片的链接发送给后端程序进行处理，提取相应的图书信息数据，具体效果如图2所示。其关键代码如下：

//给图片加上采购按钮

jQuery（"img"）.each（function（） {

if （this.offsetWidth > 90 && this.offsetHeight > 90） {

jQuery（this）.mouseover（function（） {

thisDom = jQuery（this）.parents（'a'）.attr（'href'）；

.......

showFloatBtn（this， "#mySideBarFloatBtn"）；

}）；

jQuery（this）.mouseout（function（） {

hideFloatBtn（"#mySideBarFloatBtn"）；

}）；

}

}）；

//处理采购点击事件

jQuery（"#mySideBarFloatBtn"）.click（function（） {

... ...

var item=thisDom；

jQuery.ajax（{

type： "get"，

url： localStorage.SysRoot + "getvalue.php？act=list&t=tips&url=" + item + "&f=" + from，

dataType： "text"，

success： function（data） {

//处理成功后的操作

2.2.2 网站的列表页

当当网、京东、豆瓣、亚马逊、微博读书、图灵社区、Chin-pub等网站的图书列表页，通过正则匹配的方式将“加入采购”“继续采购”两个按钮放置在不影响网站正常使用，而且又能使采访人员能够便利的进行图书的采购操作，“断续采购”按钮用于对已有馆藏数据的再次采购操作，通过“继续采购”采购的数据在后端数据库里将进行标识，以便与其他查重后数据进行区分。

2.2.3 划词获取图书信息

该功能主要是方便采购人员在浏览非图书类网站时，如在看新闻、微信、微博等有关于图书的推荐内容时，能够通过划词选中书名的方式获取到图书作者、ISBN、内容简介、价格、馆藏信息等内容，并且可以通过“加入采购”，“继续采购”两个按钮直接将图书加入后台的采购数据库中，可以极大地减少采购人员查找和组织生成采购信息的时间和精力。如图4所示，在浏览新闻时看到《人民的名义》一书，采访人员可以通过划词的方式获取到该书的详细情况及馆藏和借阅信息，可以通过采购按钮进行数据的采集。

2.3 采购数据的汇总与处理

该功能主要实现对采购中间库数据的统一展示，实现数据的排序展示、查重状态的筛选，导出到EXCEL表，数据的删除以及对采购数量的确认。主要是在采购数据导入到汇文系统之后让采购人员能够有一个整体的控制，可以对误操作数据进行删除，可以自定义采购数量，可以导出采购清单发送给书商，可以再次进行整体数量的查重等。具体实现效果如图5所示，实现功能的关键代码如下：

... ...

$Books=$Book->field（'id，title ，is_force，isbn_repeat，title_repeat，export_time，title_booklist，f_title，is_export，url， isbn ，img ，price，cat_num'）->where（$where）->order（$order）->select（）；

foreach（$Books as $key=>$val）{

$Books[$key]['flag']=repeat_flag（$val['isbn']，$val['title']）；

$Books[$key]['order_num']=cal_num（$val['cat_num']，$val['price']）；

if（$val['f_title']）{

$Books[$key]['f_title']=$val['f_title']；

}else{

$Books[$key]['f_title']=trim（$val['title']）；

}

}

3 結论与意义

通过对基于Chrome扩展采访插件的开发，证明了该项目的可行性和可用性。该扩展的开发可以大大的节省采访人员获取图书信息的时间，能够提供更多样化的信息供采访人员进行采购的决策。该扩展的应用大大地方便了对小说类、心理学类等热门、畅销图书采购，通过访问网站上用户的评论信息、购买数量、排行榜等信息，可以减少这些类型图书采购时的盲目性，保障该类图书的及时到馆，提供给读者借阅，提高图书的借阅率。该扩展在对于多卷书、专题图书数据的获取拥有较强的优势，采访人员可以很方便地完成这些图书的补全采购，具有一定的推广性。

参考文献：

[1] StatCounter：2018年6月Chrome浏览器市场份额高达66.87%[EB/OL].（2018-07-03）. http：//www.199it.com/archives/745092.html.

[2] 360安全浏览器应用开放平台[EB/OL].（2016-04-06）.http：//open.se.360.cn/open/extension_dev/overview.html.

[3] 刘桂杰.网络平台构建合理图书采购渠道[J].辽宁广播电视大学学报，2009（1）：111-112.

[4] 魏少鹏，夏小玲. 基于Chrome扩展的爬虫系统设计与实现[J].软件导刊，2016，15（3）：76-80.

[5] 沈洪洲.一种基于Chrome扩展程序的网络数据采集方法[J].计算机应用与软件，2016，33（7）： 10-13，55.

[6] 黎邦群.OPAC划词翻译功能的设计与实现[J].现代图书情报技术，2011（11）：92-96.

[7] 乔子健，陈德健，孙艳春.一种面向Chrome浏览器的课堂云笔记插件[J].计算机科学，2015，42（12）：46-48，52.

【通联编辑：谢媛媛】