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?