上一篇 介绍了我做的第一个 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，欢迎使用我的插件 ： 划词搜书 ，有任何问题，请和我联系，谢谢。
