Chrome扩展Manifest V3中oninput内联事件触发CSP错误求助

翻译后的错误信息 #

拒绝执行内联事件处理器，因为它违反了以下内容安全策略指令："script-src 'self'"。要启用内联执行，需要使用'unsafe-inline'关键字、哈希值（'sha256-...'）或随机数（'nonce-...'）。请注意，除非存在'unsafe-hashes'关键字，否则哈希值不适用于事件处理器、样式属性和javascript:导航。
popup.html:67 拒绝执行内联事件处理器，因为它违反了以下内容安全策略指令："script-src 'self' 'wasm-unsafe-eval'"。要启用内联执行，需要使用'unsafe-inline'关键字、哈希值（'sha256-...'）或随机数（'nonce-...'）。请注意，除非存在'unsafe-hashes'关键字，否则哈希值不适用于事件处理器、样式属性和javascript:导航。

问题本质 #

Manifest V3 并非不支持oninput事件，而是其默认内容安全策略（CSP）严格禁止内联脚本（包括HTML元素上的oninput这类内联事件处理器），这是Manifest V3为提升扩展安全性强制推行的规则，和oninput事件本身无关。

不建议的临时绕过方案 #

虽然可以在manifest.json的content_security_policy字段中添加'unsafe-inline'来规避限制，但这会大幅降低扩展的安全性，违背Manifest V3的设计初衷，甚至可能导致扩展无法通过Chrome应用商店审核，因此绝对不推荐使用。

标准合规的实现方式 #

移除HTML中的内联oninput属性，改为在JavaScript中通过addEventListener绑定事件，具体代码修改如下：

修改后的HTML #

<input type="text" id="durationtimestamp" value="00:00" required="required" style="width:35px;">

对应的JavaScript（建议放在单独的popup.js文件中） #

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const inputElem = document.getElementById('durationtimestamp');
  inputElem.addEventListener('input', function() {
    durationtimestamp(this.value);
  });
});

// 你的原有处理函数
function durationtimestamp(value) {
  // 此处编写你的业务逻辑代码
}

这种实现方式完全符合Manifest V3的CSP规则，既能正常触发input事件，又能保证扩展的安全性。

内容的提问来源于stack exchange，提问作者Markus