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")