Chrome Extension Content Policy Directive Error

Question

I published a Chrome extension that lets the user change the background image on a certain website using the image's url which worked fine, however, recently it stopped work with the following error. It was working even after months in the store.

*Refused to load the image 'https://preview.redd.it/5qz0nzspaq481.png?auto=webp&s=767213b884285c0caba56175ac4a231d2764871b' because it violates the following Content Security Policy directive: "img-src 'self' data: *.cloudfront.net *.google-analytics.com .kaptcha.com

background.js

var inputParent = document.getElementsByClassName(
  "nav rbx-navbar hidden-xs hidden-sm col-md-5 col-lg-4"
)[0];
// Dropdown button
var dropdownContainer = document.createElement("div");
var dropdownBtn = document.createElement("a");
var dropdownChild = document.createElement("div");

// Dp Container
dropdownContainer.id = "dropdown";
dropdownContainer.className = "cursor-pointer";

// Dp Button
dropdownBtn.id = "dropbtn";
dropdownBtn.className = "font-header-2 nav-menu-title text-header";
dropdownBtn.innerText = "Theme";
// Menu
dropdownChild.id = "myDropdown";
dropdownChild.className = "dropdown-content";

var newDiv = document.createElement("div");
newDiv.className = "font-header-2 nav-menu-title text-header";
newDiv.innerText = "Theme";

// Appends
inputParent.appendChild(dropdownContainer);
inputParent.appendChild(dropdownBtn);
inputParent.appendChild(dropdownChild);
// Input
var input = document.createElement("input");
input.id = "theme-url-input";
input.type = "text";
input.placeholder = "Paste image URL here...";
//input.value = "Image URL...";

// Save
var save = document.createElement("button");
save.id = "save-url";
save.innerText = "Save";

// Update
var update = document.createElement("button");
update.id = "submit-url";
update.innerText = "Update";

dropdownChild.appendChild(input);
dropdownChild.appendChild(save);
dropdownChild.appendChild(update);

document.getElementById("dropbtn").onclick = function () {
  document.getElementById("myDropdown").classList.toggle("show");
};
// Close the dropdown menu if the user clicks outside of it
window.onclick = function (e) {
  if (
    !e.target.matches("#dropbtn") &&
    !e.target.matches("#myDropdown") &&
    !e.target.matches("#theme-url-input") &&
    !e.target.matches("#submit-url") &&
    !e.target.matches("#save-url")
  ) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains("show")) {
        openDropdown.classList.remove("show");
      }
    }
  }
};
// Change background and Save
document.getElementById("save-url").onclick = function () {
  var value = input.value;
  var background = document.getElementsByClassName("container-main")[0];
  // Set background URL
  chrome.storage.sync.set({ url: value }, function () {
    if (value == "") {
      background.style.backgroundImage =
        "linear-gradient(transparent 40%, #20283c 90%),url(" + url + ")";
    }
    console.log(url);
  });
};

var background = document.getElementsByClassName("container-main")[0];
// Get background URL
chrome.storage.sync.get("url", function (data) {
  background.style.backgroundImage =
    "linear-gradient(transparent 40%, #20283c 90%),url(" + data.url + ")";
});

document.getElementById("submit-url").onclick = function () {
  if (input.value !== "") {
    location.reload();
    return false;
  }
};

Manifest

// Manifest

{
    "manifest_version": 3,
    "name": "extension name
",
    "description":  "some desc.",
    "version": "1.2.1",
    "icons": {"128": "icon_128.png"},
    "permissions": [
        "storage"
    ],
    "content_security_policy": {
        "extension_pages": "img-src 'self' data: *.cloudfront.net *.google-analytics.com .kaptcha.com *.redd.it"
      },
    "content_scripts": [{
        "css": ["style.css","style.scss"],
        "js": ["content.js","background.js"],
        "matches": ["https://www.website.com/*"]
    }],
    "action": {
        "default_icon": "icon_128.png",
        "default_title" : "Extension",
        "default_popup" : "popup.html"
    }
}

Answer 1

This is because of CSP in your manifest file. Check your manifest.json file and look for the key content_security_policy. If you're on manifest V2, your manifest.json should look like this:

{
  "name": "<your_extension_name>",
  "description": "<your_extension_description>",
  "version": "1.0",
  "manifest_version": 2,
  ...
  ...
  "content_security_policy": "<your CSP policy>"    <--- you need to edit this
  ...
}

While if you're on manifest V3, manifest.json would look like this for you:

{
  "name": "<your_extension_name>",
  "description": "<your_extension_description>",
  "version": "1.0",
  "manifest_version": 3,
  ...
  ...
  "content_security_policy": {
    "extension_pages": "<your CSP policy>"         <--- you need to edit this
  }
  ...
}

You're trying to load an image which is from this origin: https://preview.redd.it which is a violation of your existing CSP. Edit the line highlighted in above example files to include src from *.redd.it. So the new policy for img-src should be:

"img-src 'self' data: *.cloudfront.net *.google-analytics.com .kaptcha.com *.redd.it

Edit: Assuming your extension loads only images from different origins. Updated policy that should work:

default-src 'self'; connect-src * data: blob: filesystem:; style-src 'self' data: 'unsafe-inline'; img-src 'self' data: *.cloudfront.net *.google-analytics.com .kaptcha.com *.redd.it; frame-src 'self' data:; font-src 'self' data:; media-src * data: blob: filesystem:;