发布一个开源项目 — Autohome增强插件(for chrome)

汽车之家的网站没有一个收藏功能, 感觉有些不可理解, 前段时间正好学了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