You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Chrome扩展引入完整JQuery触发CSP内联脚本错误,调整manifest无效求助

解决Chrome扩展中完整版JQuery触发的CSP内联脚本错误

看起来你遇到的问题核心是:完整版JQuery内部包含了会动态生成内联脚本的逻辑(比如AJAX、动画效果相关模块),而Slim版因为砍掉了这些模块所以能正常运行。Chrome扩展的内容安全政策(CSP)对脚本来源限制极严,哪怕是库内部生成的内联代码也会被拦截,下面给你几个可行的解决办法:


1. 精准配置Manifest的CSP规则,添加正确哈希值

你提到尝试过添加哈希但无效,大概率是哈希值不匹配或者Manifest版本的写法有误:

  • Manifest V2 配置方式
    manifest.json中修改CSP字段,注意替换成控制台错误提示里给出的准确哈希值(每次报错的sha256值对应触发拦截的内联脚本,必须复制当前报错的那个):

    "content_security_policy": "script-src 'self' 'sha256-82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us='; object-src 'self'"
    
  • Manifest V3 配置方式
    V3的CSP规则需要嵌套在content_security_policy.extension_pages下:

    "content_security_policy": {
      "extension_pages": "script-src 'self' 'sha256-82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us='; object-src 'self'"
    }
    

2. 改用官方CDN引入完整版JQuery

如果本地引入的方式始终卡CSP问题,也可以试试从官方CDN加载JQuery——CDN脚本属于外部可信来源,不会触发内联脚本拦截:

  • 先修改index.html中的JQuery引入:
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
  • 再在Manifest的CSP中允许该CDN域名:
    • Manifest V2:
      "content_security_policy": "script-src 'self' https://code.jquery.com; object-src 'self'"
      
    • Manifest V3:
      "content_security_policy": {
        "extension_pages": "script-src 'self' https://code.jquery.com; object-src 'self'"
      }
      

3. 排查自身代码中的内联脚本

除了JQuery内部的逻辑,还要检查你的扩展代码里有没有直接写在HTML中的内联脚本(比如<script>/* 代码 */</script>),如果有的话:

  • 优先把代码移到外部JS文件(比如index.js);
  • 若必须保留,同样给该内联脚本计算哈希并添加到CSP规则中。

补充说明:JQuery Slim版之所以能正常运行,是因为它移除了AJAX、动画效果等会动态生成内联脚本的模块,刚好避开了CSP的内联脚本拦截规则。

内容的提问来源于stack exchange,提问作者Carlos Hernandez

火山引擎 最新活动