最近笔者几篇文章绍介了改信息插件的文章. 关联文章的地址
上一篇 绍介了我做的第一个 chrome 插件 划词搜书,天今做了一些修改,效果图如下:
这篇体具的说下这个插件的现实式方。
第一步:
须要立建一个空件文夹,然后新建一个名字为 manifest.json 的件文,在个一每chrome扩展和可安装的WebApp,包含肤皮,都有一个 JSON 式格的manifest件文,叫manifest.json,里头供提了主要的信息 。如下:
1 { 2 // Required 3 "name": "My Extension", 4 "version": "versionString", 5 "manifest_version": 2, 6 // Recommended 7 "description": "A plain text description", 8 "icons": { ... }, 9 "default_locale": "en", 10 11 // Pick one (or none) 12 "browser_action": {...}, 13 "page_action": {...}, 14 "theme": {...}, 15 "app": {...}, 16 17 // Add any of these that you need 18 "background_page": "aFile.html", 19 "chrome_url_overrides": {...}, 20 "content_scripts": [...], 21 "homepage_url": "http://path/to/homepage", 22 "incognito": "spanning" or "split", 23 "key": "publicKey", 24 "minimum_chrome_version": "versionString", 25 "omnibox": { "keyword" : "aString" }, 26 "options_page": "aFile.html", 27 "permissions": [...], 28 "plugins": [...], 29 "update_url": "http://path/to/updateInfo.xml" 30 }
其中必填的只有 name名字,vesion版本号和manifest_version,须要注意的是,网上能搜索到的大部分博客所写的 manifest.json 的描述都比拟旧,没有提到最后一个manifest_version,在谷歌的最新求要中,manifest件文中,须要把manifest_version标识为2。更多关于 manifest的描述,请参考 谷歌的文档。
在我的插件中,除了必填写的三个之外,还用到了permissions和content_scripts,manifest件文如下:
1 { 2 "name": "划词搜书", 3 "version": "1.0.5", 4 "description" : "划词搜书。所选的词被书名号包裹或划词后按下d键(douban的首字母),将会回返豆瓣对应的书籍信息。例如:选择《平常的界世》, 5 或者选择 平常的界世 ,然后按下 d,将会在页面上示显路遥这部经典作品的豆瓣评分,简介和售价", 6 "manifest_version": 2, 7 "permissions": [ 8 "https://api.douban.com/*" 9 ], 10 "icons": 11 { 12 13 "48": "bookinfo.png" 14 }, 15 "content_scripts": [ 16 { 17 "matches": ["http://*/*"], 18 "css" : ["linchao.css"], 19 "js": ["linchao.js"] 20 } 21 ] 22 23 }
1.permissions 于用明声插件所须要的权限有哪些,在这个插件中,我的脚本须要跨域的求请 豆瓣 的api,取得图书的信息,所以把 https://api.douban.com/* 写入其中。户用在安装这个插件的时候,会根据 permissions 所指定的权限与给定一的告警;
2.Content scripts是在Web页面内行运的javascript脚本。通过用使准标的DOM,它们可以取得浏览器所问访页面的详细信息,并可以修改这些信息,单简的说,Content scripts是指在户用浏览页网的时候,也行运于页面的,来自于你插件的代码。件文中,js 和 css指都定不言而喻,是插件所对应的js和css件文,而"matches": ["http://*/*"]是指,插件在哪些页网下是失效的,或者说是作工在哪些网站中,这里,我望希 划词搜书 能在个一每页面中用使,所以指定为 ["http://*/*"]。
第二步:
写好manifest件文后以,在一同目录中立建好js和css 件文,就能够开始开辟了。
打开chrome的 扩展程序管理页 勾选 开辟组式模,然后载入正在开辟的程序,向指刚才立建的件文夹,这样,插件就能在chrome中进行开辟和调试了。
1.取得鼠标选择的字文信息。
给chrome开辟插件有一点是非常舒畅的,就是根本就没有前端程序员所恨痛的兼容性问题,而对于chrome而言要取得鼠标选中的字文简直就是太易容了。
var text = window.getSelection(); var bookname = text.toString();
2.记录下mouseup时候的指针位置
getBookInfo.mouseupX = e.clientX; getBookInfo.mouseupY = e.clientY;
3.求请 豆瓣的api 取得书籍信息
这里就用到了,manifest里头请求的,跨域ajax求请了。
豆瓣api2.0非常单简明了
首先,须要根据书名来搜索书籍
只须要造构一个ajax求请,q值就是 1中取得到的鼠标字文,胜利后以豆瓣会json式格回返最多20条的搜索结果,记录下这20个书籍信息,因为搜索回返的信息中,并没有我须要的书籍评分信息,所以须要根据id去求请每本书的体具信息。
取得书籍体具信息的接口也非常单简:
根据回返的信息,拿到书的 评分,点评人数,书名,作者,简介,标签和售价,生成dom,并绑定好对应的事件:
a.浮层中的上一本,下一本;
b.浮层的失消逻辑,再次选取字文时候小时,鼠标点击body时候失消等
就能够根据2中取得的mouseup的X Y值,来生成dom插入到页面中了,
到这里,这个插件盘算基本开辟完成了。
第三步:
写完的货色,自然是把他布发出去,这里要做两个事件:
第一,将应用布发到chrome应用网上应用店商,次初布发应用,要一个$5美元的费用信用卡费用,同时会扣除一个$1 的预授权,不过这个前面是会退还的。
出乎我预料的是,来原chrome的布发应用是没有任何核审的,布发后就失效了,这里我对各个消息核审,应用核审表示遗憾,不过在短时间内搜索不到,多是有一个延时。
chrome的布发时候,对图片的求要很严格,必须满意特定的巨细:
- -!像我种这,不会PS的人,只好对标图表示遗憾了。争夺后以补上吧。
第二,请求豆瓣的appkey,这里,比拟趣有的是,我选择了先布发chrome后请求id,因为,在请求豆瓣appkey时候须要填写应用地址,所以先布发,才有地址,而且豆瓣的api的制约其实够足满意我测试用使,(不须要授权开公api可以用使http,参数里头如果不含包apikey的话,制约单ip每分钟10次,带的话每分钟40次。带apikey的例子为: http://api.douban.com/v2/user/1000001?apikey=XXX, XXX为你的apikey)。豆瓣的请求也是非常单简,填写好几个必备的容内以后,交提核审可即。这里有个小插曲,我的第一次交提被拒绝了,但是没给我原因,于是我点了下再次交提核审,5分钟后以就告诉我通过了,不知道为什么。。
最后的结总:
爱上彀,爱chrome,欢送用使我的插件 : 划词搜书 ,有任何问题,请和我联系,感谢。
文章结束给大家分享下程序员的一些笑话语录: 很多所谓的牛人也不过如此,离开了你,微软还是微软,Google还是Google,苹果还是苹果,暴雪还是暴雪,而这些牛人离开了公司,自己什么都不是。