https://github.com/shaun-wild/svelte-chrome-storage

A lightweight abstraction between Svelte stores and Chrome extension storage.
https://github.com/shaun-wild/svelte-chrome-storage

Last synced: 28 days ago
JSON representation

A lightweight abstraction between Svelte stores and Chrome extension storage.

• Host: GitHub
• URL: https://github.com/shaun-wild/svelte-chrome-storage
• Owner: shaun-wild
• License: mit
• Created: 2022-07-17T04:21:21.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-17T07:47:48.000Z (over 2 years ago)
• Last Synced: 2024-11-05T22:15:28.020Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 237 KB
• Stars: 23
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte-stores - svelte-chrome-storage

README

        
# Svelte Chrome Storage

A lightweight abstraction between Svelte stores and Chrome extension storage.

This library makes data synchronization of background and popup scripts super simple,

data changed in one is immediately reflected in the other. 🚀

-----

[![NPM version](https://img.shields.io/npm/v/svelte-chrome-storage)](https://www.npmjs.com/package/svelte-chrome-storage)

[![NPM Publish](https://github.com/shaun-wild/svelte-chrome-storage/actions/workflows/publish-to-npm.yml/badge.svg)](https://github.com/shaun-wild/svelte-chrome-storage/actions/workflows/publish-to-npm.yml)

## Installation

Install:

```shell

npm i svelte-chrome-storage

```

## Usage

### Reactive Syntax

```html

    import {chromeStorageLocal} from "svelte-chrome-storage"

    

    let message = chromeStorageLocal("message")

    $message = "Hello, World!"

{$message}

```


### Pub-sub Syntax

```html

    import {chromeStorageSync} from "svelte-chrome-storage"

    

    let message = chromeStorageSync("message")

    message.subscribe(newMessage => console.log(newMessage))

    message.set("Hello, World!")

```

The examples above set the `message` key on their respective chrome storage

areas.

Values changed using the `chrome.storage` api are also reflected.

```js

chrome.storage.local.set({message: "Hello, World!"})

```

## Contributions

Feel free to open any issues or pull requests for any changes you'd like to see.