谷歌插件开发：Storage API 详解（手把手带你从零探索开发谷歌插件）

我正在参加「掘金·启航计划」

本节中，我们将深入探讨 Google Chrome 插件开发中的一个重要主题：Storage API。作为进阶高级插件开发的一部分，Storage API 提供了一种方便的方式来在插件中存储和访问数据。无论是保存用户偏好设置、临时数据，还是跨不同页面共享数据，Storage API 都能帮助我们轻松管理和维护数据。无论您是初学者还是有一定插件开发经验的开发者，都能从本文中获得实用的知识和技巧。

课程目录（暂定18节）

后续可持续关注此贴，目录路径都会补上，点击即可跳转前往

一. 基本介绍

在开始介绍 Storage API 之前，让我们先了解一下基本概念。Storage API 是 Google Chrome 提供的一个内置 API，用于在插件中存储和访问数据。它提供了两种存储方式：本地存储（Local Storage）和同步存储（Sync Storage）。本地存储用于在本地计算机上存储数据，而同步存储则将数据存储在用户的 Google 帐号中，并在不同设备间同步。这使得插件能够在不同环境中保持一致的数据状态，为用户提供更好的体验。

简单来说就是Storage API 提供了两种存储方式：chrome.storage.local 和 chrome.storage.sync。其中，chrome.storage.local 存储的数据只在当前计算机上有效，而 chrome.storage.sync 存储的数据可以在用户使用 Chrome 浏览器时，在多台计算机和设备上同步。

作用

Storage API 可以帮助开发者轻松地管理插件的状态、用户配置和临时数据等，使得插件的功能得以实现。例如，如果一个插件需要在用户每次打开新标签页时显示一张不同的图片，可以将所有图片的路径存储在 Storage API 中，每次打开标签页时随机选择一张图片进行显示。此外，Storage API 还可以帮助开发者实现数据的同步和备份，使得用户可以在多台计算机和设备上使用插件。

它允许我们保存和管理用户的偏好设置和个性化配置。通过使用 Storage API，我们可以轻松地存储用户选择的主题、布局、语言等信息，并在需要时进行读取和应用。这为用户提供了一种个性化的插件体验，增强了用户满意度和忠诚度。

其次，Storage API 还可以用于临时数据的存储和共享。在插件中，我们经常需要存储一些临时数据，如用户的浏览历史、临时设置等。通过使用 Storage API，我们可以方便地将这些数据保存在插件中，并在需要时进行访问和操作。这为插件提供了一个可靠的数据存储机制，确保数据的可持久化和一致性。

需要注意的事项 ⚠️

存储数据的大小有限制：chrome.storage.local 存储的数据最大不能超过 5MB，chrome.storage.sync 存储的数据最大不能超过 100KB，如果存储的数据超过了限制，将会触发错误。
存储数据的格式需要符合要求：chrome.storage.local 和 chrome.storage.sync 存储的数据必须是 JSON 格式的对象或字符串，否则将会触发错误。
存储数据的读写是异步的：由于存储数据的读写操作是异步的，因此需要使用回调函数或 Promise 来处理返回值。

Storage API 主要提供了以下内容：

字段名	描述
chrome.storage.local.get()	用于获取存储在本地的数据
chrome.storage.local.set()	用于存储数据到本地存储空间中
chrome.storage.local.remove()	用于删除本地存储空间中的数据
chrome.storage.sync.get()	用于获取同步存储中的数据
chrome.storage.sync.set()	用于存储数据到同步存储中
chrome.storage.sync.remove()	用于删除同步存储中的数据
chrome.storage.onChanged	用于监听存储数据的变化

需要注意的是，Storage API 的数据读写操作是异步的，因此需要使用回调函数或 Promise 来处理返回值。同时，Storage API 中的数据类型受到限制，可以存储基本数据类型、数组和简单对象等，但不能存储函数、日期和正则表达式等 JavaScript 对象。

二. 主要方法

1. chrome.storage.local

chrome.storage.local 是一种本地存储方式，用于存储数据在本地设备上，不会同步到其他设备上。它主要用于存储扩展程序的数据，包括用户配置、用户历史记录、扩展程序状态等。使用它可以让扩展程序在多个页面之间共享数据，而且这些数据在用户关闭浏览器后也不会丢失。

在实际开发场景中我们通常使用它来存储以下类型的数据：

用户配置数据：比如用户选择的语言、主题、字体等。
用户历史记录：比如用户最近访问的网站、搜索记录等。
扩展程序状态：比如用户是否登录、扩展程序是否启用等。

