1. 程式人生 > >釋出一個開源專案 — Autohome增強外掛 for chrome

釋出一個開源專案 — Autohome增強外掛 for chrome

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

               

汽車之家的網站沒有一個收藏功能, 感覺有些不可理解, 前段時間正好學了javascript, 興趣正濃, 於是摸索著怎麼弄chrome外掛, 為汽車之家寫了個chrome的增強外掛, 並且開源很久了, 一直沒有在部落格上提到, 今天在這裡把相關的資訊也貼一遍吧.

簡介

目前僅有Chrome版本.
目前僅有的功能是實現autohome對車系的收藏. 但是伺服器方面已經實現了對收藏的通用實現, 並且客戶端的程式碼已經開源.
歡迎大家新增更多的新功能, 比如對具體車型, 新聞, 文章等的收藏.
專案地址: https://github.com/jtianling/autohome-boost

客戶端程式碼說明

主要通過chrome外掛的content_scripts功能實現功能新增.
用了web_accessible_resources功能載入了series_fav_clicked.js檔案, 主要是方便直接在網站的環境中新增程式碼, 省的一堆轉義. 假如不嫌累的話, 直接在series_fav.js的addTheFavFeature函式中也可以完成所有功能.
程式碼本身比較簡單, 需要說明的不多, 主要的功能都是使用JSONP實現在autohome的環境中運行了我伺服器上的指令碼而已.

服務端介面說明

增加車系收藏

http://42.121.57.45:10001/add_fav
引數: type(收藏的型別), name(使用者名稱), code(收藏編號) 以及任意想儲存的屬性. 比如在series的收藏中, 我添加了三個屬性: desc(描述), price(價格), url(網址)
返回結果: 無

刪除車系收藏

http://42.121.57.45:10001/del_fav
引數: type(收藏的型別), name(使用者名稱), code(收藏編號)
返回結果: 無

查詢車系收藏情況

http://42.121.57.45:10001/is_fav
引數: type(收藏的型別), name(使用者名稱), code(收藏編號)
返回結果: Json物件, 唯一的屬性為bool型別的result, true表示已收藏, false表示還未收藏.

獲取所有我的收藏

http://42.121.57.45:10001/get_favs
引數: type(收藏的型別), name(使用者名稱)
返回結果: Json型別, 為add_fav時新增的所有屬性的陣列, 典型的形式如下:

json
[{"name":"九天雁翎","type":"series","code":"364","desc":"長安福特-福克斯",
"price":"9.98~16.99萬","url":"http://www.autohome.com.cn/364/"},
{"name":"九天雁翎","type":"series","code":"577","desc":"長安福特-蒙迪歐-致勝",
"price":"16.98~25.68萬","url":"http://www.autohome.com.cn/577/"},
{"name":"九天雁翎","type":"series","code":"2863","desc":"長安福特-翼虎",
"price":"19.38~27.58萬","url":"http://www.autohome.com.cn/2863/"}]

目前的type型別是series(車系).
推薦將來的收藏型別為 spec(具體車型), new(新聞), article(文章), advice(導購)等, 以參考autohome本身網站連結的英文為最佳選擇.
服務端新增新的型別不需要進行任何修改. 想要增加新的收藏型別的童鞋請按需隨意新增^^
對看到ip地址不爽的童鞋表示抱歉, 因為這是阿里雲的伺服器, 而我沒有備案, 所以雖然有域名, 但是沒辦法繫結.
更為詭異的是, 從國外訪問阿里雲的這個伺服器也會出問題(所以在國外就沒法使用這個外掛), 天知道這是為什麼.

問題

編寫Chrome Extension本身並不複雜, 主要就是理解manifes.json, 但是我一直有些很煩人的問題沒有解決.
在Google Chrome Extensions中的javascript執行環境分為Extension本身和網頁兩種. 一種主要用來呼叫Google開放的Extension API, 一種主要用來操作DOM. 但是我一直沒有找到在兩種環境中共享程式碼的方法, 因此連一個簡單的全域性配置檔案都沒法寫(更不用說想共享一些通用的函數了), 更讓人惱火的是, 我也沒有找到在Extension環境中共享程式碼的機制, 連Extension環境中的配置檔案也沒法寫. 希望有人能夠解答這個問題.

Autohome網站增強外掛(Autohome boost)使用說明

安裝

安裝完外掛後, 瀏覽的時候, 在瀏覽器的位址列中會出現程式的圖示, 此時表示安裝成功了.
如圖:
安裝成功後的圖示

車系收藏

這是該外掛目前唯一的功能, 也是我自己最想要的功能.
安裝完外掛後, 登入autohome(必須登入), 進入車系頁面, 比如進入福克斯的頁面, 在車系頁面的標題右邊會出現收藏連結.
如圖:
車系收藏連結

此時點選即可收藏此車系. 點選後, 連結顯示為’已收藏’, 此時再次點選可取消收藏.
如圖:
車系已收藏

收藏列表

登入後(必須要登入), 在網頁頂行的位置, 顯示使用者名稱字的邊上, 會出現新增加的選單選項’收藏列表’. 此時可以點選進入檢視自己的收藏列表(沒有收藏的時候是空的).
如圖:
收藏列表

writen by  九天雁翎(JTianLing) — www.jtianling.com            

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述