My web extension for Firefox utilizes a content script to add HTML to a webpage when a button is clicked. The injected HTML includes an iFrame nested in multiple div elements.
Below is the relevant part of the content script:
var iFrame = document.createElement("iFrame");
iFrame.id = "contentFrame";
iFrame.style.cssText = "width: 100%; height: 100%; border: none;";
iFrame.src = browser.extension.getURL("inject-content/inject.html");
var boxDiv = document.createElement("div");
boxDiv.style.cssText = "left: calc(100% - 390px); position: fixed; top: 0px; width: 390px; z-index: 1;"
var zeroDiv = document.createElement("div");
zeroDiv.style.cssText = "position: fixed; width: 0px; height: 0px; top: 0px; left: 0px; z-index: 2147483647;";
var outerDiv = document.createElement("div");
outerDiv.id = outerDivID;
boxDiv.appendChild(iFrame);
zeroDiv.appendChild(boxDiv);
outerDiv.appendChild(zeroDiv);
document.body.appendChild(outerDiv);
The iFrame's source is an "inject.html" file that contains a script tag linking to a javascript library named "perfect-scrollbar.js". Additionally, there's inline javascript using this library. Here's the link to the perfect scrollbar library: https://github.com/utatti/perfect-scrollbar
Opening the "inject.html" directly in Chrome works fine, but running it through my Firefox extension triggers an error related to Content Security Policy restricting inline scripts.
Error Message: Content Security Policy blocked the loading of a resource ("script-src").
Source: console.log("hello world");
va....
After researching Mozilla's documentation on Content Security Policy, I learned that allowing some inline Javascript by providing a sha-256 hash of the script could resolve the issue. However, even after generating and implementing the hash in the manifest.json file, the error persisted.
I'm seeking a solution to execute inline Javascript without errors. Is it achievable without using a hash? Can I transfer all inline Javascript from "inject.html" into the content script file itself considering Firefox doesn't support import statements? If yes, how can I accomplish this effectively without tools like Babel?