Gmail Chrome 擴展“拒絕加載腳本，因為它違反了以下內容安全策略指令：“script-src 'self'”。Manifest v3

Question

我已經進入了 StackOverflow 的兔子洞，我發現類似的問題要么不起作用，要么看起來不安全，所以這里還有一個。

我的目標

我想創建一個適用於 Gmail 的 Google Chrome 擴展程序。當有人撰寫新的 email 時，它會向 email 構建器添加一個小復選框。 當有人選中此框時，我只想控制台日志“已選中”。 看起來像這樣

方法與問題

最簡單的方法就是為“onchange”創建一個屬性並調用 function。像這樣：

mauticCheckbox.setAttribute('onchange', 'test()')

但這會遇到錯誤：“拒絕執行內聯事件處理程序，因為它違反了以下內容安全策略指令：”script-src 'report-sample' 'nonce-isArkHmhi5JlS1U0S0z2uA' 'unsafe-inline' 'strict-dynamic' https： http：'不安全評估'“。”

我讀到其他類似的問題，您可以禁用“不安全內聯”，但它不太安全。 這可能是最后的手段，但我寧願不這樣做。

所以我一直在研究，另一種方法似乎是在 head 標簽中添加 JavaScript。 我的代碼沒有 HTML 文件，因為我要添加到 Gmail 組成 window，所以我的代碼是這樣的：

window.onload=function() {
    addJavaScriptHead()
}

function addJavaScriptHead() {
    let head = document.getElementsByTagName('head')[0];
    let script = document.createElement('script');
    script.type = 'module';
    script.onload = function() {
        listenForClick(); // My function from background.js
    }
    script.src = 'background.js';
    head.appendChild(script);
}

但遺憾的是，這會遇到類似（但不同）的錯誤消息：“拒絕加載腳本‘https://mail.google.com/mail/u/0/background.js’，因為它違反了以下內容安全策略指令：“腳本源‘自我’”。

當此元素從未單擊更改為已單擊時，我如何調用 function，反之亦然？

提前致謝：）

Answer 1

首先，您必須在 manifest.json 的web_accessible_resources中設置您的文件

"web_accessible_resources" : { 
   "resources": ["path/to/background.js"],
   "matches": ["<all_urls"]
}

然后，將腳本 src 更改為：

script.src = chrome.runtime.getURL("path/to/background.js")