在background.js Chrome Extention中使用OPFS(Origin Private FileSystem)和SQLite WASM(Worker is not defined error)

vddsk6oq  于 2023-11-21  发布在  SQLite
关注(0)|答案(1)|浏览(157)

我正在尝试使用WASM SQLite获得持久存储。
我在background.js文件中的代码是这样的

const worker = new Worker('./worker.js');
worker.postMessage({ loadSQLite: true });

字符串
但是它从来没有通过工人部分。我得到以下错误。
x1c 0d1x的数据

Uncaught ReferenceError: Worker is not defined

型
所以在做了一些研究之后，我尝试了一些可能的解决方案。有些人说你不能在工作者中产生工作者，有一个子工作者解决方案，但对我来说不起作用（如果它对你有效，请告诉我，但我不能让它工作）。
我想worker.js中的代码并不重要，但我会在那里发布我正在尝试做的事情。

worker.js

import sqlite3InitModule from './lib/@sqlite.org/sqlite-wasm/index.mjs';
const log = (...args) => console.log(...args);
const error = (...args) => console.error(...args);
console.log("worker loaded...");

//@JA - SQLite Database Setup
const start = function (sqlite3) {
    console.log(sqlite3);
    const capi = sqlite3.capi; // C-style API
    const oo = sqlite3.oo1; // High-level OO API
    console.log(`SQLite3 Version ${capi.sqlite3_libversion()} - ${capi.sqlite3_sourceid()}`);
    let db;
    if ('OpfsDb' in oo) {
        db = new oo.OpfsDb('/mydb.sqlite3');
        console.log('The OPFS is available.');
        console.log(`Persisted db = ${db.filename}`);
    } else {
        db = new oo.DB('/mydb.sqlite3', 'ct');
        console.log('The OPFS is not available.');
        console.log(`transient db = ${db.filename}`);
    }

    try{
        db.exec(`CREATE TABLE IF NOT EXISTS results (id INTEGER PRIMARY KEY AUTOINCREMENT, search_name TEXT, strategy_name TEXT, json_data TEXT)`);
    } finally {
        db.close();
    }
}

self.addEventListener('message', (event) => {
    if (event.data.loadSQLite) {
        // Load the SQLite library within the web worker
        sqlite3InitModule({
            print: log,
            printErr: error,
        }).then(function (sqlite3) {
            log('SQLite Done initializing.');
            try {
                start(sqlite3);
            } catch (e) {
                error('Exception:', e.message);
            }
        });
    }
});

型
如果我把它从worker.js外部取出来，这段代码就可以工作，但是它是暂时的，这意味着数据库不会保存！
我的目标是让它使用OPFS进行持久存储，但这被证明是相当困难的，我遇到了一个障碍。
我的目标是让它说The OPFS is available.
来源：https://sqlite.org/wasm/doc/trunk/persistence.md
它说它必须在service worker中工作。我假设background.js是一个service worker，但显然不是，否则它会在那里工作。所以这就是为什么我试图在那里创建一个service worker。
我的manifest文件在这里：

{
    "name" : "__MSG_appName__",
    "short_name": "__MSG_appShortName__",
    "description": "__MSG_appDescription__",
    "version" : "2.0.2",
    "version_name": "2.0.2",
    "manifest_version": 3,
    "default_locale": "en",
    "minimum_chrome_version": "88",
    "permissions": [
        "activeTab",
        "tabs",
        "storage",
        "scripting",
        "unlimitedStorage",
        "declarativeNetRequest",
        "declarativeNetRequestFeedback"
    ],
    "icons": {
        "16": "./assets/img/icon-16.png",
        "32": "./assets/img/icon-32.png",
        "48": "./assets/img/icon-48.png",
        "128": "./assets/img/icon-128.png"
    },
    "background":{
        "service_worker": "background.js",
        "type": "module"
    },
    "action":{
        "default_popup": "./popup.html",
        "default_icons": {
            "16": "./assets/img/icon-16.png",
            "32": "./assets/img/icon-32.png",
            "48": "./assets/img/icon-48.png",
            "128": "./assets/img/icon-128.png" 
        },
        "default_title": "__MSG_appName__"
    },
    "host_permissions": [
        "https://*.tradingview.com/*"
    ],
    "content_scripts": [
        {
            "all_frames": true,
            "matches": [
                "https://*.tradingview.com/*",
                "http://*.tradingtools.software/*"
            ],
            "css": [
                "./css/trading-view.css",
                "./lib/datetimepicker/jquery.datetimepicker.min.css"
            ],
            "js": [
                "./lib/jquery/jquery-3.6.0.min.js",
                "./lib/lodash/lodash.js",
                "./lib/luxon/non-es6-luxon.js",
                "./lib/datetimepicker/jquery.datetimepicker.full.min.js",
                "./js/classes/scanner.js",
                "./js/classes/dialogs.js",
                "./js/classes/queues.js",
                "./js/helpers/helpers.js",
                "./js/helpers/inputs.js",
                "./js/helpers/security.js",
                "./js/helpers/manipulators.js",
                "./js/helpers/strategy.js",
                "./js/helpers/license.js",
                "./js/globals/globals.js",
                "./js/content/tradingview-content-script.js"  
            ],
            "run_at": "document_idle"
        },
        {
            "all_frames": true,
            "matches":["https://*.tradingview.com/*","http://*.tradingtools.software/*"],
            "js":[ "./js/injectors/before.js" ],
            "run_at": "document_start"
        },
        {
            "all_frames": true,
            "matches":["https://*.tradingview.com/*","http://*.tradingtools.software/*"],
            "js":[ "./js/injectors/after.js" ],
            "run_at": "document_end"
        }
    ],
    "web_accessible_resources": [{
        "resources": ["/js/injectors/before_inject.js","/js/injectors/after_inject.js","/js/injectors/page-script.js","/assets/*","workers.js"],
        "matches": ["<all_urls>"]
    }],
    "content_security_policy": {
        "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; worker-src 'self'",
        "sandbox": "sandbox allow-scripts; default-src 'self' 'wasm-unsafe-eval'; frame-src 'self'; worker-src 'self'"
      }
}

