基于 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.

【通聯編輯：謝媛媛】