基于Chrome的扩展开发(一)

简介:
  Google终于放出了Chrome的第一个扩展示例,虽然还十分简陋,但对喜欢扩展的firefox粉丝来说可说是个大好消息。

      准备工作:你需要使用a recent developer build 或者Google Chrome 2.0 beta.

      1)首先创建一个文件夹,例如c:"myextension,在这个目录下创建一个文本文件,命名为manifest.json,在其中放入下面几句:

复制代码
{
  "format_version": 1,
  "id": "00123456789ABCDEF0123456789ABCDEF0123456",
  "version": "1.0",
  "name": "My First Extension",
  "description": "The first extension that I made."
}
复制代码
其中各个参数含义如下:

format_version(必需的):向Chrome指明扩展所使用的清单格式版本。目前只有一个格式版本,因此设为1.

id(必需的):扩展的ID号(唯一的)。目前可以设为任何40个十进制数字,将来会改为扩展的公钥的SHA-1的哈希值。

version(必需的):扩展的版本号。可以使用任意点分格式的数字串

name(必需的):扩展的名称。

description(可选的):扩展的描述信息

      2)在目录下加入一个hello_world.html文件,在其中加入
    Hello,  World!
      3)为了让Chrome支持扩展,右键桌面上Chrome的快捷键,选择“属性”,在“目标”这一栏中空一格后,加入

--enable-extensions --load-extension="c:\myextension"
 

      4)启动Chrome,输入下列URL:

chrome-extension://00123456789ABCDEF0123456789ABCDEF0123456/hello_world.html
如图所示:

 

      5)输入下列URL:
chrome-ui://extensions/
将会列出所有已经安装的扩展,同时还会显示扩展系统启动时发生的错误信息。

 

6)内容脚本。它是由Chrome加载进来在web页面上运行的JavaScript文件。这和firefox扩展类似。要加入一个内容脚本,首先在清单文件中对其进行注册,如下所示:
复制代码
{
  "format_version": 1,
  "id": "00123456789ABCDEF0123456789ABCDEF0123456",
  "version": "1.0",
  "name": "My First Extension",
  "description": "The first extension that I made.",
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["foo.js"]
    }
  ]
}
复制代码
      然后创建一个脚本文件foo.js,其中代码如下:

document.images[0].src = "http://bit.ly/1293Af";
document.images[0].style.height = "auto";
     在Chrome中输入http://www.google.com/,你将看到如下画面:

 

注:内容脚本可以在页面开头或结尾执行,默认情况下是结尾处执行,当然你也可以加入”run_at”:”document-start”来告诉Chrome在开头处执行。

7)NPAPI插件。Chrome扩展可以包含NPAPI插件这样的二进制组件。如果你想在扩展中使用一个NPAPI插件,首先在扩展中为其创建一个目录,名为”plugins”,然后在清单文件中为其注册如下:

复制代码
{
  "format_version": 1,
  "id": "00123456789ABCDEF0123456789ABCDEF0123456",
  "version": "1.0",
  "name": "My First Extension",
  "description": "The first extension that I made.",
  "plugins_dir": "plugins"
}
复制代码
8)打包发布。要对扩展进行打包发布前,首先确认你安装了Python2.6,然后使用下述脚本文件chromium_extension.py

chromium_extension.py
 这个脚本运行方式如下所示:

chromium_extension.py --indir="c:\myextension" --outfile="myextension.crx"
这将会产生一个.crx文件,然后将其拖拽进Chrome即可实现扩展的安装

 

参考资料

1,Chrome Extension HOWTO

2,First Google Chrome Extensions




本文转自Phinecos(洞庭散人)博客园博客,原文链接http://www.cnblogs.com/phinecos/archive/2009/03/19/1417028.html,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
Web App开发 人工智能 自然语言处理
谷歌公布 2023 年最受欢迎Chrome扩展
谷歌公布 2023 年最受欢迎Chrome扩展
|
5月前
|
Web App开发
chrome扩展:manifest.json文件相关字段
chrome扩展:manifest.json文件相关字段
27 0
|
2月前
|
Web App开发 Windows
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
20 0
|
3月前
|
Web App开发 JSON 前端开发
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
38 0
|
6月前
|
Web App开发 开发框架 前端开发
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法试读版
42 0
|
7月前
|
Web App开发
推荐一个 Chrome 浏览历史记录管理的扩展 - History Trends Unlimited
推荐一个 Chrome 浏览历史记录管理的扩展 - History Trends Unlimited
148 0
|
9月前
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
232 0
|
Web App开发 JavaScript 前端开发
在半小时内从无到有开发并调试一款Chrome扩展(Chrome插件/谷歌浏览器插件)
就在不久之前,我们目前这个毕业班的班长那日同学和我说,他正在公司开发Chrome扩展,看起来很高大上的技术,实际开发却非常简单,这引起了我非常浓厚的兴趣,正所谓技不压身,检验自身技术的手段之一就是拥抱新事物,这一次我们尝试在半小时内开发一款Chrome扩展,因为之前我们做了一个[微信小程序的在线面试题题库](https://v3u.cn/a_id_116)的项目,所以正好利用这个题库将面试题平移到Chrome扩展上面。
在半小时内从无到有开发并调试一款Chrome扩展(Chrome插件/谷歌浏览器插件)
|
Web App开发 前端开发 JavaScript
认识Chrome扩展插件
认识Chrome扩展插件
229 1
认识Chrome扩展插件
|
Web App开发 开发者
手把手教你解锁Chrome扩展插件安装新姿势
手把手教你解锁Chrome扩展插件安装新姿势
137 0
手把手教你解锁Chrome扩展插件安装新姿势