CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionchrome-extension-manifest-v3alasql
Mit
Mit

Reputation: 33

Options Page error using alasql when updating to Manifest v3

I am migrating a chrome extension to manifest v3 and keep getting an error in the options page when using alasql.

I get the following error when using any SELECT query.

Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

I tried a including a local copy of alasql.js using the script tag but I am still getting the same error.

options/index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Test</title>
    <script src="../../lib/alasql.js"></script>
    <script src="options.js"></script>
  </head>
  <body>
    <test-app></test-app>
  </body>
</html>

options/options.js

page("/tests", (ctx) => {
  const runAppStore = async () => {
    await store.AppStore.run(ctx);
    store.TestsPageStore.testAction();
  };

  runAppStore();
});

snippet of store.js -- the error occurs on select statement

    alasql("CREATE TABLE test");
    alasql.tables.test.data = test;

    console.log(alasql("SELECT * FROM test"))

manifest.json

{
  "name": "Sample extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Sample extension",
  "homepage_url": "http://sample.com",
  "web_accessible_resources": [
    {
      "resources": [
        "assets/*",
        "lib/*",
        "src/*",
      ],
      "matches": [
        "*://sample.com/*",
        "*://*.sample.com/*",
        "*://example.com/*",
        "*://*.example.com/*",
      ]
    }
  ],
  "background": { "service_worker": "./src/background/workerWrapper.js" },
  "options_page": "./src/options/index.html",
  "permissions": ["cookies", "tabs", "activeTab", "storage", "webRequest", "scripting"],
  "host_permissions": [
        "*://sample.com/*",
        "*://*.sample.com/*",
        "*://example.com/*",
        "*://*.example.com/*",
  ],
  "content_scripts": [
    {
      "matches": [
        "*://sample.com/*",
        "*://*.sample.com/*",
        "*://example.com/*",
        "*://*.example.com/*",
      ],
      "run_at": "document_end",
      "js": [
        "src/content_scripts/cs1/cs1.js",
        "src/content_scripts/cs2/cs2.js",
        "src/content_scripts/cs3/cs3.js",
        "src/content_scripts/cs4/cs4.js",
        "src/content_scripts/cs5/cs5.js",
      ]
    },
    {
      "matches": [
        "*://sample.com/*",
        "*://*.sample.com/*",
        "*://example.com/*",
        "*://*.example.com/*",
      ],
      "run_at": "document_end",
      "js": ["src/content_scripts/auth/index.js"],
      "css": ["lib/font.css"]
    }
  ],
  "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'" }
}

I might be missing an important step in the process of upgrading to v3. I do hope someone can help me figure this out.

Upvotes: 0

Views: 252

Answers (1)

Sweet Tang
Sweet Tang

Reputation: 1

add the files you need to the sandbox property.

"sandbox": {
    "pages": [
      "/html/devtool.html",
      "/html/option.html",
      "/html/popup.html",
      "/html/tab.html",
      "/js/background.js",
      "/js/content.js"
    ]
  }

Upvotes: 0

Related Questions