需要注意的事项 ⚠️

存储的数据是异步的，不能像普通变量一样直接读取。
存储的数据必须是JSON格式的，不能存储函数、正则表达式等非JSON格式的数据。
存储的数据大小是有限制的，不能存储过大的数据。
在多个页面中使用 chrome.storage.local 时，需要保证存储的数据是同步的，否则会出现数据不一致的问题。

它共包含以下几个参数：

字段名	描述
chrome.storage.local.set	用于存储数据
chrome.storage.local.get	用于读取数据
chrome.storage.local.remove	用于删除数据
chrome.storage.local.clear	用于清空存储空间
chrome.storage.local.getBytesInUse	用于获取已存储数据的大小

下面我们来做个简单的 chrome.storage.local 的使用示例：

// 存储数据
chrome.storage.local.set({language: 'zh-CN'}, function() {
  console.log('Data saved.');
});

// 读取数据
chrome.storage.local.get('language', function(result) {
  console.log('Language is ' + result.language);
});

在上面的代码中，我们首先使用 chrome.storage.local.set 方法存储了一个名为"language"的键值对，表示用户选择的语言为中文。回调函数中打印了一条日志表示数据已经存储成功。

接着，我们使用 chrome.storage.local.get 方法读取了名为"language"的键值对，并打印出来。如果之前已经存储了这个键值对，那么会输出"Language is zh-CN"。

需要注意的是，存储数据是异步的，因此在读取数据时需要在回调函数中处理。而且存储的数据必须是JSON格式的，因此需要将数据用对象的形式传递给 chrome.storage.local.set 方法。

2. chrome.storage.sync

chrome.storage.sync与 chrome.storage.local 不同，chrome.storage.sync 用于在用户的不同设备之间同步存储数据。它的主要作用是在不同设备之间同步存储扩展程序的数据。这意味着用户在使用浏览器登录并启用同步功能后，他们的数据将在多个设备之间自动同步，包括个人配置、偏好设置和其他扩展程序数据。

在实际开发场景中通常用于存储需要在多个设备之间同步的数据，例如：

用户偏好设置：如主题、语言、字体大小等。
书签和浏览历史：使用户在不同设备上能够访问相同的书签和浏览历史记录。
扩展程序状态和配置：确保用户在不同设备上使用相同的扩展程序设置。

需要注意的事项 ⚠️

存储的数据大小有限制，通常为100KB。超过这个限制可能会导致存储失败。
需要谨慎处理敏感信息，确保用户隐私的安全性。
使用 chrome.storage.sync 时需要确保用户已经启用了Chrome浏览器的同步功能。

它共包含以下几个参数：

字段名	描述
chrome.storage.sync.set	用于存储数据
chrome.storage.sync.get	用于读取数据
chrome.storage.sync.remove	用于删除数据
chrome.storage.sync.clear	用于清空存储空间
chrome.storage.sync.getBytesInUse	用于获取已存储数据的大小

chrome.storage.sync 的API包含以上几个参数，与 chrome.storage.local 基本一致。接下来我们来做个简单的 chrome.storage.sync 的使用示例：

// 存储数据
chrome.storage.sync.set({theme: 'dark'}, function() {
  console.log('Data saved.');
});

// 读取数据
chrome.storage.sync.get('theme', function(result) {
  console.log('Theme is ' + result.theme);
});

在上述示例中，我们使用 chrome.storage.sync.set 方法存储了一个名为"theme"的键值对，表示用户选择的主题为暗黑模式。回调函数中打印了一条日志表示数据已经存储成功。

接着，我们使用 chrome.storage.sync.get 方法读取了名为"theme"的键值对，并将结果打印出来。如果用户在其他设备上启用了同步功能并存储了相同的键值对，那么会输出"Theme is dark"。

3. chrome.storage.managed

chrome.storage.managed 用于存储和管理由管理员在企业环境中配置的扩展程序设置，它的主要作用是在企业环境中统一管理和配置扩展程序的设置。企业管理员可以通过集中管理的方式，向员工的Chrome浏览器中推送扩展程序的特定设置，确保各个用户使用相同的配置。

在实际开发场景中常用于以下功能：

配置扩展程序的默认设置：管理员可以设置扩展程序的默认配置，确保用户在安装扩展程序时默认使用指定的设置。
禁用或启用特定功能：管理员可以禁用或启用扩展程序的某些功能，以满足企业的安全和合规要求。
设置访问权限：管理员可以控制扩展程序对特定资源或API的访问权限，以保护企业数据的安全性。

