How to allow chrome extension to access his path and files

Question

I'm making an Opera extension and I want to get some images stored in the extension's path.

What this plugin does is, on a specific web page, change the background image URL and some icons to custom icons within the extension.

However, when I run the script, everything becomes invisible, which means it cannot load the image.

Inside the logger I see chrome-extension://invalid/ net::ERR_FAILED but when I log the path it looks normal.

In the manifest.json file, I have webRequest and storage permissions, the plugin also has permissions to read user files, I have dual permissions checked.

Am I missing the permissions that would lock me out? Listing 3 Doesn't it allow changing the background image?

I also tried running the same script on Firefox and everything worked fine.

// get image folder from current plugin path.
let extFolder = chrome.runtime.getURL("images/"); // chrome
//let extFolder = extension.getURL("images/"); // firefox

// should look like: chrome-extension://<id>/images/
console.log(extFolder);

// get element to change.
let board = document.getElementById("board");

// change image.
board.style.backgroundImage = "url('" extFolder "board.png')";

The script I wrote looks like this, why doesn't it work on the opera?

I also tried embedding these images as base64, but since each image is large, not all elements will render the image.

Answer 1

Okay, I figured out where the problem is...it's Listing 3.

The reason it works on Firefox is because I'm using manifest version 2 and Opera uses version 3.