Chrome Extension Manifest V3嵌入Twitter Timeline的问题及解决方案咨询

你遇到的问题是Manifest V3的内容安全策略（CSP）默认禁止加载外部脚本，所以直接用Twitter官方的脚本代码会触发CSP错误。下面是两种可行的解决办法：

方法一：调整扩展的CSP配置 #

在manifest.json里修改content_security_policy字段，允许加载Twitter的脚本资源：

{
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://platform.twitter.com; object-src 'none'; style-src 'self' 'unsafe-inline' https://platform.twitter.com;"
  },
  // 其他扩展配置项
}

配置后，再把Twitter官方的嵌入代码放到你的扩展页面中即可。注意'unsafe-inline'是因为Twitter的widgets.js会生成内联样式，必须允许才能正常渲染时间线。

方法二：使用iframe嵌入（更稳妥） #

直接用iframe加载Twitter时间线，这样iframe的运行上下文不受扩展CSP限制，无需修改扩展的CSP配置。可以用类似下面的代码：

<iframe 
  src="https://platform.twitter.com/widgets/timeline?source=embed&screen_name=TwitterDev" 
  width="300" 
  height="400" 
  frameborder="0" 
  scrolling="no"
  allowtransparency="true">
</iframe>

你可以通过Twitter的嵌入工具调整尺寸、样式等参数，生成适合的iframe代码后直接放到扩展页面里。

内容的提问来源于stack exchange，提问作者Elias B.