如何开发一个chrome 插件

一、新建一个空文件夹,创建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的哦

  1919这个是右键时显示的图标   4848这个是插件介绍用

 

三、新建一个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 的文件夹下有了哪些内容:

image

最后只需要在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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据