CSP阻止内联/外部脚本注入时，Chrome Extension ReactJS项目如何解决？

根本原因 #

Chrome 扩展默认的内容安全策略（CSP）会拦截两类你当前用到的脚本写法：

• 禁止加载未列入白名单的外部远程脚本，你直接在popup.html中引入unpkg的cdn脚本会被直接拦截
• 禁止在html中插入内联script逻辑，你写在popup.html里的初始化代码也会触发CSP报错

合规解决方案（推荐） #

本地引入依赖的方式无需复制源码，也不需要修改CSP，完全符合Chrome扩展开发和发布规范，适配Manifest V2/V3所有版本：

• 第一步：项目中安装对应版本的依赖包
  npm install ringcentral-c2d@1.0.0
• 第二步：在popup.jsx中引入依赖并初始化，示例代码如下：

import { useEffect } from 'react'
import RingCentralC2D from 'ringcentral-c2d'

function Popup() {
  useEffect(() => {
    const clickToDialInject = new RingCentralC2D()
    // 监听拨号事件
    clickToDialInject.on(
      RingCentralC2D.events.call,
      (phoneNumber) => {
        console.log('Click To Dial:', phoneNumber)
        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
          const currentTabId = tabs[0].id
          chrome.tabs.sendMessage(currentTabId, { clickToCall: phoneNumber })
        })
      }
    )
    // 监听短信事件
    clickToDialInject.on(
      RingCentralC2D.events.text,
      (phoneNumber) => {
        console.log('Click To SMS:', phoneNumber)
        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
          const currentTabId = tabs[0].id
          chrome.tabs.sendMessage(currentTabId, { clickToSMS: phoneNumber })
        })
      }
    )
    // 组件卸载时销毁实例避免内存泄漏
    return () => clickToDialInject.destroy()
  }, [])

  // 原有popup组件渲染逻辑
  return <div>你的popup页面内容</div>
}

export default Popup

• 第三步：删除popup.html中你之前插入的所有外部script标签和内联script代码即可。

可选方案（仅Manifest V2测试用） #

如果你一定要用远程cdn引入的方式，且你的扩展使用Manifest V2开发，可以通过修改manifest.json的CSP配置放行对应的cdn域名：

{
  "manifest_version": 2,
  // 其他原有配置
  "content_security_policy": "script-src 'self' https://unpkg.com; object-src 'self'"
}

注意：Manifest V3版本已经禁止公开发布的扩展加载任何外部远程脚本，该方案在V3下仅企业政策托管的扩展可用，公开发布的扩展请勿使用。

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