最新消息:

chrome 扩展开发教程——HelloWorld(一)

Ajax/js 大步 843浏览 0评论
官方extension开发文档:
https://developer.chrome.com/extensions/getstarted
360的翻译的文档:
http://open.chrome.360.cn/extension_dev/overview.html

1.什么是chrome extension以及扩展能做什么

注意扩展(extension)和插件(plugin)的区别
我们直接在chrome地址输入: chrome://extensions/  打开扩展页面
chrome地址输入:  chrome://plugins/  打开插件页面
官方的文档:
https://developer.chrome.com/extensions
https://developer.chrome.com/webstore/apps_vs_extensions
借用知乎上的回答:

链接:http://www.zhihu.com/question/20628768/

"扩展"和"插件",其实都是软件组件的一种形式,Chrome 只不过是把两种类型的组件分别给与了专有名称,一个叫"扩展",另一个叫"插件"。

  • 扩展(Extension),指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件,工作在浏览器层面,使用 HTML + Javascript 语言开发[*]。比如著名的 Adblock plus。
  • 插件(Plug-in),指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件,工作在内核层面,理论上可以用任何一种生成本地二进制程序的语言开发,比如 C/C++、Delphi 等。比如Flash player 插件,就属于这种类型。一般在网页中用 <object> 或者 <embed> 标签声明的部分,就要靠插件来渲染。

至于哪种功能多的问题,这个不能比较,各有侧重。如果你想实现一个自动统计你上过的网站以及各自时间的功能,就要用扩展技术;如果你要实现一个让你的浏览器可以渲染 AutoCAD 文件的功能,就要用插件技术。

注:
* Chrome 扩展本身也支持包含 Plug-in 模块,这部分可以使用 C/C++ 等语言开发。比如 web QQ 的截图扩展,就是用了这项功能。

复杂点:
扩展是在游览器原有功能上进行开发,插件是添加新的功能(比如flash)
插件(Plugin)与扩展程序(Extension):像Flash player、Chrome PDF Viewer 、Google Update之类的浏览器插件是浏览器的底层应用,可用chrome://plugins/查看;而扩展则是为了增强浏览器某项特定功能或者提高效率方便使用的组件。

1.1扩展能做什么

与网页或服务器交互
控制浏览器的某些行为
添加UI到chrome中:Browser action和page action
创建选项页(option page)
修改已经载入的网页
添加上下文菜单(context menu)
载入DLL(有安全风险)

2.扩展是如何工作的

扩展在开发的时候,使用html+Javascript+CSS,开发完后,打包成 “.CRX”文件 。接着把“.CRX”文件发布到chrome  store,余下就是用户下载安装了。
打包成".crx”文件,去chrome的扩展界面,打开“开发者模式”。就可以看到了。
我们可以查看chrome提供的api:
https://developer.chrome.com/extensions/api_index

2.1扩展的类型

browser action :就是toolbar的右侧,我们这个helloworld的扩展就算一个browser action extension。点击icon,就会弹出界面,进行响应的操作。
page action: 配合content script来修改页面的操作。

2.2扩展的几个基本概念

Event Pages

对于app和扩展来说,一个常见的需求就是必须有一个单一且长时间运行的脚本去管理某些任务或状态。Event page就是干这个事的。Event page只在它们被需要的时候加载。当event page没有被某些行为激活时,它们不会加载,会释放内存和系统的其他资源。(注意从chrome 22稳定版开始才有这玩意,以前是有个background page的)
我们可以通过chrome——选项——更多工具——task manager(任务管理器)看到这些扩展的情况:
可以看到扩展们有进程id,使用内存、cpu等情况,还可以点击“详细统计信息”
91241281
manifest
 在扩展的manifest.json中注册你的event page:
Notice that without the "persistent" key, you have a regular background page. Persistence is what differentiates an event page from a background page.
注意:没有“persistent”键,这个就等同于background page。持久化(persistence)是evnet page与background page的主要区别。
剩下的还有生命周期的内容,自己看文档吧。
官方文档:https://developer.chrome.com/extensions/event_pages

Content Scripts

contont script就是脚本文件,用来运行在网页的上下文里。它们可以通过DOM来读取网页的详细信息,并且改变内容。
一个扩展可能同时用到browser aciton和page action等,而content script可以使用message来与browser action进行通信,这是很有必要的。
我们举例来说明content script可以做的事情:
查找网页中未链接的url,并将其转换为超链接
增加网页的字体等
查找和处理dom中的微格式(microformat)数据
但是content script也有限制,不能做一下事情:
虽然不能直接调用chrome.*API ,但是可以间接的调用。
manifest

如果你的 content script经常需要被入住(injecte),  则在extension manifest 中使用content_scripts 字段来实现注册,如下:

如果你只是像代码只在某些时候才注入,则使用  permissions 字段来替代,见Programmatic injection 描述:

使用content_scripts 字段 ,一个扩展可以在一个页面插入多个content scripts;  每个content scripts  可以有多个JavaScript 和CSS文件。还有不同的属性等。

更多详细,自己看官方文档。
官方文档:https://developer.chrome.com/extensions/content_scripts

activeTab 权限

指的是当用户点击某个扩展的 browser action 时,该扩展可以暂时的访问当前激活的tab。直到激活的tab被切换或关闭。
这里顺带介绍下browser action:
指的是一个可以点击的UI元素,如我们点击扩展的按钮就是属于browser action,browser action可以将扩展的icon放到chrome 的toolbar,地址栏的右侧。
一个browser actione有三种类型: tooltip, badge, popup.
在manifest.json中指定:
"browser_action": {...}                     
更多详细见官方文档:https://developer.chrome.com/extensions/activeTab

转载请注明:大步's Blog » chrome 扩展开发教程——HelloWorld(一)

SiteMap