型

sqlite

1条答案

按热度按时间
ubof19bj

ubof19bj1#

不能从扩展服务worker启动worker，但可以在offscreen document中创建一个
至于在Chrome扩展中使用OPFS运行SQLite，你可以在屏幕外的文档中这样做。这里有一个例子。
您也可以克隆此存储库并运行示例-https://github.com/clmnin/sqlite-opfs-mv3

manifest.json

{
  "manifest_version": 3,
  "name": "MV3 Sqlite OPFS Example",
  "version": "1",
  "description": "MV3 Sqlite OPFS Example",
  "background": {
    "service_worker": "index.js",
    "type": "module"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'"
  },
  "permissions": [
    "offscreen"
  ]
}

字符串

后台服务工作者

index.ts

console.log('bg ready');

let creating: Promise<void> | null;
async function setupOffscreenDocument(path: string) {
  // Check all windows controlled by the service worker to see if one
  // of them is the offscreen document with the given path
  if (await chrome.offscreen.hasDocument?.()) return;

  // create offscreen document
  if (creating) {
    await creating;
  } else {
    creating = chrome.offscreen.createDocument({
      url: chrome.runtime.getURL(path),
      reasons: [
        chrome.offscreen.Reason.WORKERS || chrome.offscreen.Reason.BLOBS,
      ],
      justification: "To run web worker to run sqlite",
    });
    await creating;
    creating = null;
  }
}

setupOffscreenDocument("index.html");

型

离屏文档

index. html

<!DOCTYPE html>
<script type="module" src="./index.ts"></script>

型

index.ts

const worker = new Worker(
  new URL("./worker.js", import.meta.url),
  { type: "module" },
);
worker.onmessage = function ({ data }) {
  switch (data.type) {
    case 'log':
      console.log(`Message: ${data.payload.args}`);
      break;
    default:
      console.log(`ERROR: Unhandled message: ${data.type}`);
  }
};

型

worker.js

import sqlite3InitModule from '@sqlite.org/sqlite-wasm';

const logHtml = function (cssClass, ...args) {
  postMessage({
    type: 'log',
    payload: { cssClass, args },
  });
};

const log = (...args) => logHtml('', ...args);
const error = (...args) => logHtml('error', ...args);

const start = function (sqlite3) {
  const capi = sqlite3.capi; // C-style API
  const oo = sqlite3.oo1; // High-level OO API
  log('SQLite3 version', capi.sqlite3_libversion(), capi.sqlite3_sourceid());
  let db;
  if ('OpfsDb' in oo) {
    db = new oo.OpfsDb('/mydb.sqlite3');
    log('The OPFS is available.');
    log('Persisted db =', db.filename);
  } else {
    db = new oo.DB('/mydb.sqlite3', 'ct');
    log('The OPFS is not available.');
    log('transient db =', db.filename);
  }

  try {
    log('Create a table...');
    db.exec('CREATE TABLE IF NOT EXISTS t(a,b)');
    log('Insert some data using exec()...');
    let i;
    for (i = 20; i <= 25; ++i) {
      db.exec({
        sql: 'INSERT INTO t(a,b) VALUES (?,?)',
        bind: [i, i * 2],
      });
    }
    log("Query data with exec() using rowMode 'array'...");
    db.exec({
      sql: 'SELECT a FROM t ORDER BY a LIMIT 3',
      rowMode: 'array', // 'array' (default), 'object', or 'stmt'
      callback: function (row) {
        log('row ', ++this.counter, '=', row);
      }.bind({ counter: 0 }),
    });
  } finally {
    db.close();
  }
};

log('Loading and initializing sqlite3 module...');
sqlite3InitModule({
  print: log,
  printErr: error,
}).then(function (sqlite3) {
  log('Done initializing. Running demo...');
  try {
    start(sqlite3);
  } catch (e) {
    error('Exception:', e.message);
  }
});

型

赞(0）分享  回复(0）举报  2023-11-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com