0

I am trying to use user-session recording tools (like FullStory or Livesession) in my Chrome Extension.

The way those tools work is that during the session capture, they make a copy of the page CSS to recreate the playback in the future.

The problem is that they don't collect my content script's injected CSS file:

  "content_scripts": [
    {
      "matches": [...],
      "js": [
        "build/content.js"
      ],
      "css": [
        "build/content.css"
      ]
    }
  ],

so the recording output is all messed up and broken.

I thought that it may be due to the CSS being injected after the JS is executed but I don't think this is the case according to this article.

How can I make it work?

amiregelz
  • 1,833
  • 7
  • 25
  • 46
  • It might be that you installed the session recording extension before installing your own extension, so the former is executed before the latter. But that's just a guess, you'll have to experiment to find out. Just from reading your question, it's hard to tell what gets executed in which order, because you didn't provide any code. – Thomas Mueller Nov 26 '22 at 07:35
  • 1
    The content script's `css` is not a part of DOM tree, it's only in the internal CSSOM, and there's no way to access it from normal JS. The only way to do it is to use `chrome.debugger` API and then send the same command devtools sends to collect all stylesheets including the internal ones. A workaround for you would be to drop `css` from manifest.json and instead add the file via a `link` element into the page in your content.js. – wOxxOm Nov 26 '22 at 07:40
  • Thank you @wOxxOm - the workaround with injecting the CSS directly into the `head` of the HTML worked!! Is there a problem with keeping it also in the manifest.json and also injecting it? (in case the injection fails for any reason - I don't want it to cause any issue with the extension as it's essentially only there for debugging) – amiregelz Nov 26 '22 at 12:49

0 Answers0