Chrome 扩展入门

Chrome 扩展入门

Table of Contents

• 1 Chrome 扩展
• 2 扩展组成
  • 2.1 创建工作文件夹
  • 2.2 创建名为 manifest.json 文件
  • 2.3 创建名为 test.html 的文件
  • 2.4 测试.
  • 2.5 打包.

1   Chrome 扩展

如今 Chrome 扩展库上线,意味着命运将像  Firefox   一样, 依托扩展来让自己更加强大, 扩张自己在浏览器的市场.  虽然Chrome 扩展库新上线,已经有不少同  Firefox   经典扩展 功能一样的扩展, 有 Drag and Go, Google 产品相关, Google Preview, Docs PDF/PowerPoint Viewer, 甚至 Firebug …. 有了这些可以让一些  Firefox   用户轻松的向 Chrome 转移了.

2   扩展组成

一个 Chorme 扩展一般是一个特殊ZIP格式的压缩包( .crx ).一般一个基本的扩展可能需要下面几个文件:

• manifest 文件, 这是扩展需要的最重要的文件
• 一个或多个 HTML 文件
• 可选: 一个或多个 JavaScript 文件
• 可选: 其他要用到的文件,如图标等

本文简述怎样在工具栏上添加一个图标和打开一个小窗口.

2.1   创建工作文件夹

并进入到工作目录. 我们假设是 c:/my-extension

2.2   创建名为 manifest.json 文件

写入如下内容, 注意保存成 UTF-8 编码文件. ( manifest.json 文件中 name 和 version 是必须项. )

 

{ "name": "我的 Chrome 扩展", "version": "0.1", "description": "我的第一个 Chrome 扩展.", "browser_action": { "default_icon": "show-toolbar.icon", "popup": "test.html" } }

2.3   创建名为 test.html 的文件

写入如下内容:

<div class="my-button"> <span>呵呵, 第一个扩展弹出窗口</span> </div>

2.4   测试.

至此我们的工作目录组成如下:

 

打开 Chrome://extensions 扩展窗口, 点击 "载入正在开发的扩展程序按钮", 选择工作目录,点击确定,就可以测试了.

2.5   打包.

扩展已经完成, 可以打开 Chrome://extensions 扩展窗口, 点击 "打包扩展程序" 按钮来将工作目录打包, 完成后生成两个文件: .crx 和一个含有私钥的 .pem 文件.

 

 

---

Author: Guo Lihui  <guolihui112@gmail.com>

Date: 2009-12-10 23:31:48

HTML generated by org-mode 6.30c in emacs 23