Chrome扩展及应用开发入门笔记（三）存储数据

最新推荐文章于 2024-08-22 08:15:03 发布

多则惑少则明

最新推荐文章于 2024-08-22 08:15:03 发布

阅读量5.7k

点赞数

分类专栏：【技术】JavaScript/python/shell 【测试】工具【技术】手机m站

【测试】工具同时被 3 个专栏收录

54 篇文章 1 订阅

订阅专栏

【技术】JavaScript/python/shell

45 篇文章 1 订阅

订阅专栏

【技术】手机m站

24 篇文章 0 订阅

订阅专栏

常驻后台：

不是用户主动发起时（如开启特定页面或点击扩展图标等）才运行，而是希望扩展自动运行并常驻后台来实现一些特定的功能，比如实时提示未读邮件数量、后台播放音乐等等。

Chrome允许扩展应用在后台常驻一个页面以实现这样的功能。在一些典型的扩展中，UI页面，如popup页面或者options页面，在需要更新一些状态时，会向后台页面请求数据，而当后台页面检测到状态发生改变时，也会通知UI界面刷新。

后台页面与UI页面可以相互通信。

在Manifest中指定background域可以使扩展常驻后台。background可以包含三种属性：

scripts//指定了scripts属性，则Chrome会在扩展启动时自动创建一个包含所有指定脚本的页面

page//如果指定了page属性，则Chrome会将指定的HTML文件作为后台页面运行。通常我们只需要使用scripts属性即可，除非在后台页面中需要构建特殊的HTML——但一般情况下后台页面的HTML我们是看不到的

persistent//定义了常驻后台的方式——当其值为true时，表示扩展将一直在后台运行，无论其是否正在工作；当其值为false时，表示扩展在后台按需运行，这就是Chrome后来提出的Event Page。Event Page可以有效减小扩展对内存的消耗，如非必要，请将persistent设置为false。persistent的默认值为true

动态改变扩展图标:

编写一款实时监视网站在线状态的扩展。思路很简单，每隔5秒就发起一次连接请求，

如果请求成功就代表网站在线，将扩展图标显示为绿色，如果请求失败就代表网站不在线，将扩展图标显示为红色。

Manifest文件，此例中以检测www.google.cn为例:

{
    "manifest_version": 2,
    "name": "Google在线状态",
    "version": "1.0",
    "description": "监视Google是否在线",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        }
    },
    "background": {
        "scripts": [
            "js/status.js"
        ]
    },
    "permissions": [
        "http://www.google.cn/"
    ]
}

由于这个扩展没有UI，所以我们不必编写HTML文件，下面直接编写status.js:

function httpRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            callback(true);
        }
    }
    xhr.onerror = function(){
        callback(false);
    }
    xhr.send();
}

setInterval(function(){
    httpRequest('http://www.google.cn/', function(status){
        chrome.browserAction.setIcon({path: 'images/'+(status?'online.png':'offline.png')});
    });
},5000);

status.js调用了我们之前没有介绍过的方法， chrome.browserAction.setIcon。Chrome为扩展应用提供了很多类似的方法可以使得扩展应用做更多的事情，

并且与浏览器结合得更加紧密。

本节示例扩展中的httpRequest函数，与上节所讲述跨域请求中所使用的函数非常类似，但请注意本节在httpRequest函数中加入了onerror事件，正是因为加入了这个事件才能捕捉到请求过程中是否发生了错误，从而得知所监视的网站是否在线。将本例载入Chrome后，在联网的情况下可以看到扩展图标为绿色，断开网络连接后扩展图标变为了红色。

小提示：如果想在用户打开浏览器之前就让扩展运行，可以在Manifest的permissions属性中加入"background"，但除非必要，否则尽量不要这么做，因为大部分用户不喜欢这样。

带选项页面的扩展:

有一些扩展允许用户进行个性化设置，这样就需要 向用户提供一个选项页面。

Chrome通过Manifest文件的options_page属性为开发者提供了这样的接口，可以为扩展指定一个选项页面。

当用户在扩展图标上点击右键，选择菜单中的“选项”后，就会打开这个页面.

对于网站来说，用户的设置通常保存在Cookies中，或者保存在网站服务器的数据库中。

对于JavaScript来说，一些数据可以保存在变量中，但如果用户重新启动浏览器，这些数据就会消失。

那么如何在扩展中保存用户的设置呢？我们可以使用HTML5新增的localStorage接口。

实践：天气预报

