kikko-land / kikko

Powerful SQLite adapter for web, mobile and desktop. Build reactive UI on top of it
https://kikko-doc.netlify.app/
MIT License
134 stars 8 forks source link

Is it possible to use in chrome extension? #106

Open lionelhorn opened 1 year ago

lionelhorn commented 1 year ago

Hello,

I'm trying to make kikko work in a browser extension but without luck so far.

Do you have any pointers or idea if it's compatible? How to make it work?

What I tried so far is to initalize the db from a ServiceWorker / background page.

https://github.com/lionelhorn/kikko-in-browser-extension

With wa-sqlite

https://github.com/lionelhorn/kikko-in-browser-extension/blob/7163528b2152e70d94cacb5ef6ea5c014f63b82b/src/background/index.ts#L29-L38

With wa-sqlite, the first error was

Uncaught (in promise) TypeError: Failed to fetch
    at wa-sqlite-async.mjs:93:285
    at wa-sqlite-async.mjs:93:504
    at wa-sqlite-async.mjs:94:9
    at Object.initialize (index.js:2855:34)
    at ee (initDb.ts:142:25)
    at async index.ts:51:16

I managed to apparently fix that one by adding it to the extension manifest. https://github.com/lionelhorn/kikko-in-browser-extension/blob/6894cc784d93c7b53bc1b3892d8871dad7b84d5f/manifest.config.ts#L34-L40

but then get the following

@kikko-land_wa-sqlite-web-backend.js?v=2af23068:3107 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'apply')
    at e._getSqliteFree (@kikko-land_wa-sqlite-web-backend.js?v=2af23068:3107:44)
    at Factory (@kikko-land_wa-sqlite-web-backend.js?v=2af23068:92:37)
    at Object.initialize (@kikko-land_wa-sqlite-web-backend.js?v=2af23068:5461:17)
    at async ee (@kikko-land_kikko.js?v=2af23068:753:29)
    at async index.ts:46:14

With absurd sql backend.

Uncaught (in promise) ReferenceError: Worker is not defined
    at new Ml (comlink.mjs:298:1)
    at absurdWebBackend.ts:31:31
    at ee (initDb.ts:69:34)
    at async index.ts:52:15
quolpr commented 1 year ago

@lionelhorn it seems to be possible to run it in service worker, regarding https://github.com/jlongster/absurd-sql/issues/54 . It will take a look, hope this week 🙂

lionelhorn commented 1 year ago

@quolpr Thanks for the help.

I dug into it a bit more.

Uncaught (in promise) ReferenceError: Worker is not defined seen in my previous attemps is I think related to the way chrome extension work with their manifest v3 (mv3). Service worker can't spawn new Worker.

So I tried to make it work with a chrome extension using manifest v2. Repro repo : https://github.com/lionelhorn/sqlite-browser-extension-mv2

For all options, wasm files are properly fetched and loaded.

Using wa-sqlite directly, it seems to work.

https://github.com/lionelhorn/sqlite-browser-extension-mv2/blob/main/src/sqlite-backends/wasqlite-direct.ts I get no error in the console.

Using absurdsql backend with kikko

https://github.com/lionelhorn/sqlite-browser-extension-mv2/blob/main/src/sqlite-backends/kikko-absurd.ts

Reading meta...
1c557a3b-6a46-4315-ab4a-56bda75f596e:1 Got meta for db-kikko-absurd.sqlite: undefined
8d4d6ecb-0927-47d8-aa0f-cc80c7a396fc:3 Setting pragma
background.js:15 kikko-absurd Error: Error while executing query: CREATE TABLE IF NOT EXISTS migrations (
          id INTEGER PRIMARY KEY,
          name varchar(20) NOT NULL,
          migratedAt INTEGER NOT NULL
        ) - File has invalid page size. (the first block of a new file must be written first)
    at yn.write (8d4d6ecb-0927-47d8-aa0f-cc80c7a396fc:1:18106)
    at Object.write (8d4d6ecb-0927-47d8-aa0f-cc80c7a396fc:1:14505)
    at Object.write (8d4d6ecb-0927-47d8-aa0f-cc80c7a396fc:3:14622)
    at r (8d4d6ecb-0927-47d8-aa0f-cc80c7a396fc:3:31964)
    at sql-wasm.wasm:0xe5b50
    at sql-wasm.wasm:0xe322a
    at sql-wasm.wasm:0x8aa82
    at sql-wasm.wasm:0x6f49a
    at sql-wasm.wasm:0x3a7cb
    at sql-wasm.wasm:0x58e15

image

The indexdb appears in application storage but I can't run a dummy migration.

Using wa-sqlite backend from kikko

I get the same error message as previously using in extension with manifest v3.

kikko-wasqlite TypeError: Cannot read properties of undefined (reading 'apply')
    at e._getSqliteFree (kikko-absurd-5635e946.js:988:234)
    at Factory (kikko-absurd-5635e946.js:169:36)
    at Object.initialize (kikko-absurd-5635e946.js:4010:23)
    at async ee (kikko-absurd-5635e946.js:5152:29)
    at async startKikkoWaSqlite (kikko-absurd-5635e946.js:5172:16)
    at async background.js:18:9