'unsafe-eval' on chrome extension

Question

I am trying to run the following:

chrome.tabs.onCreated.addListener(function (tab){
    if (tab.url.indexOf(".salesforce.com/") != -1 || tab.url.indexOf(".force.com/") != -1) {
        chrome.tabs.executeScript(tab.id, {
            "file": "loadScript.js"
        }, function () {
            console.log("Script Executed .. ");
        });
    } else {
        var wrongTab = chrome.i18n.getMessage("wrongTab");
        console.log(wrongTab);
        alert(wrongTab);
    }
});

Which should (in theory), on page load run the loadScript.js file.... the loadScript.js file is as follows, this should append a file to the running page, not to the background page as it is at the moment:

/* Create a scriipt element in head of HTML and put /soap/ajax/31.0/connection.js in the src  */
var connectJsUrl = "/connection.js";

function loadScript(url, callback) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.src = url;
    var done = false;
    script.onload = script.onreadystatechange = function() {
        if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
            done = true;
            callback();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
        }
    };
    head.appendChild(script);
}

loadScript(connectJsUrl, function() {
    console.log("Script Confirmed...")
});

/* Check to see if the file have been appended correctly and works correctly */
var JSFile = "chrome-extension://" + window.location.host + connectJsUrl;
var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
if (req == null) {
    console.log("Error: XMLHttpRequest failed to initiate.");
};
req.onload = function() {
    try {
        eval(req.responseText);
    } catch (e) {
        console.log("There was an error in the script file.");
    }
};
try {
    req.open("GET", JSFile, true);
    req.send(null);
} catch (e) {
    console.log("Error retrieving data httpReq. Some browsers only accept cross-domain request with HTTP.");
};

I am still a newbie to Chrome Extensions and .js so excuse me if I have made a stupid mistake :)

All I am getting from this is the following: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Answer 1

To prevent cross site scripting Google has blocked the eval function.

To solve this add this code to the manifest.json

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

Please comment if you need further explanation

Answer 2

IMPORTANT

As mentioned before add this to your manifest.json:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Make sure you set the "manifest_version" to 2 aka

//this
"manifest_version": 2

Chrome Extentions that work on manifest_version 3 don't support unsafe evals for some security reasons.

Also make sure to reload your extention.

Answer 3

For Manifest V3

You cannot run code with unsafe eval in manifest v3 , if you are using any bundlers like webpack or vite , you can change the code not to use eval or check package bundle if it contains any eval , here are the list of syntax you are not suppose to use in manifest 3

• eval()
• setTimeout()
• setInterval()
• Function()
• setImmediate()
• execScript()

It is not safe to add content_security_policy with unsafe-eval as site may be prone to XSS attack

But If you are using any wasm code by chance then below config will work to avoid eval for manifest 3

"content_security_policy": {
   "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}

If you are using any iframe add below code also

"content_security_policy": {
   "extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
   "sandbox":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}