http://www.ituring.com.cn/article/60271

储存数据

一个程序免不了要储存数据，对于Chrome扩展也是这样。通常Chrome扩展使用以下三种方法中的一种来储存数据：

第一种是使用HTML5的localStorage，这种方法在上一节的内容中已经涉及； // 对于一般的扩展，“设置”这种简单的数据可以优先选择第一种

第二种是使用Chrome提供的存储API；// 对于结构稍微复杂一些的数据可以优先选择第二种，这种方法可以保存任意类型的数据，但需要异步调用Chrome的API，结果需要使用回调函数接收

第三种是使用Web SQL Database。//目前使用的不算太多，因为需要使用SQL语句对数据库进行读写操作，较前两者更加复杂，但是对于数据量庞大的应用来说是个不错的选择

下面将详细讲解后两种储存数据的方法。

Chrome存储API--保存的数据写入本地磁盘

Chrome提供的存储API可以说是对localStorage的改进，它与localStorage相比有以下区别：

如果储存区域指定为sync，数据可以自动同步；
content_scripts可以直接读取数据，而不必通过background页面；//content_scripts通过runtime.sendMessage和background通信，由background读写扩展所在域（通常是chrome-extension://extension-id/）的localStorage，然后再传递给content_scripts。
在隐身模式下仍然可以读出之前存储的数据；
读写速度更快；
用户数据可以以对象的类型保存。

使用Chrome存储API必须要在Manifest的permissions中声明"storage"，之后才有权限调用。Chrome存储API提供了2种储存区域，分别是sync和local。两种储存区域的区别在于，sync储存的区域会根据用户当前在Chrome上登陆的Google账户自动同步数据，当无可用网络连接可用时，sync区域对数据的读写和local区域对数据的读写行为一致。

对于每种储存区域，Chrome又提供了5个方法，分别是get、getBytesInUse、set、remove和clear。

源码：`content_script获取页面内容`通过`runtime.sendMessage`和background通信，由background写扩展所在域（通常是chrome-extension://extension-id/）的`localStorage； background接收到popup发送的消息，从localstorage中取出内容并将内容会送给popup，popup负责展示content_script获取的页面内容`

https://github.com/xiaohuhuanxiang/chromedev/tree/chrome/localstorage

Web SQL Database

Web SQL Database的三个核心方法为openDatabase、transaction和executeSql。openDatabase方法的作用是与数据库建立连接，transaction方法的作用是执行查询，executeSql方法的作用是执行SQL语句。

http://www.ituring.com.cn/article/60274

扩展页面间的通信：

有时需要 让扩展中的多个页面之间，或者不同扩展的多个页面之间相互传输数据，以获得彼此的状态。

比如音乐播放器扩展，当用户鼠标点击popup页面中的音乐列表时，popup页面应该将用户这个指令告知后台页面，之后后台页面开始播放相应的音乐。

Chrome提供了4个有关扩展页面间相互通信的接口，分别是runtime.sendMessage、runtime.onMessage、runtime.connect和runtime.onConnect。做为一部入门级教程，此节将只讲解runtime.sendMessage和runtime.onMessage接口，runtime.connect和runtime.onConnect做为更高级的接口请读者依据自己的兴趣自行学习，你可以在http://developer.chrome.com/extensions/extension得到有关这两个接口的完整官方文档。

请注意，Chrome提供的大部分API是不支持在content_scripts中运行的，但runtime.sendMessage和runtime.onMessage可以在content_scripts中运行，所以扩展的其他页面也可以同content_scripts相互通信。

runtime.sendMessage完整的方法为：

chrome.runtime.sendMessage(extensionId, message, options, callback)

extensionId为所发送消息的目标扩展，如果不指定这个值，则默认为发起此消息的扩展本身；

message为要发送的内容，类型随意，内容随意，比如可以是'Hello'，也可以是{action: 'play'}；

options为对象类型，包含一个值为布尔型的includeTlsChannelId属性，此属性的值决定扩展发起此消息时是否要将TLS通道ID发送给监听此消息的外部扩展¹，有关TLS的相关内容可以参考http://www.google.com/intl/zh-CN/chrome/browser/privacy/whitepaper.html#tls，这是有关加强用户连接安全性的技术，如果这个参数你捉摸不透，不必理睬它，options是一个可选参数

callback是回调函数，用于接收返回结果，同样是一个可选参数。

runtime.onMessage完整的方法为：

chrome.runtime.onMessage.addListener(callback)

