How do I run the Fancytree jQuery plugin in a Chrome extension with strict Content Security Policy directives?

98 Views Asked by At

I am trying to run a local version of the Fancytree jQuery plugin, installed with Yarn and imported with Webpack, in a webpage loaded as a Chrome extension.

Chrome throws two errors of the form:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-[...]'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

The first error is caused by a call to the insertBySelector function (at the line calling .appendChild()):

function insertBySelector(insert, style) {
  var target = getTarget(insert);

  if (!target) {
    throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
  }

  target.appendChild(style);
}

The second one by a call to the styleTagTransform function (also at the line calling .appendChild()):

function styleTagTransform(css, styleElement) {
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = css;
  } else {
    while (styleElement.firstChild) {
      styleElement.removeChild(styleElement.firstChild);
    }

    styleElement.appendChild(document.createTextNode(css));
  }
}

How can I solve this issue without relaxing the CSP directives?
Do I need to modify the Fancytree plugin? If so, in which way?
Do I have other options?

0

There are 0 best solutions below