読み込んでいます...

最近开始尝试编写Chrome插件,因为我们要移植一些项目到Chrome下,所以需要进行一些更改,所以今天花了一点时间去了解Chrome插件的开发,同时我还编写了Chrome Package方便开发人员进行开发,也能够方便开发的代码重用和自动化。同样,我以后也会记录下我开发Chrome插件所遇到的经验和问题。

实际上,Chrome插件的开发要比Firefox容易一些,至少现在看来是这样,在写一个入门程序的时候,还不需要那么费劲,先看看效果先。

上面是一个简单的程序,我们看看如何去制作它。

首先,我们需要创建一个manifest.json文件,相当于是整个插件的配置了,代码如下。

{
  
"name": "Chrome Package Project",
  
"version": "1.1",
  
"description": "This chrome extension",
  
"browser_action": {
    
"default_icon": "images/icon.png",
    
"popup":"pages/main.html"
  },
  
"permissions": [
    
"http://api.flickr.com/"
  ]
}

上面的我就不多说了,唯一要指出一点的就是下面的permissions,是验证网站,暂时我还没有了解,等我了解了会补上来。

在写好了manifest文件之后,我们就可以像写网页一样的写内容了,前面我们在manifest里面写了popup是pages/main.html,所以这个就是我们的首页。这里我喜欢代码结构层次比较鲜明,方便维护,所以我创建了如下文件夹。

build css images js  pages

其中build是我放编译后的文件的地方,pages是我放页面的地方。

OK,现在我们可以着手写程序了,一个HelloWorld非常简单,main.html代码如下。

<html>
    
<head>
        
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
        
<title>Hello World</title>
        
<link type="text/css" href="../css/main.css" rel="stylesheet"/>
        
<script type="text/javascript" src="../js/main.js"></script>
    
</head>

    <body>
        Thanks for using Chrome Package for Windows
    
</body>
</html>

这样,我们就写了一个非常简单的HelloWorld应用程序,是不是很酷,现在Chrome插件的市场还很大,而且开发简单,值得一试。

注:暂时不支持mac。

405路过 1评论 Chrome Addon 阅读全文..
  1. 置顶的更新,文章汇总 : GuoJing's Blog | 用心对待每一行代码 @

    [...] Chrome Addon – Say Hello to Chrome [...]

:-D :-? 8) :cry: 8-O :lol: :-x :-| :?: :-P :oops: :roll: :( :) :-o :wink: more »