Chrome扩展popup.html加载时注入HTML遇CSP错误求助

嘿，这个坑我之前踩过！Chrome扩展的内容安全策略（CSP）对inline脚本管得特别严，你直接在popup.html里写<script>内嵌代码的方式，刚好违反了它的规则，所以才会弹出那个错误提示。给你两个靠谱的解决办法：

方案一：把脚本移到外部JS文件（最推荐，符合规范） #

这是Chrome扩展官方提倡的做法，完全规避CSP的限制：

1. 先修改你的popup.html，删掉那个内联的<script>标签，换成引入外部脚本：

<!-- popup.html -->
<!-- 记得先引入jQuery，如果还没加的话 -->
<script src="jquery.min.js"></script>
<script src="popup.js"></script>

2. 新建一个popup.js文件，把原来的逻辑放进去：

// popup.js
$(function(){
  $('body').load("login.html");
});

这样改动后，脚本完全符合CSP的script-src 'self'要求，肯定不会再报错了。

方案二：给内联脚本添加CSP允许的哈希（应急用，不推荐长期使用） #

如果你暂时不想动脚本结构，可以用错误提示里给出的哈希值，在扩展的manifest.json里更新CSP配置：

1. 打开manifest.json，找到content_security_policy字段（如果是Chrome扩展V3版本，字段是content_security_policy.extension_pages），把错误里的sha256哈希加进去：

// manifest.json（V2版本示例）
"content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-PjYKV/jd1GXDczCnVop+iWUrSsvAjw3SzEanGI7AbaY='; object-src 'self'"

// 如果是V3版本，写法是：
"content_security_policy": {
  "extension_pages": "script-src 'self' 'unsafe-eval' 'sha256-PjYKV/jd1GXDczCnVop+iWUrSsvAjw3SzEanGI7AbaY='; object-src 'self'"
}

这样CSP就会允许这个特定的内联脚本执行，但要注意：如果以后修改了内联脚本的内容，哈希值也会变，得重新计算更新，所以还是方案一更省心。

另外提醒下：确保你已经在popup.html里正确引入了jQuery，不然$函数会找不到哦～

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