chrome扩展程序开发常用概念

扩展开发:
1、一个应用(扩展)其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件。 应用(扩展)本质上来说就是web页面,它们可以使用所有的浏览器提供的API,从XMLHttpRequest到JSON到HTML5全都有。
应用(扩展)可以与Web页面交互,或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用(扩展)还可以访问浏览器提供的内部功能,例如标签或书签等。
每个应用(扩展)都应该包含下面的文件:
一个manifest文件
一个或多个html文件(除非这个应用是一个皮肤)
可选的一个或多个javascript文件
可选的任何需要的其他文件,例如图片。
在开发应用(扩展)时,需要把这些文件都放到同一个目录下。发布应用(扩展)时,这个目录全部打包到一个应用(扩展)名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用(扩展),可以自动生成.crx文件。
名为manifest.json的文件包含了应用(扩展)的基本信息,例如最重要的文件列表,应用(扩展)所需要的权限等。
绝大多数应用(扩展)都包含一个背景页面(background page),用来执行应用(扩展)的主要功能。
背景页面并不是应用(扩展)中唯一的页面。例如,一个browser action可以包含一个弹窗(popup),而弹窗就是用html页面实现的。应用(扩展)还可以使用chrome.tabs.create()或者window.open()来显示内部的HTML文件。
应用(扩展)里面的HTML页面可以互相访问各自DOM树中的全部元素,或者互相调用其中的函数。

2、如果一个应用(扩展)需要与web页面交互,那么就需要使用一个content script。Content script脚本是指能够在浏览器已经加载的页面内部运行的javascript脚本。可以将content script看作是网页的一部分,而不是它所在的应用(扩展)的一部分。
Content script可以获得浏览器所访问的web页面的详细信息,并可以对页面做出修改。Content script与它所在的应用(扩展)并不是完全没有联系。一个content script脚本可以与所在的应用(扩展)交换消息,
一个应用(扩展)中的HTML页面间经常需要互相通信。由于一个应用(扩展)的所有页面是在同一个进程的同一个线程中运行的,因此它们之间可以直接互相调用各自的函数。

3、可以使用chrome.extension中的方法来获取应用(扩展)中的页面,例如getViews()和getBackgroundPage()。一旦一个页面得到了对应用(扩展)中其它页面的引用,它就可以调用被引用页面中的函数,并操作被引用页面的DOM树。
应用(扩展)可以使用HTML5的 Web Storage API(例如localStorage)来保存数据,或者向服务器发出请求来保存数据。当需要保存数据的时候,首先需要确定是否从隐身模式窗口中发出的请求。缺省情况下,应用(扩展)是不会运行在隐身模式下的,而webapp是会的。需要明确用户在隐身模式下究竟需要应用(扩展)或webapp做什么。
隐身模式保证在该窗口下浏览不会留下痕迹。当处理隐身窗口的数据时,一定要遵循这个前提。例如,如果一个的应用(扩展)的功能是将浏览历史保存在云端(服务器),那么不要保存隐身模式下的浏览历史。另一方面,任何窗口下都可以保存应用(扩展)的数据,不论是否隐身。
重要规则:如果一条数据可能表明用户在网上看了什么或做了什么,不要在隐身模式下保存它。

4、改变浏览器外观
Browser Actions 在工具栏上增加图标
桌面通知 提示用户重要信息
Omnibox 在地址栏中增加关键词
选项页 让用户自己配置应用(扩展)
替代页 重定义浏览器的内部页面,例如新标签页
Page Actions 在地址栏内增加临时的图标
主题 改变整个浏览器的外观
与浏览器交互
书签 创建,组织和操作用户的收藏夹
Cookies 遍历和修改浏览器的Cookies
Events 监测某些事件的发生
History 操作和处理用户的浏览历史
标签页 创建,修改和重新排列浏览器的标签
视窗 创建,修改和重新排列浏览器的窗口
应用(扩展)的内部实现
无障碍性 使残障人士可以使用应用(扩展)
背景页 将应用(扩展)中的大部分共同代码放在一个相同位置
Content Scripts 在Web页面的内部执行javascript脚本
跨域 XMLHttpRequest 请求 适用XMLHttpRequest从远程服务器收发数据
国际化 (i18n) 处理多种语言
信息传递 使content script与它所在的应用(扩展)进行通信
NPAPI插件 执行原生二进制代码
完成并分发应用(扩展)
自动升级 自动更新应用(扩展)
托管 将应用(扩展)放在360应用中心或其它服务器上
其他部署选项 在自己的网络或其它方式分发应用(扩展)
打包 创建一个.crx文件以分发应用(扩展)
chrome标签模块被用于和浏览器的标签系统交互。此模块被用于创建,修改,重新排列浏览器中的标签。