需要注意的事项 ⚠️

chrome.storage.managed只能在企业环境中使用，普通用户无法直接使用该功能。
扩展程序需要适配chrome.storage.managed的配置方式，以正确处理管理员推送的设置。
管理员需要有相应的权限和工具来管理扩展程序的配置。

它共包含以下几个参数：

字段名	描述
chrome.storage.managed.set	用于获取存储在 Chrome 管理的环境中的数据
chrome.storage.managed.get	用于存储数据到 Chrome 管理的环境中，但只能由管理员或管理控制台授权的组织进行写操作
chrome.storage.managed.remove	用于从 Chrome 管理的环境中删除存储的数据，但只能由管理员或管理控制台授权的组织进行写操作

需要注意的是，chrome.storage.managed 主要用于企业或教育机构的管理控制台，而不是一般的插件开发。该 API 用于管理者对用户浏览器环境中的存储数据进行控制和配置。

下面我们来做一个简单的示例：

// 读取管理员配置的设置
chrome.storage.managed.get(['theme', 'language'], function(result) {
  console.log('Theme is ' + result.theme);
  console.log('Language is ' + result.language);
});

在上述示例中，我们使用chrome.storage.managed.get方法读取了由管理员配置的扩展程序设置，包括主题和语言。回调函数中打印了主题和语言的值。需要注意的是，普通用户无法直接使用该功能，只有在企业环境中管理员配置了扩展程序设置后，才能读取到相应的值。

请注意，具体的配置和使用方式会根据企业环境和扩展程序的需求而有所不同。

三. 应用示例

下面我们来实现一个 Google 插件，以帮助您更好地理解 Storage API 的作用。该插件可以存储和展示用户的笔记：

创建一个新文件夹，命名为 "Note Keeper"。
在该文件夹下创建以下文件：

- manifest.json：扩展程序清单文件，用于描述插件的基本信息和权限。
- popup.html：插件的弹出窗口页面，用于显示和编辑笔记。
- popup.js：弹出窗口页面的脚本文件，用于实现笔记的存储和展示功能。

编辑 manifest.json 文件，添加必要的权限和配置信息：

{
  "manifest_version": 2,
  "name": "Note Keeper",
  "version": "1.0",
  "description": "A note-keeping extension",
  "permissions": [
    "storage"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

"permissions": ["storage"]：声明了扩展需要使用浏览器存储权限，即扩展需要访问浏览器的存储功能。

接下来我们编辑 popup.html 文件，创建弹出窗口的界面布局：

<!DOCTYPE html>
<html>
  <head>
    <title>Note Keeper</title>
    <style>
      textarea {
        width: 300px;
        height: 200px;
        resize: none;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <textarea id="note"></textarea>
    <button id="save">Save</button>
    <button id="load">Load</button>
  </body>
</html>

编辑 popup.js 文件，实现笔记的存储和展示功能：

document.addEventListener('DOMContentLoaded', function () {
  var noteTextarea = document.getElementById('note');
  var saveButton = document.getElementById('save');
  var loadButton = document.getElementById('load');

  // 保存笔记
  saveButton.addEventListener('click', function () {
    var note = noteTextarea.value;
    chrome.storage.local.set({ 'note': note }, function () {
      console.log('Note saved');
    });
  });

  // 加载笔记
  loadButton.addEventListener('click', function () {
    chrome.storage.local.get('note', function (result) {
      if (result.note) {
        noteTextarea.value = result.note;
      } else {
        noteTextarea.value = '';
      }
    });
  });
});

至此，我们的插件就开发完成了。以上代码实现了一个简单的笔记插件。当用户在弹出窗口中输入笔记内容后，点击保存按钮会将笔记存储到本地存储中。当用户点击加载按钮时，会从本地存储中获取并展示之前保存的笔记。

接下来我们来看看效果：

在本节中，我们详细介绍了 Storage API 的核心概念、作用和重要性。我们从基本的存储和读取操作开始，介绍了本地存储和同步存储的使用方法，并提供了代码示例和解释。

Storage API 提供了一个便捷的方式来在插件中管理和维护数据，为用户提供个性化的体验，同时也确保数据的持久性和一致性。通过深入学习和掌握 Storage API，开发者可以更好地设计和开发功能强大的插件，提升用户体验并增加插件的实用性。

本节课程源码 📥

链接: pan.baidu.com/s/1AE3cBk0L… 提取码: 8888