Volodymyr Boiko
Volodymyr Boiko

Reputation: 31

How to add a FullStory to an extension with manifest v3

I am trying to add a FullStory to my extension.

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'"
  }
}

It works when I run it in dev mode as a web page but when I run it as an extension I get an error:

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.

How can I fix it?

Upvotes: 2

Views: 240

Answers (0)

Related Questions