Skip to content
2010年10月4日 / island205

[译].Google Chrome extensions(实验室).概览

一旦完成了开始,万事俱备,开始编写你的Chrome扩展吧。

基础

一个Chrome扩展本质上是一个网页,是一个zip的包,里面可以有HTML、CSS、JavaScript、图片等等所有你需要的来实现你扩展的功能。你还可以用Chrome给你提供的各种APIs,从XMLHttpRequest到JSON到本地文件访问等。

不管是浏览器动作还是页面动作,一般扩展都有自己的UI界面。扩展还可以与书签栏标签(tabs)交互,与网页或者服务器交互。可以写脚本,可以用跨源的XMLHttpRequest

注意:一个扩展最多只可以有一个浏览器动作,或者是页面动作。浏览器动作的扩展的图标就在工具栏上不会消失,而页面动作扩展的图标根据网页的不同,有时出现有时消失。

查看完整的开发人员指南(未翻译)了解更多细节。

文件

每个EX(以后指代扩展extension)包含的文件列表:

  1. 一个manifest.json文件
  2. 一个或者多个HTML文件(除非EX是一个框架扩展)
  3. 可选的:一个或者多个Javascript文件
  4. 可选的:其他你的EX需要的文件——例如:图片文件,JSON文件。

 

你开发的时候把所需要的文件都放在扩展文件夹下面,发布的话就打包成特殊ZIP文件包,加以后缀.crx就好啦。

文件指向

你可以在EX文件夹下放你任何想要的东西,但是如何指向他们呢?很简单,就像一般的HTML页面一样,运用相对路径,下面是个例子,指向其子文件夹下的一张文件名为myimage.png的图片。

   1:  <img src="images/myimage.png">

 

就像你在使用Chrome调试器的时候,每个文件你的都可以通过如下的Url格式进行访问。

chrome-extension://<extensionID>/<pathToFile>

在URL中,<extensionID>是由扩展系统为每个产生的唯一的标识符,用URL:chrome://extensions就可以打开你安装了的扩展,里面就有ID号。<pathToFile>是扩展文件夹下的文件的相对路径。

manifest 文件

文件名为manifest.json,是扩展的配置文件,包含了重要文件和扩展功能等信息。下面是一个浏览器动作的使用google.com资源的扩展的典型manifest.json的样子:

   1:  {
   2:    "name": "My Extension",
   3:    "version": "2.1",
   4:    "description": "Gets information from Google.",
   5:    "icons": { "128": "icon_128.png" },
   6:    "background_page": "bg.html",
   7:    "permissions": ["http://*.google.com/", "https://*.google.com/"],
   8:    "browser_action": {
   9:      "default_title": "",
  10:      "default_icon": "icon_19.png",
  11:      "popup": "popup.html"
  12:    }
  13:  }
更多细节,请查看Manifest文件
结构
一般扩展都有一个background页面。控制整个扩展逻辑的不可见的页面。
arch-1
 
顶部的图形显示了一个至少有两个扩展的样子:一个黄色的浏览器动作,和一个蓝色的页面动作。浏览器动作的background页面是一个Html文件(background.html),包含了Javascript代码来同时控制两个不同窗口的浏览器动作逻辑。
页面
background页面不是扩展唯一的HTML文件,还可以有一个由HTML实现的popup(弹出),甚至调用chrome.tabs.create()或者window.open() 打开新的扩展需要的HTML文件。
每个扩展中的HTML文件和Javascript都可以互相操作彼此的DOMs,调用函数。
下图显示了一个浏览器动作popup的结构。popup中的内容在文件popup.html中编写,popup并不需要拷贝background中的代码,可以共享调用。arch-2
更多细节,请查看浏览器动作和接下来的页面间的通信
 
内容脚本
你希望可以和网页互交,内容脚本必不可少,一个内容脚本可以对加载在浏览器中的网页处理,把内容脚本当作加载网页的一部分吧,不是扩展的一部分。
内容脚本可以读取加载的网页内容,也可以修改其内容,下图示例了内容文本读取和修改网页的模型,但是内容脚本不可以读取和修改扩展本身的background页面。
arch-3
内容脚本和扩展本身不是完全分离,如下图所示,内容脚本也可以和扩展本身互交传递信息,比如说:内容脚本有rss源就可会通知扩展,background也可以控制内容脚本来修改网页。
更多细节,请查看内容脚本
页面间通信
扩展的HTML页面间也需要通信,因为扩展下面的所有HTML页面都在一个进程下工作,可以互相调用函数。
查找扩展中的页面,使用chrome.extension方法——getView()和getBackgroundPage(),一旦新的page被引入扩展,最初的页面就可以调用其中的函数,操作它的DOMs
 

 

 

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: