`
wuhua
  • 浏览: 2111950 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Google Chrome 扩展开发指南(Chrome Extensions HOWTO)

    博客分类:
  • HTTP
阅读更多

Google Chrome 自去年9月发布以来,差不过就快一年了。Chrome 确实带来了一些新的变化,但这些变化仍不足使我抛弃目前的首选浏览器 FireFox。主要原因是 Google Chrome 没有我想要的两个功能(或扩展):SearchStatus (在不安装 Google Toolbar 和 Alexa Toolbar 的情况下,显示 Google PageRank 及 Alexa Rank 的信息)和 QuickJava (快速屏蔽 JavaScript 功能,—— 为了安全,除了访问 Google 帐户,我访问其他任何网站从来都是关闭 JavaScript 功能)。好在 Google 最近发布了 Chrome 的扩展开发文档以及准备了一些示例。我昨天试着做了一个 Chrome Extension,一切顺利。在这里稍总结一下。

一、Google Chrome 扩展 (Chrome Extensions) 开发的环境设置

  1. 安装Google Chrome 开发者版本(Chrome Developer Version)
  2. 目前 Chrome 的正式版本还不支持扩展功能,需要下载安装 Developer version.

  3. 启用 Chrome 的扩展特性(enable extensions for Chrome)。
  4. 在 Google Chrome 的图标上点右键,选择属性 (Properties),然后点 快捷方式 (Shortcut) 选项卡,在目标 (Target)字段 的最后面,加入参数 -enable-extensions parameter。如图所示:

    http://www.xiaohui.com/dev/server/google-chrome-extension-development

    启用 Chrome 的扩展特性(enable extensions for Chrome)

  5. 安装 Python 2.6+
  6. Google 的开发文档说,Python 3.0+ 不适合扩展开发。根据我的实验,推荐 Python 2.6.2,选择其中的 Windows x86 MSI Installer (2.6.2) 下载安装即可。安装结束后,建议手动更改 Windows 的系统环境变量设置,将 Python 的安装目录加入到 PATH 变量中,这样方便在命令行下使用。

  7. 安装 Chrome 扩展的打包工具chromium_extension.py
  8. Google Chrome 扩展文件分发使用 .crx 后缀。它基于 ZIP 格式,但添加了一些特殊的 HEADER 设置。chromium_extension.py 这个小工具能将 Chrome 扩展打包成 .crx 文件以供下载分发。

  9. 2009-07-12 更新: Google 最新发布了 dev version 3.0.189.0, 这个版本有一个重要的改变,就是不再依赖 Python 脚本 chromium_extension.py 来打包了。所以上面的第3点、第4点的步骤不再适用。

二、Google Chrome 扩展 (Chrome Extensions) 开发

  Chrome 扩展是基于 JavaScript。在 Chrome 的开发网站上,有一个简单的入门示例,很清晰明了:Chrome Extension HOWTO: Getting Started

  另外,Chromium Team 也给出了几个完整的扩展代码。例如这个 Gmail Checker,能够在状态栏显示当前的 Gmail 未读邮件数量。这个扩展的源代码点这里下载

  扩展的主程序文件一般名为 manifest.json,这是文件中有一个参数字段名为 "ID",新建的项目,这个值可以为空。在使用chromium_extension.py 打包时,如果没有设置这个参数,会自动生成一个唯一的随机ID。

  使用 chromium_extension.py 的命令如下:

chromium_extension.py --indir=path\to\extension --outfile=myextension.crx

  自 ver 3.0.189.0 以后,新的扩展直接使用 Chrome 的执行程序完成打包,方法如下:

  1. 关闭你的所有 Chrome 窗口
  2. 进入 Dos 命令行方式
  3. 键入命令:<path-to-chrome>/chrome.exe --pack-extension=<extension-folder>

  具体的说明,可参阅 Google 的文档 Packaging an extension.

三、Google Chrome 扩展 (Chrome Extensions) 集合

  自 Google 发布了扩展文档以来,有许多程序员开发了各种各样的扩展以增强 Chrome 的性能。下面这些扩展集合翻译自ChromeFans 的Google Chrome Extensions Compilation

  1. PageRank Status Checker, 由 Andrew (http://www.ChromeFans.org) 开发
  2. 这个扩展在浏览器底部的状态栏内,显示当前网页的 Google PageRank 值。这个扩展对于个人站长进行 SEO 工作很有帮助。

  3. AdSweep, 由 Charles L. (http://www.AdSweep.org) 开发
  4. AdSweep 是一个非常用名的屏蔽广告的扩展,支持 Opera, Google Chrome, Chromium, Iron, Mozilla Firefox 3.1+ or Apple Safari. 现在也支持 Google Chrome 了。

  5. Digg This, 由 Hyder Alamgir (AlamgirDesigns.com) 开发
  6. 顾名思议,将当前网页 Digg 一下。

  7. Flashblock, 由 Lex1 (ruzanow.ru) 开发
  8. 使用快捷键 ALT+F 屏蔽 Flash。

  9. Gmail as default webmail client, 由 Charles (adsweep.org) 开发
  10. 当于点击了网页中的 mailto 链接时,使用 Gmail 作为默认的邮件客户端。这里有一个测试页面.

  11. Google Reader Notifier for Chrome, 由 Vasanth, (vasanth.in) 开发
  12. 这个扩展显示你的 Google Reader 帐户中未读的文章数量。

  13. Cleeki, 由 cleeki.com 开发
  14. 该扩展实现了类似IE8中的Accelerators加速器功能,当高亮选中文本后会出现提示选项,用户可执行查找、翻译、搜索等相关操作,此外Cleeki可以将IE8加速器内容加载到Chrome。

  15. Gmail Checker, 由 Chromium Team 开发
  16. 显示 Gmail 帐户中未读的邮件数量。

  17. Subscribe in Google Reader, 由 Chromium Team 开发
  18. 快速订阅当前页面的 RSS FEED 至 Google Reader.

  19. BuildBot Monitor, 由 Chromium Team 开发
  20. 开发者工具,显示 Chromium Build Bot 的 状态。

  从目前 Chrome 的开发进展以及提供的扩展质量来看,还不足以动心使我更换浏览器。只能偶尔作为测试网页使用。

四、删除 Chrome 扩展 (Uninstall Chrome Extension)

  在 Chrome 的地址栏内敲入 chrome://extensions,选中特定的扩展然后就点删除即可。

五、与 Google Chrome 扩展相关的其他资源

  1. 站内文章:Google Chrome 的内核引擎 WebKit 介绍 - WebKit 引擎比 Gecko 引擎更受程序员欢迎的原因,除了其引擎的高效稳定,兼容性好外,其源码结构清晰,易于维护,是一个重要的原因。
  2. 站内文章:Google 浏览器 Google Chrome 最新试用手记 - Chrome 的第一映象
  3. 站内文章:Google Chrome Source Code 源码下载 - Google Chrome、JavaScript V8 源码 SVN Checkout 地址
  4. 站内文章:推荐两个Firefox插件: SearchStatus + Session Manager - 简洁显示 Google PageRank 和 Alex Rank 的一个小工具
  5. 外部链接:Chromium Extensions Documentation - Chrome 扩展开发的参考文档、示例
  6. 外部链接:Google Chrome Extensions & Plugins - Chrome 的 Extensions, Bookmark, Plugins 下载

分享到:
评论

相关推荐

    chrome-extensions-samples:Chrome扩展程序示例

    howto /-显示如何执行特定任务的扩展 教程/-文档中内联引用的多步演练 extensions /-跨多个API包的全功能扩展 apps /-不推荐使用的Chrome Apps平台(以下未列出) 要尝试这些示例,请克隆此存储库并使用“加载解压...

    How to create Chrome Extensions-crx插件

    Chrome扩展程序,也称为CRX插件,是Google Chrome浏览器的一种功能增强工具,允许用户自定义浏览器的行为,添加新功能或改进现有功能。创建Chrome扩展程序涉及到一系列的技术和步骤,包括HTML、CSS、JavaScript以及...

    Chrome插件-whatfont

    Chrome插件是Google Chrome浏览器的一种扩展机制,它们可以增加浏览器的功能,提高用户的浏览体验。"WhatFont"是一款针对前端开发人员设计的Chrome插件,它能够帮助用户在浏览网页时实时识别并查看页面中所使用的...

    猫抓-chrome插件.zip

    安装时,需要将.crx文件拖放到Chrome的扩展页面(chrome://extensions/)或者在开发者模式下加载未封装的扩展。 2. **猫抓.crx**: "猫抓"很可能是一个网络爬虫或数据抓取工具的Chrome插件。在浏览器中,这类插件...

    livereload210chrome.zip

    压缩包中还包括两份文档:"how-to-use LiveReload.docx" 和 "使用说明- 谷歌浏览器.txt"。这些文档可能包含了更详细的步骤和技巧,比如如何配置项目文件、如何解决可能出现的问题,以及如何优化LiveReload的使用体验...

    Android代码-chromeadb

    Open chrome://extensions in your Chrome. Check Developer mode Select Load unpacked extensions... Open $CHROMEADB_HOME/src How to build $ npm install -g grunt-cli $ npm install $ grunt Check a

    Teaching.with.Google.Classroom

    Use Google Docs Add-ons, and Google Chrome Webstore Apps and Extensions to enhance assignments Set up Google Classroom's mobile app About the Author Michael Zhang is a certified trainer for Google ...

    SUS---system-usability-chrome-extention:快速而肮脏的用户评估。 谷歌浏览器

    谷歌浏览器 ##How to install extension 这些说明复制自在浏览器中访问 c​​hrome://extensions(或通过单击多功能框最右侧的图标打开 Chrome 菜单:菜单的图标是三个水平条。然后在工具菜单下选择扩展程序以到达...

    awsome screenshot.zip

    然后,打开谷歌浏览器的扩展管理页面(通常可以通过在浏览器地址栏输入chrome://extensions/来访问)。最后,将解压后的"awesome-screenshot-screen.crx"文件直接拖放到浏览器的扩展界面,按照提示操作,即可完成...

    HTT2_Indicator.zip

    "how-to-install.html"和"安装说明.html"提供了安装插件的步骤和指南,用户可以按照这些说明操作以启用插件功能。 为了正确安装这个插件,用户需要遵循以下步骤: 1. 下载“http2-and-spdy-indicator.crx”文件到...

    how-to-build-hcfy:《从零开始开发一个划词翻译扩展程序》系列文章

    划词翻译是一款安装在 Chrome、Firefox 和 Edge 浏览器上的扩展程序,自 2013 年我在大学寝室开发出它的第一个版本至今,我已经维护了 7 年时间。 在这段时间里,我积累了一些相关经验,例如文本检测、扩展开发等,...

    谷歌师兄的leetcode刷题笔记-live-feeds:直播

    谷歌师兄的leetcode刷题笔记Chrome 扩展程序重写了 CBS 老大哥实时提要页面,使其更加实用和有趣。 Chrome 网上应用店 功能(创建 github.io 页面) 动态布局 Todo: Logic behind positioing and sizing. How to ...

    vue.js devtools 5.3.3

    通过在浏览器的扩展程序页面(chrome://extensions/)直接拖放安装crx文件,可以轻松地将Vue.js Devtools添加到Chrome,且据描述所述,安装过程简单流畅,无任何错误报告。 Vue.js Devtools的核心功能包括: 1. **...

    Thoughts And Prayers Translator-crx插件

    语言:English (UK) 揭示人们在发送思想和祈祷时的真正想法 厌倦了只看到相同的“思想和祈祷”陈词滥调?...从这个很棒的小教程中提取:https://9to5google.com/2015/06/14/how-to-make-a-chrome-extensions/

    思想和祈祷翻译「Thoughts And Prayers Translator」-crx插件

    揭示人们在发送这些神话和祈祷时真的在想什么 厌倦了只看到相同的“思想和祈祷”陈词滥调?...从这个很棒的小教程中提取:https://9to5google.com/2015/06/14/how-to-make-a-chrome-extensions/ 支持语言:English (UK)

    meddleMonkey 重新安装

    - In Chrome browser, go to chrome://extensions - Enable Developer mode, then click on the Load Unpacked button. - Select the directory of with the unpacked ZIP files from step 2. The extension is now ...

    Pinboard Popup-crx插件

    一个简单的扩展程序,仅打开Pinboard“带有标签的弹出窗口”,即可快速将网站添加到Pinboard.in,具体如下:https://pinboard.in/howto/该扩展程序所做的只是触发小书签代码,但是扩展程序后,您会在Chrome的菜单中...

Global site tag (gtag.js) - Google Analytics