信息插件我的第一个chrome插件

最近笔者几篇文章绍介了改信息插件的文章. 关联文章的地址

    上一篇  绍介了我做的第一个 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();

在chrome 和 ff中要取得 鼠标选中的字文，可以用使   window.getSelection() ， window.getSelection() 的值console.log出，可以看到还回返了一些dom信息，这里我只须要将回返值toString()就能够拿到鼠标所选择的字文。

    2.记录下mouseup时候的指针位置

getBookInfo.mouseupX = e.clientX;
getBookInfo.mouseupY = e.clientY;

于用后续浮层的示展，这里须要注意一个小细节，如果mouseup的位置过于靠右，开展的浮层可能就超出了浏览器的示显范围了（会有横向滚动条），对于种这特殊情况，盘算位置的时候可以向左边偏移一些，尽量不要有横向滚动条的涌现。

    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，苹果还是苹果，暴雪还是暴雪，而这些牛人离开了公司，自己什么都不是。