search

unadlib / origin-storage

A same-origin storage(IndexedDB/WebSQL/localStorage) for cross-domain access
MIT License
22 stars 3 forks source link

Wrapper Library Support? #28

Closed petr24 closed 6 months ago

petr24 commented 6 months ago

Anyway to make this easily work with an IndexedDB wrapper like DexieJS?

unadlib commented 6 months ago

hi @petr24 , origin-storage is based on localforage, which natively supports IndexedDB. I'm not entirely sure why you would have a need for a wrapper like DexieJS.

petr24 commented 6 months ago

@unadlib I see, there's a ton of reasons for using Dexie, however I don't want this to be a distraction to your project.

Also, any chance you have any other example repo's or resources to point to? I'm having a surprisingly difficult time getting this to work in the context of a Chrome Extension.

petr24 commented 6 months ago

Didn't realize I had to create the iframe file 🤦‍♂️. I'll close this out.

For anyone in the future.

Create an html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Page Title</title>

    <script src="storage.js" type="module"></script>
</head>

<body>
</body>
</html>

Create a js file that links to said html

import {OriginStorage} from 'origin-storage';

const originStorage = new OriginStorage({
    read: true,
    write: true,
    broadcastChanges: true,
    broadcastChannelName: 'myStorageChannel'
});

Inject this html file as an iframe. And then you can use the storage client.

import {OriginStorageClient} from 'origin-storage';

const client = new OriginStorageClient({...});

// Connect to the iframe and setup event listeners
client.onConnect(() => {
    console.log("Connected to storage iframe!");
});

// Listen for changes in the storage
client.onChange((data) => {
    console.log('Data changed:', data);
});
unadlib commented 6 months ago

If it's only for use within a Chrome extension, it can actually abide by the same-origin policy of an iframe with the URL of the Chrome extension. You actually don't need to use this library.

Am I misunderstanding something?

petr24 commented 6 months ago

Background pages, and extension pages all have the url origin of "chrome://extensionId", however context scripts exist within the context of whatever url they're running on ie example.com.

There are two ways for context script to share data with the rest of the extension. Use "chrome.storage" api, or create an iframe and inject that as a context script.

Chrome storage is great for key/value data. However if the data structure is even remotely complex or needs high frequency of CRUD ops it becomes a headache.

Using an iframe solves the immediate issue, however UI elements like dropdown menus get cut off, so then you'd have to have hacks of growing and shrinking iframe bounds. The other issue with an iframe is my chrome extension has to interface with the page it's on so being an iframe prevents that.