chrome插件文档翻译 -- 概述

/ chrome插件 / 没有评论 / 360浏览

英文原文地址 本文地址

一旦您阅读完本页和Getting Started教程,您就可以开始写扩展程序了

基础(The basics)

一个扩展程序就是将诸如HTML、CSS、JavaScript、图片以及其他所有您需要的文件通过zip压缩的软件包并且该软件包能够增强chrome浏览器的功能,从本质上说,扩展程序就是一个web页面,您可以使用所有页面所拥有的chrome API,例如XMLHttpRequest、JSON、HTML5等特性。

扩展程序能够通过注入脚本(content script)跨站异步请求(cross-origin XMLHttpRequests) 来操作页面和服务端,扩展程序也可以通过编程控制浏览器(书签标签等)

扩展程序界面(Extension UIs)

很多扩展程序(非chrome apps)以browser actionspage actions 的形式给chrome添加UI界面,每个扩展程序最多可拥有一个browser action和一个page action,如果该扩展程序应用于大多数页面,那么您应该选择browser action,反之,如果该应用应用于特定的页面,则您应该选择page action。

Gmail插件 使用browser actionMappy插件 使用page action和注入脚本(content script)修改颜色插件 使用browser action(点击的时候显示一个弹出框)

扩展程序也有有其他的UI形式,如:添加右键菜单、提供一个可选页面,或者用脚本修改页面样式,在这里 Developers Guide有详细的扩展程序特性及其相关demo。

文件(Files)

每个扩展程序都有一下文件:

  1. 一个manifest文件
  2. 至少一个html文件(chrome主题除外)
  3. 可选:若干个JavaScript文件
  4. 可选:其他扩展所需文件,例如:图片

当您在开发扩展的时候,需要将所有文件放到一个文件夹中,需要发布插件的时候,该文件夹中的所有文件都会被打包到一个.ctx后缀的zip文件包中,如果您通过Chrome Developer Dashboard,上传您的扩展程序(.ctx文件),在Hosting,您可以找到关于发布扩展程序的详细信息。

使用文件

您可以将任何文件放到扩展程序中,但是如何使用该文件呢?通常,您可以像在普通的HTML文件中一样通过相对地址引用文件,示例如下:

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

你可能会通过chrome的调试工具发现,扩展程序里的每个文件都可以通过类似如下的绝对地址访问到。

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

在上边这种URL中,<extensionID>是扩展系统为每一个扩展生成的唯一ID,通过chrome://extensions可以看到您所安装的扩展的ID,<pathToFile>文件相对于扩展根目录的路径,和相对路径一致。

当您在开发扩展程序中(打包之前),扩展程序的ID是可能变化的,打包前,同一个扩展,放在不同的文件夹中让chrome加载,所产生的ID是不同的,打包后又会产生一个新的ID,如果扩展程序中,需要用到某个文件的绝对地址,可以使用@@extension_idpredefined message从而避免将ID硬编码到程序中。

当您打包扩展程序时(尤其通过Chrome Developer Dashboard),扩展程序将被赋予一个永久ID,该ID不会因为扩展程序更新而变化,一个确定了该ID,您可以将所有@@extendion_id替换为真是ID

manifest文件(The manifest file)

名为manifest.json的manifest文件包含该扩展程序的定义信息,例如:该扩展的最重要的文件、该扩展的所需要的权限,一下为典型的manifest文件(该扩展需为browser_action,且需要从google.com获取信息):

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": { "128": "icon_128.png" },
  "background": {
    "persistent": false,
    "scripts": ["bg.js"]
  },
  "permissions": ["http://*.google.com/", "https://*.google.com/"],
  "browser_action": {
    "default_title": "",
    "default_icon": "icon_19.png",
    "default_popup": "popup.html"
  }
}

更多manifest的用法请查看Manifest Files

架构(Architecture)

大多扩展都含有background page(一下简称背景页),背景页是一个没有前端界面但含有该扩展主要逻辑的页面,一个扩展也可能含有用于呈现UI的其他页面,扩展还可以通过content script来影响、修改用户所加载的页面(非扩展所包含的页面)。

背景页(The background page)

背景页由background.html定义,该html可以通过加载js代码来控制扩展的主要行为。背景页分两种:persistent background pagesevent pages,前者是持续打开的,后者根据需要打开或关闭,除非真的需要背景页持续运行,否则您因该倾向于使用后者。

更多信息查看Event PagesBackground Pages

UI页面(UI pages)

扩展可以包含普通的html文件作为扩展的UI,例如:一个browser action可以绑定点击事件,一旦点击就会弹出popup.html页面,另一种方式是通过tabs.createwindow.open的方式打开扩展中的html页面

扩展中的不同html页面可以相互访问DOM元素和js函数

使用chromeAPI(Using the chrome.* APIs)

todo

通信(Communication between pages)

todo

保存数据和匿名模式(Saving data and incognito mode)

todo

下一步(Now what?)

您已阅读完扩展程序的相关介绍,是时候开启您的扩展程序之旅了,推荐您查看一下文章。

  1. 起步
  2. 调试
  3. 开发者指南
  4. 示例demo
  5. 视频,例如:Extension Message Passing

Content available under the CC-By 3.0 license