5、每一个应用包含以下文件:
一个清单文件:manifest.json
一个或多个 HTML 文件(除非应用是一个主题背景)
可选:一个或多个 JavaScript 文件
可选:您的应用需要的任何其他文件,例如图片
应用架构:
许多应用有一个后台网页,它是一个包含应用主要逻辑的不可见页面。应用也可以包含其他页面,展现应用的用户界面。如果应用需要与用户加载的网页交互(相对于包含在应用中的页面),应用必须使用内容脚本。
后台网页是一个 HTML 页面,在应用的进程中运行。它在您的应用整个生命周期中都存在,并且一次只有一个活动的实例。(例外:如果您的应用使用“分离式”隐身模式,则会为隐身窗口创建另一个实例。)
在一个具有后台页面的典型应用中,用户界面(例如浏览器按钮或页面按钮以及选项页面)通过哑视图(dumb view)实现,当视图需要某些状态时,则从后台页面请求状态;当后台页面得知状态更改时,后台页面通知相应的视图更新。
注意事项:chrome扩展不支持inline-script,绑定事件的代码需要放到外部js文件中,也不能直接在DOM对象上添加click事件
前面说到Chrome扩展就是几个网页,那么代码当然就是网页的JavaScript了。Chrome浏览器巧妙的设计了几个特别的网页,开发者可以利用这些网页里的JS代码实现众多功能。
(1)、后台页面(Background Pages)
后台HTML里的JS在浏览器被打开时就开始执行了,当浏览器关闭时停止工作。你可以在这里写一些代码监视浏览器动作(比如在监视到用户创建了一个新标签页时邪恶的把它关闭^_^),可以做定时任务(setInterval等),可以添加一段音乐。。。不过这个页面body用户是看不到的。。
(2)、扩展栏图标的弹出页面
用户点击扩展栏图标时可以弹出一个页面,当用户点击网页部分时这个页面就被关闭了。。这是一个完整的网页,里面可以放视频、动画、功能按钮等。
(3)、嵌入到网页的JS(Content Scripts)
你可以使用js获取用户当前网页的DOM数据,监听用户键盘、鼠标动作。这些代码是一个独立的JS文件(而不是像后台、弹出窗等是一个HTML文件里的嵌入js代码),通过扩展配置注入到相应的网页。
(4)、读取用户计算机数据(NPAPI Plugins)
这个功能要用到dll(动态链接库)知识,可以启动用户电脑的程序,删除用户文件等功能。。相当于一个小Windows程序。利用Chrome提供的方法可以让扩展的后台页面与你的dll通信。
这些就API文档里的Implementation部分
.js文件文件是连接浏览器和插件的桥梁,最基本的代码就是:chrome.extension.sendRequest();,它的作用是向Chrome的扩展管理程序发送一条请求消息,这条消息将被运行的插件HTML文件捕获。需要注意的是,在这个文件中,可以添加其他代码,例如一些优化代码。
Chrome提供了4个有关扩展页面间相互通信的接口,分别是runtime.sendMessage、runtime.onMessage、runtime.connect和runtime.onConnect。
请注意,Chrome提供的大部分API是不支持在content_scripts中运行的,但runtime.sendMessage和runtime.onMessage可以在content_scripts中运行,所以扩展的其他页面也可以同content_scripts相互通信。
sendRequest
chrome.extension.sendRequest(string extensionId, any request, function responseCallback)
从 Chrome 33 开始弃用。请使用 runtime.sendMessage。

参考文章:
a)扩展页面间的通信
b)360浏览器应用开发文档
c)百度浏览器应用开发文档

此条目发表在未分类分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注