Chrome扩展出现Content Security Policy报错无法执行内联脚本如何解决

问题原因 #

Chrome扩展的默认内容安全策略（CSP）禁止执行内联JavaScript，你遇到的两个报错都和这个规则有关：

• 第一个报错是因为你把JS代码直接写在HTML的<script>标签内，属于内联脚本，不符合CSP的script-src 'self'要求
• 第二个报错是因为内联脚本中绑定的事件处理逻辑也被CSP拦截

解决方法 #

1. 拆分内联脚本为独立外部文件 #

这是最推荐的兼容方案，同时支持Manifest V2和V3版本的扩展，不需要修改CSP配置放宽安全规则。
你需要在扩展目录下新建一个独立的JS文件（比如命名为popup.js），把原来写在<script>标签内的代码全部移动到这个文件里，再在HTML中引用外部脚本即可。

2. 修正配置与代码 #

调整后的HTML代码

<header>
    <div class="d_button">
        <a id="download_b" href="files" download="video.mp4">Download</a>
    </div>
</header>
<!-- 引用外部独立脚本，符合CSP的self规则 -->
<script src="popup.js"></script>

修正逻辑后的popup.js代码

你原来的代码存在语法错误和未定义变量问题，同步修正如下：

document.getElementById("download_b").addEventListener("click", search4vid);
function search4vid(e) {
    // 匹配后缀为mp4的资源，忽略大小写
    const mp4Regex = /\.mp4$/i;
    // 筛选所有mp4格式的资源链接
    const mp4List = performance.getEntriesByType('resource')
        .filter(item => mp4Regex.test(item.name))
        .map(item => item.name);
    
    if (mp4List.length > 0) {
        const targetMp4 = mp4List[0];
        const downloadBtn = document.getElementById('download_b');
        downloadBtn.setAttribute('href', targetMp4);
        // 自动提取文件名作为下载文件名
        const fileName = targetMp4.split('/').pop();
        downloadBtn.setAttribute('download', fileName);
        downloadBtn.innerText = `下载 ${fileName}`;
    } else {
        alert('当前页面未检测到MP4资源');
        // 无资源时阻止a标签默认跳转行为
        e.preventDefault();
    }
}

3. 额外注意事项 #

如果你的脚本是在扩展popup中运行，popup的JS运行在扩展独立上下文，无法直接获取当前打开网页的资源列表，需要额外配置内容脚本（content script）注入到目标网页，拿到资源列表后通过扩展消息API传递给popup使用。 #

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