Chrome扩展开发的简介与实战(4)

学习

优秀扩展介绍

simpread

存储

localstorage

html 5所支持的一种存储方式。用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

localstorage在这里分2种：

• 页面原生的localstorage
• chrome ext的background中的localstorage

页面原生的localstorage

页面原生的localstorage一般是网页制作者在编写网页js的时候使用。作用范围是以网站域名为单位。我们开发ext的时候如果想使用也是可以的，不过并不是在之前介绍的content script中注入，还需要用一种特殊方式注入到原生的页面中。现在我们还未讲到作用域的问题。所以在这里先不展开，大家只要先记得有这么一件事情即可。

background中的localstorage

作用范围是全局，不同于原生，是跨网站的。

content script中不能直接访问

localstorage通用的用法

localStorage.config = "abc"

localstorage里存的东西是纯字符串，这点很重要，开发中有人经常忘记这点。

由于在js中我们经常操作的对象是json object，而存localstorage时，业界通用的做法也是存json object。所以存取的时候，各要在字符串和json object做转换。

虽然你可以存任何形式的字符串，但还是建议存json object

//存
localStorage.config = JSON.stringify({
            name: "Tom",
            age: 13,
            gender: "male"
        })
//取
let config = JSON.parse(localStorage.config)

sessionstorage

和localstorage一样都是html 5标准所支持的存储方式。不同的是，这是临时保存窗口或标签的数据，窗口和标签关闭后，会删除这些数据。

由于在实际开发中，我并没有用到过sessionstorage，可能是因为我开发的东西都是需要长期保存。个人经验这个在chrome extension开发中并不算常用。这里就先略过了。如有必要使用，网上随时都可查到资料。

chrome.storage

该API已经过优化，可以满足扩展程序的特定存储需求。
它提供与localStorage API相同的存储功能，但有以下主要区别：

• 用户数据可以自动与Chrome同步（使用storage.sync）同步。
• 扩展程序的content script可以直接访问用户数据，而无需后台页面。
• 即使使用拆分隐身行为，也可以保留用户的扩展名设置。
• 它与批量读取和写入操作异步，因此比阻塞和串行localStorage API更快。
• 用户数据可以存储为对象（localStorage API以字符串形式存储数据）。
• 可以读取管理员为扩展配置的企业策略（使用具有模式的storage.managed）。

官方文档

indexedDB

要点：

• 存储复杂数据建议使用。
• 类型上属于NoSQL的数据库（非关系型）。
• 操作异步

内容相对较多，且知识点游离于chrome ext开发本身。计划后期有机会再介绍。

一篇个人认为写的不错的文档

Web Sql

并不是HTML5规范的一部分，但主流浏览器都支持。使用SQL语言操作，简单方便。

缺点是，主流浏览器厂商都宣称将来会不支持。所以如果是长久打算，建议放弃。
如果一定要用，也不是不可以。

课堂练习 4-1

要求：

使用chrome.storage存储bozuman上的个人基本情报
地址：https://bozuman.cybozu.com/settings/profile
额外：使用sync功能，使得另外一台浏览器上有相同的信息。

提示

1. 在manifest里申明对"https://*.cybozu.com/settings/profile"敏感
2. 申请权限storage
3. 在注入的js中获取节点使用方法querySelectorAll()
4. css选择子可以用chrome的开发工具获得
5. 把获取到的情报用json组织起来
6. 存盘并打印到console