@ extend- chrome/ 存储

轻松管理 Chrome 扩展存储 @extend-chrome/storage。 。 。 .

这是用于 Chrome 扩展存储 API 的包装 大类型脚本支持 使用虚拟存储桶并带有现代基于"承诺"的API.

目录

• 开始
• 使用量
• 特征
• API 密码
  • 接口桶
    • 桶. get( )
    • 桶. getKeys( )
    • 桶. set( )
    • buckle.remove () 移动( )
    • 桶. 清除( )
    • 水桶 变身
    • 桶.价值
  • 函数获取 Bucket ()

开始

你需要用一个像 滚动,Parcel,或 Webpack 到 将此库包含在您的 Chrome 扩展名中 .

见 rollup-plugin-chrome-extension 页:1 用Rollup来建造你的Chrome扩展!

安装

npm i @extend-chrome/storage

使用量

添加数据 storage 允许您使用 manifest.json 文档.

// manifest.json
{
  "permissions": ["storage"]
}

把你的Chrome扩展到另一个关卡

import { storage } from '@extend-chrome/storage'

// Set storage using an object
storage.set({ friends: ['Jack'] })

// Set storage using a function
storage.set(({ friends }) => {
  // friends is ['Jack']
  return { friends: [...friends, 'Amy'] }
})

// Get storage value using a key
storage.get('friends').then(({ friends }) => {
  // friends is ['Jack', 'Amy']
})

// Get storage values using an object
storage
  .get({ friends: [], enemies: [] })
  .then(({ friends, enemies }) => {
    // friends is ['Jack', 'Amy']
    // enemies is the [] from the getter object
  })

特征

虚拟键入存储桶

此库允许您创建存储区域并定义 将管理的数据类型.

import { getBucket } from '@extend-chrome/storage'

interface Store {
  a: string
  b: number
}

const store = getBucket<Store>('store')

store.set({ a: 'abc', b })
store.set(({ b = 0 }) => ({ b: b + 500 }))

store.set({ c: true }) // ts error
store.set(({ a }) => ({ d: 'invalid' })) // ts error

承诺和功能设定

Chrome存储 API 是同步的. 这意味着同步 呼吁 get 财务报告和审定财务报表 set 将不反映待定的变动。 这个 打电话 set 取决于存储中的值 很难.

虽然Chrome存储 API是async,但它使用回调. 这个 给开发者带来一个充满困难的世界 已经用承诺解决了.

@extend-chrome/storage 解决了这两个问题。 每一种方法 返回一个承诺和两个承诺 get 财务报告和审定财务报表 set 可以承担一个函数 提供了当前存储值,类似于 React 的 this.setState。 。 。 .

编组操作

这个 set 方法也可以使用函数( ster) 调用 作为普通类型(字符串、字符串数组或对象).

这个装置将接收存储区域的全部内容 作为争论。 它必须返回将传递给 本地存储区域 set 方法.

同步调用 set 将构成对 本地语言 set。设置将按顺序应用,但每次调用 将用存储区域的最后值解决.

bucket.set({ a: 123 })
bucket.set({ b: 456 })
bucket
  .set(({ a, b }) => {
    // a === 123
    // b === 456
    return { c: 789 }
  })
  .then(({ a, b, c }) => {
    // New values in bucket
    // a === 123
    // b === 456
    // c === 789
  })

个人电话 set 如果设置函数 扔出错误或返回无效类型,但不会影响 其他成套操作.

API 密码

接口 Bucket

一个合成存储区域。 和本地人一样 Chrome API 存储区,但是 get 财务报告和审定财务报表 set 可以将一个函数作为 参数。 A 类 Bucket 可使用 本地或同步存储。 。 。 .

多个同步调用被组成一个调用到 本地 Chrome API 语言 StorageArea.set。 。 。 .

包含默认存储区域, 这样您可以只导入 storage 如果你不在乎类型 只需要一个 存储区域.

import { storage } from '@extend-chrome/storage'

storage.local.set({ a: 'abc' })
storage.sync.set({ b: 123 })

使用 : getBucket数字 :

import { getBucket } from '@extend-chrome/storage'

// Buckets are isomorphic, so export and
// use them throughout your extension
export const bucket1 = getBucket('bucket1')
export const bucket2 = getBucket('bucket2')

每个桶都是独立的,所以数值不会相重叠.

bucket1.set({ a: 123 })
bucket2.set({ a: 'abc' })

bucket1.get() // { a: 123 }
bucket2.get() // { a: 'abc' }

使用 TypeScript 时会发光, 因为可以 定义您的桶将包含的类型. 点击这里获取更多细节 .

aync 函数 bucket.get

需要一个可选的获得者。 决定对象为 请求的存储区域值 .

function get(getter?: string | object | Function) => Promise<{ [key: string]: any }>

bucket.get('a') // resolves to object as key/value pair
bucket.get({ a: 123 }) // same, but 123 is default value
bucket.get(({ a }) => a) // resolves to value of "a"

aync 函数 bucket.getKeys

需要一个可选的获得者。 决定要用一系列字符串来表示存储区域桶中值的键.

function getKeys() => Promise<string[]>

bucket.set({ a: 123 })
bucket.getKeys() // Resolves to ['a']

aync 函数 bucket.set

设置存储中的值。 需要设置 object 或者说 function。决定新的桶值.

function set(setter: object | Function) => Promise<{ [key: string]: any }>

// Values in bucket: { a: 'abc' }

// First call to set
bucket.set({ b: 123 })

// Second synchronous call to set
bucket
  .set(({ a, b, c }) => {
    // Values composed from storage
    // and previous call to set:
    // a === 'abc'
    // b === 123
    // c === undefined
    return { c: true }
  })
  .then(({ a, b, c }) => {
    // New values in storage
    // a === 'abc'
    // b === 123
    // c === true
  })

bucket.set({ a: 123 })
bucket
  .set(({ a }) => ({ b: true }))
  .then(({ a, b }) => {
    // Values were set
    // a === 123
    // b === true
  })

aync 函数 bucket.remove

从存储中删除一个或多个值。 决定何时 操作完成 .

bucket.remove('a')
bucket.remove(['a', 'b'])

aync 函数 bucket.clear

只有这桶才有用 决定何时操作 完成 。 。 其他的桶是没有污染的.

bucket.clear()

aync 函数 bucket.changeStream

一个RxJs 观察器, 输出 a 存储变化 chrome 存储 API 时的对象 onChanged 事件火灾.

bucket.changeStream
  .pipe(filter(({ a }) => !!a))
  .subscribe(({ a }) => {
    console.log('old value', a.oldValue)
    console.log('new value', a.newValue)
  })

aync 函数 bucket.valueStream

一个可观察的,立即释放所有存储值, 何时 onChanged 火灾.

bucket.valueStream.subscribe((values) => {
  console.log('Everything in this bucket', values)
})

函数 getBucket

创建一个 桶头 (合成存储区). 带 字符串 bucketName 和可选字符串 areaName. 回归 (单位:千美元) Bucket 合成存储区. 导出此 桶并用在你的克罗姆扩展。 会成功的 包括特权页面和内容脚本.

getBucket 是类型脚本通用。 传到接口 定义存储区域中需要的类型.

function getBucket(bucketName: string, areaName?: 'local' | 'sync') => Bucket

import { getBucket } from '@extend-chrome/storage'

// JavaScript
export const localBucket = getBucket('bucket1')
export const syncBucket = getBucket('bucket2', 'sync')

// TypeScript
export const localBucket = getBucket<{ a: string }>('bucket1')
export const syncBucket = getBucket<{ b: number }>(
  'bucket2',
  'sync',
)