callback为必选参数，为回调函数。callback接收到的参数有三个，分别是 message、 sender和 sendResponse，即消息内容、消息发送者相关信息和相应函数。其中 sender对象包含4个属性，分别是 tab、 id、 url和 tlsChannelId， tab是发起消息的标签

例子

popup.html中执行如下代码：

chrome.runtime.sendMessage('Hello', function(response){
    document.write(response);
});

在background中执行如下代码：

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    if(message == 'Hello'){
        sendResponse('Hello from background.');
    }
});

查看popup.html页面会发现有输出“Hello from background.”。

注：

chrome.runtime.sendMessage,chrome.tabs.sendMessage,chrome.extension.sendMessage有什么区别？

chrome.extension.sendMessage目前没有这个方法了。chrome.tabs.sendMessage是专门与某个标签通信的方法，需要tabs权限，chrome.runtime.sendMessage用于扩展内部或扩展间的通信。

扩展消息机制例子

http://blog.csdn.net/huazhongkejidaxuezpp/article/details/50388909

Chrome扩展的UI界面

用户对一个程序的第一印象就是UI的设计，拙劣的UI设计完全可能将90%的用户挡在门外——即使功能设计得非常完美

chrome 扩展API

名称	描述	最低版本
alarms	使用 `chrome.alarms` API 安排代码周期性地或者在将来的指定时间运行。	22
bookmarks	使用 `chrome.bookmarks` API 创建、组织以及通过其他方式操纵书签。您也可以参见替代页面，通过它您可以创建一个自定义的书签管理器页面。	5
browserAction	使用浏览器按钮可以在 Google Chrome 浏览器主窗口中地址栏右侧的工具栏中添加图标。除了弹出内容。	5
browsingData	使用 `chrome.browsingData` API 从用户的本地配置文件删除浏览数据。	19
commands	使用命令 API 添加快捷键，触发您的扩展程序中的操作，例如打开浏览器按钮或向扩展程序发送命令。	25
contentSettings	使用 `chrome.contentSettings` API 更改设置，控制网站能否使用 Cookie、JavaScript 和插件之类的特性。大体上说，内容设置允许您针对不同的站点（而不是全局地）自定义 Chrome 浏览器的行为。	16
contextMenus	使用 `chrome.contextMenus` API 向 Google Chrome 浏览器的右键菜单添加项目。您可以选择您在右键菜单中添加的项目应用于哪些类型的对象，例如图片、超链接和页面。	6
cookies	使用 `chrome.cookies` API 查询和修改 Cookie，并在 Cookie 更改时得到通知。	6
debugger	`chrome.debugger` API 是 Chrome 远程调试协议（英文）的另一种消息传输方式。使用 `chrome.debugger` 可以附加到一个或多个标签页，以便查看网络交互、调试 JavaScript、改变 DOM 和 CSS 等等。使用调试对象的标签页标识符来指定 sendCommand 的目标标签页，并在 onEvent 的回调函数中通过标签页标识符分发事件。	18
declarativeContent	使用 `chrome.declarativeContent` API 根据网页内容采取行动，而不需要读取页面内容的权限。	33
desktopCapture	桌面捕获 API 可以用于捕获屏幕、单个窗口或标签页的内容。	34
devtools.inspectedWindow	使用 `chrome.devtools.inspectedWindow` API 与审查的窗口交互：获得审查页面的标签页标识符，在审查窗口的上下文中执行代码，重新加载页面，或者获取页面中所有资源的列表。	18
devtools.network	使用 `chrome.devtools.network` API 获取开发者工具的网络面板中显示的与网络请求相关的信息。	18
devtools.panels	使用 `chrome.devtools.panels` API将您的扩展程序整合到开发者工具窗口用户界面中：创建您自己的面板、访问现有的面板以及添加侧边栏。	18
downloads	使用 `chrome.downloads` API 以编程方式开始下载，监视、操纵、搜索下载的文件。	31
events	`chrome.events` 命名空间包含 API 分发事件使用的通用类型，以便在某些有意义的事情发生时通知您。	21
extension	`chrome.extension` API 包含任何扩展程序页面都能使用的实用方法。它包括在扩展程序和内容脚本之间或者两个扩展程序之间交换消息的支持，这一部分内容在消息传递中详细描述。	5
fileBrowserHandler	使用 `chrome.fileBrowserHandler` API 扩展 Chrome OS 的文件浏览器。例如，您可以使用这一 API 让用户向您的网站上传文件。	12
fontSettings	使用 `chrome.fontSettings` API 管理 Chrome 浏览器的字体设置。	22
history	使用 `chrome.history` API 与浏览器的历史记录交互，您可以添加、删除、通过 URL 查询浏览器的历史记录。如果您想要使用您自己的版本替换默认的历史记录页面，请参见替代页面。	5
i18n	使用 `chrome.i18n` 架构为您的整个应用或扩展程序实现国际化支持。	5
identity	使用 `chrome.identity` API 获取 OAuth2 访问令牌。	29
idle	使用 `chrome.idle` API 检测计算机空闲状态的更改。	6
input.ime	使用 `chrome.input.ime` API 为 Chrome OS 实现自定义的输入法，它允许您的扩展程序处理键盘输入、设置候选内容及管理候选窗口。	21
management	`chrome.management` API 可以用来管理已经安装并且正在运行的扩展程序或应用，它对于替代内建的“打开新的标签页”页面的扩展程序特别有用。	8
notifications	使用 `chrome.notifications` API 通过模板创建丰富通知，并在系统托盘中向用户显示这些通知。	28
omnibox	多功能框 API 允许您在 Google Chrome 浏览器的地址栏（又叫多功能框）中注册一个关键字。	9
pageAction	使用 `chrome.pageAction` API 在地址栏中添加图标。页面按钮代表用于当前页面的操作，但是不适用于所有页面。	5
pageCapture	使用 `chrome.pageCapture` API 将一个标签页保存为 MHTML。	18
permissions	使用 `chrome.permissions` API 在运行时而不是安装时请求声明的可选权限，这样用户可以理解为什么需要这些权限，并且仅在必要时授予这些权限。	16
power	使用 `chrome.power` API 修改系统的电源管理特性。	27
privacy	使用 `chrome.privacy` API 控制 Chrome 浏览器中可能会影响用户隐私的特性。这一模块依赖于类型 API 中的 ChromeSettings 原型，用于获取和设置 Chrome 浏览器的配置。	18
proxy	使用 `chrome.proxy` API 管理 Chrome 浏览器的代理服务器设置。该模块依赖于类型 API 中的 ChromeSetting 原型，用于获取和设置代理服务器配置。	13
pushMessaging	使用 `chrome.pushMessaging` 使应用或扩展程序能够接收通过 Google 云消息服务发送的消息数据。	24
runtime	使用 `chrome.runtime` API 获取后台页面、返回清单文件的详情、监听并响应应用或扩展程序生命周期内的事件，您还可以使用该 API 将相对路径的 URL 转换为完全限定的 URL。	22
storage	使用 `chrome.storage` API 存储、获取用户数据，追踪用户数据的更改。	20
system.cpu	使用 `systemInfo.cpu` API 查询 CPU 元数据。	32
system.memory	`chrome.system.memory` API。	32
system.storage	使用 `chrome.system.storage` API 查询存储设备信息，并在连接或移除可移动存储设备时得到通知。	30
tabCapture	使用 `chrome.tabCapture` API 与标签页的媒体流交互。	31
tabs	使用 `chrome.tabs` API 与浏览器的标签页系统交互。您可以使用该 API 创建、修改和重新排列浏览器中的标签页。	5
topSites	使用 `chrome.topSites` API 访问“打开新的标签页”页面中的显示的“常去网站”。	19
tts	使用 `chrome.tts` API 播放合成的文字语音转换（TTS），同时请您参见相关的 ttsEngine API，允许扩展程序实现语音引擎。	14
ttsEngine	使用 `chrome.ttsEngine` API 用扩展程序实现文字语音转换（TTS）引擎。如果您的扩展程序注册了这一 API，当任何扩展程序或 Chrome 应用使用 tts 模块朗读时，它会收到事件，包含要朗读的内容以及其他参数。您的扩展程序可以使用任何可用的网络技术合成并输出语音，并向调用方发送事件报告状态。	14
types	`chrome.types` API 包含用于 Chrome 浏览器的类型声明。	13
webNavigation	使用 `chrome.webNavigation` API 实时地接收有关导航请求状态的通知。	16
webRequest	使用 `chrome.webRequest` API 监控与分析流量，还可以实时地拦截、阻止或者修改请求。	17
webstore	使用 `chrome.webstore` API 从您的网站上“内嵌”安装应用与扩展程序。	15
windows	使用 `chrome.windows` API 与浏览器窗口交互。您可以使用该模块创建、修改和重新排列浏览器中的窗口。	5