一、新建一个空文件夹,创建manifest.json 文件
新建文件夹名字是应用的名称,manifest.json 是应用的一些信息,我们以插件scholarsea为例,文件夹名为scholarsea,对应的的manifest.json 如下所示,具体内容参考chrome 扩展文档。
1: {
2: "name": "Google Scholar \u641c\u7d22",
3: "version": "0.1",
4: "description": "use Google Scholar to find the paper you selected",
5: "icons": { "48": "4848.png" },
6: "page_action": { "default_icon": "1919.png" },
7: "background_page": "background.html",
8: "permissions": [ "contextMenus","tabs" ],
9: "background_page":"background.html"
10: }
二、为你的应用找一个好看的图标
在文件夹下放你的图标,和manifest 中属性相同。我是的19×19 和48×48 大小的png,还不错吧!自己PS的哦
三、新建一个html 文件和manifest 中html 属性一致
内容很简单包含一个后面要用的js 文件,这个js 文件名可以随意
1: <script src="js.js"></script>
四、新建js 文件
这里js 文件名和上面html 内js 文件名一致,用于执行插件的核心工作。scholarsea 将所选的文字作为关键字在Google scholar 进行搜索。内容如下:
1: //open new tab to search
2: function searchdblp(info,tab){
3: var url="http://scholar.google.com/scholar?hl=en&q=
4: "+info.selectionText+"&btnG=&hl=en&as_sdt=0%2C5"
5: window.open(url);
6: }
7:
8: //add right button click
9: var menutitle="Google Scholar \u5e2e\u4f60\u641c"
10: var parent= chrome.contextMenus.create({"title": menutitle,
11: "contexts":["selection"],"onclick":searchdblp,});
chrome.contextMenus.create 在浏览器邮件添加一个选项,名称为“Google Scholar 帮你搜”,当点击后调用函数searchdblp ,info.selectionText 是我们在浏览器所选的内容。
五、发布插件
看看我们这个名为scholarsea 的文件夹下有了哪些内容:
最后只需要在chrome 中发布即可,在chrome 的菜单中选择“工具/扩展程序”,然后打包扩展程序即可。这样会生成一个crx 类型的插件安装文件,和一个pem 的密钥文件(用于管理你的插件)。因为所有插件都是源码开放的,需要确认这个插件是你所有的只有这个密钥了。
六、一点注意
在上面没有提到重要一点是manifest 和js 内都不支持中文,采用的是unicode 编码,如果你需要写中文的话,请用unicode 编码,有个简单的中文转unicode 的编码方法,如果你装了python 的话就好办了,看看我怎么解决的
1: >>> u"帮我搜"
2: u'\u5e2e\u6211\u641c'
3: >>> u"搜索此人"
4: u'\u641c\u7d22\u6b64\u4eba'
看到了吧,很方便哦~~
最后提供两个插件,用于搜索作者的文章dblpsea,和google scholar 搜索文章的插件:
【dblpsea】 【scholarsea】