Chrome 擴展清單 v3 內容安全政策

Question

我正在嘗試在頁面中加載（注入）javascript 代碼。 javascript 文件是擴展的本地文件。 文件路徑是“js/somefile.js”。

const basePath = chrome.runtime.getURL('');
    fetch(chrome.runtime.getURL(filePath), { mode: 'same-origin' }) // <-- important
      .then((_res) => _res.blob())
      .then((_blob) => {
        const reader = new FileReader();
        reader.addEventListener('loadend', (data) => {
          callback(data.currentTarget.result, basePath);
        });
        reader.readAsText(_blob);
      });

const scriptTag = document.createElement('script');
    scriptTag.innerHTML = scriptText;
    scriptTag.type = 'text/javascript';
    const scriptElement = document[injectLocation].appendChild(scriptTag);
    if (removeImmediately) document[injectLocation].removeChild(scriptElement);

我的 web 可訪問資源是：

"web_accessible_resources": [{
    "resources": [
    "js/*.js",
    ],
    "matches": ["<all_urls>"]
  }],

"content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'",
    "sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://www.gstatic.com/' 'https://*.firebaseio.com' 'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src 'self'"
  },

我得到的錯誤是：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Wq/CW2mxkri68TjkuaA0+LnU0capVpyiEuSA5NOVNfU='), or a nonce ('nonce-...') is required to enable inline execution.

Answer 1

您可以通過更改scriptTag.innerHTML = scriptText;來解決內聯執行錯誤。 到scriptTag.src = chrome.runtime.getURL(filePath); ，無需獲取腳本。 Manifest v3 似乎只允許將 static 腳本注入頁面上下文。

如果您想運行動態源腳本，我認為這可以通過讓 static（已經受信任）腳本獲取遠程腳本然后對其進行評估來實現。

更新：帶有清單 v3 的示例擴展，它注入了在頁面上下文中運行的腳本。

# myscript.js
window.variableInMainContext = "hi"

# manifest.json
{
  "name": "example",
  "version": "1.0",
  "description": "example extension",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "run_at": "document_start",
      "js": ["inject.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [ "myscript.js" ],
      "matches": [ "https://*/*" ]
    }
  ]
}

# inject.js

const nullthrows = (v) => {
    if (v == null) throw new Error("it's a null");
    return v;
}

function injectCode(src) {
    const script = document.createElement('script');
    // This is why it works!
    script.src = src;
    script.onload = function() {
        console.log("script injected");
        this.remove();
    };

    // This script runs before the <head> element is created,
    // so we add the script to <html> instead.
    nullthrows(document.head || document.documentElement).appendChild(script);
}


injectCode(chrome.runtime.getURL('/myscript.js'));

Answer 2

下載腳本文件並將其放在您的項目中以使其成為本地文件。 它解決了我的內容安全策略問題。

Chrome 擴展清單 v3 內容安全政策

問題描述

2 個解決方案

解決方案1
17 已采納 2021-09-28 11:38:43

解決方案2
0 2022-05-28 03:57:01

Chrome 擴展清單 v3 內容安全政策

問題描述

2 個解決方案

解決方案1 17 已采納 2021-09-28 11:38:43

解決方案2 0 2022-05-28 03:57:01

解決方案1
17 已采納 2021-09-28 11:38:43

解決方案2
0 2022-05-28 03:57:01