如何开发Chrome扩展程序

Chrome扩展程序为谷歌浏览器提供了丰富的扩展功能。
那如果开发一个谷歌Chrome浏览器的扩展程序呢?

首先,我正在翻译谷歌浏览器开发者平台的中文版(Chrome开发文档中文版),现在已经翻译完成了扩展程序开发最基本的几篇内容:

  1. 什么是Chrome扩展程序?
  2. Chrome扩展程序概述
  3. 入门教程:构建一个Chrome扩展程序
  4. 扩展程序的错误调试
  5. 扩展程序的选项配置

一个Chrome扩展程序的 Hello World

Chrome扩展程序本质上是一个打包的 ZIP 文件,包含了 HTML,CSS 和 JavaScript。你在 Chrome 开发者面板提交的时候自动会生成 .crx 文件。下面我们就着手来做一个 Chrome 扩展程序,这个扩展程序的功能是帮我们找到当前页面中哪些图片来自 Google 服务器(gstatic.com),点击扩展程序图标将会出现一个弹框,弹框里会显示一个从浏览器当前页面找到的符合条件的图片。

1 首先我们需要新建一个程序目录,在目录里面新建一个声明文件 manifest.jsaon,文件内容如下:

[javascript]
{
"manifest_version": 2,

"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}
[/javascript]

这个文件中包含了扩展程序的基本信息,如名称、简介、版本号等等。注意,manifest_version 也是必须的。
在文件里还定义了 browser_action,这个包含了基本资源文件,permissions 是该扩展程序可能需要的权限,activeTab 指的是浏览器中当前活动的标签页。

2 在 manifest 文件中,我们提到了两个资源文件 icon.png 和 popup.html,一个是程序的图标,一个是我们弹出框的 HTML 代码。事实上我们在 popup.html 当中还会引入一个 popup.js 脚本,来做一些具体的事情。这几个文件都为你准备好了,你可以打开具体的文件看看里面的内容:

下载 icon.png
下载 manifest.json
下载 popup.html
下载 popup.js

3 从浏览器加载扩展程序:在浏览器打开 chrome://extensions 到扩展程序页面,或者在菜单里面选择“工具->扩展程序”。勾选右上角的“开发者模式”,然后点击“加载已解压的扩展程序”,选择你的扩展程序目录即可。或者你也可以把扩展程序目录直接拖入到浏览器的扩展程序页面。

enjoy!

如果你要进一步学习,可以参照 Chrome 开发文档,我正在翻译 Chrome 开发者平台中文版,有兴趣的朋友可以联系我。

您的赞助将会支持作者创作及本站运维

发表评论


TOP