如何为Manifest V3扩展集成FullStory并解决加载报错

问题描述 #

在Manifest V3版本的浏览器扩展中集成FullStory时，开发模式下运行正常，但扩展实际运行时触发CSP相关报错，无法加载FullStory的脚本。

相关代码 #

index.tsx #

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import * as FullStory from '@fullstory/browser';
import { MemoryRouter as Router, Routes, Route } from "react-router-dom";
import App from "./App";

FullStory.init({ orgId: 'my-id' });

const container = document.getElementById("root");
if (!container) throw new Error("Failed to find the root element");
const root = ReactDOM.createRoot(container);

root.render(
  <React.StrictMode>
    <Router> 
      <Routes>
         <Route path="/*" element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

manifest.json #

{
  "name": "My Extension",
  "description": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "background": {
    "service_worker": "./static/js/background.js"
  },
  "permissions": [
    "storage",
    "activeTab",
    "tabs",
    "identity",
    "idle",
    "management",
    "notifications",
    "power",
    "topSites",
    "webNavigation",
    "webRequest",
    "alarms"
  ],
  "host_permissions": ["https://example.com/*"],
  "icons": {
    "16": "logo192.png",
    "48": "logo192.png",
    "128": "logo192.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; script-src-elem 'self' https://edge.fullstory.com/s/fs.js; object-src 'self'"
  }
}

报错信息 #

Refused to load the script 'https://edge.fullstory.com/s/fs.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

修复步骤 #

Manifest V3的extension_pages CSP不支持script-src-elem这类细分指令，浏览器会忽略该配置并自动 fallback 到script-src规则，导致FullStory的脚本源未被允许。

修改manifest.json中的CSP配置，将FullStory的脚本源直接添加到script-src中，同时保留原有必要规则：

"content_security_policy": {
  "extension_pages": "script-src 'self' https://edge.fullstory.com/s/fs.js 'wasm-unsafe-eval'; object-src 'self'"
}

修改完成后重新打包并加载扩展，即可解决CSP报错问题，FullStory能正常初始化。

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