zhengrenzhe's blog   About

Chrome extensions开发-2

继续上一篇,这里详细分析一下Chrome extensions的开发方法。

manifest.json

Chrome extensions的核心文件是manifest.json。这是一个extension的描述。在这个文件里你需要写出extensions的name,description,version,permissions,icon,page还是browser action,manifest_version,等。当然上面只有name,version,manifest_version才是必须的,其他都是非必需的。下面列一个我的manifest.json来详细说明一下。

{
  "manifest_version": 2,
  "name": "bookmarks",
  "description": "bookmarks书签扩展",
  "version": "0.1",
  "browser_action": {
    "default_icon": "./images/icon.png",
    "default_popup": "popup.html"
  },
   "permissions": [
    "bookmarks",
    "tabs",
    "cookies",
    "http://*/*",
    "https://*/*"
  ],
  "icons":{
    "16":"./images/icon.png",
    "48": "./images/icon48.png",
    "128": "./images/icon128.png"
  }
}

manifest.json是一个标准的json文件,任何错误都会导致extensions错误,而且必须加双引号。第一行的

"manifest_version": 2

在任何extensions都必须出现,代表了当前manifest的版本。在chrome18前用的都是manifest_version”: 1,现在chrome的版本都到了36了,所以自然不能再用老版本了。 *name*表示当前extensions的名称,这根extensions的文件名是有区别的。chrome显示名称都是以*name*字段的值来显示的。 *description*表示这个extension的描述,非必须,但官方推荐。 *version*表示当前extension的版本,这是必须的,因为extensions的自动升级依靠这个数字来进行。 下面就到了选择action的地方了。我这里是browser_action,在browser_action中你也可以定义图标,这个图标就是显示在浏览器地址栏右边的图标。而*default_popup*表示你在点击这个图标时弹出的选项页,也就是这个:

chrome-extensions

这是我写的,当然你也可以把它变成个选项列表页的形式:

chrome-extensions

当然这由你自己决定。他本质上是个html文件,所以具体是什么形态就由你自由发挥了。 下面就到了*permissions*了。这里描述了你的扩展所用到的权限,这由你要调哪些chrome api来决定,每个api都标注了所需的权限,一般按需就好,太多容易让人厌烦。 最后就是*icons*了。这里不同尺寸的icon用来在不同的地方显示,这里不详细说明了。 我的扩展就用到了这么多,当然还有更多的选项可用,详细可以看这里。这是chrome官方详细的manifest文件参考,同时也可以看看已属于老皇历的360翻译版本

需要注意的地方

manifest文件的语法非常严格,任何错误都对导致extensions无法运行,错误不但包括语法错误,也包括以下情况: 在manifest中列出的图片或其他文件路径错误导致无法找到,没有写”manifest_version”: 2,等。

开发一个简单的扩展


现在我们来开发一个简单的extensions,他有一个popup页面,他是一个browser_action,点击后弹出的页面背景为橙色,有’hello world’字样。

编写manifest.json

{
  "manifest_version": 2,
  "name": "test_name",
  "description": "test_description",
  "version": "0.1",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

这是我们的manifest.json,因为没调chrome api,所以不用任何权限。

编写popup.html

都说了他是html文件了,所以你想怎么写都行。

chrome-extension

加载它

在加载这个文件夹后就可以看到图标了。点击它

chrome-extension

第一步算是成功了。

总结

popup页面有很大的自由度,你想怎么弄都可以,还可以结合chrome api来实现更多功能。相比那些号称webapp的页面,它才称得上是webapp。虽然很自由,但也要注意不要让这个页面太臃肿,功能太多,因为chrome加载也是需要时间的。如果你要开发的是一个具有较强交互的extension,这个页面是你发挥的好地方。

下一篇将会讲如何调用chrome API。

← Chrome extensions开发-1  chrome extensions开发-3 →