CODEWITHSUNDEEP
google-chrome-extension
sparkle
sparkle

Reputation: 7398

Manifest v3 Resources must be listed in the web_accessible_resources

I get this error even if "image/copy.svg" is properly declared in the manifest.json

Denying load of chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

If I go to chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg I can successfully see the loaded image.

css/style.css

.copy-icon{
    content:url('chrome-extension://__MSG_@@extension_id__/images/copy.svg');
    height: 16px;
    width: auto;
    margin-right: 0px;
}

html

<button alt="Copy to clipboard" class="clipboard" data-clipboard-text="TEXT">
  <img class="copy-icon"></img>
</button>

manifest.json

    "manifest_version": 3,
    "content_scripts": [
    {
      "matches": ["https://*.example.com/*"], 
      "js": ["contents/results.js"],
      "css": ["css/style.css"],
      "run_at": "document_end"
    }
  ],
    "web_accessible_resources": [{
        "resources": ["images/copy.svg"],
        "matches": [],
       "extension_ids": []
      }],

Upvotes: 29

Views: 32407

Answers (2)

pxeba
pxeba

Reputation: 1806

The previous solution didn't work for me. The file did not load. This below was an example that worked:

https://stackoverflow.com/a/11554116/12975352

e.g:

    "web_accessible_resources": [{
        "resources": ["content.css"],
        "matches": ["<YOUR_URL>"]
      }],
    "content_scripts": [{
        "matches": ["<YOUR_URL>"],
        "js": ["content.js"],
        "css": ["content.css"]
    }]

Upvotes: 0

woxxom
woxxom

Reputation: 73846

The matches key should specify where to expose these resources.
You can use <all_urls> to expose them everywhere.

"web_accessible_resources": [{
  "resources": ["images/copy.svg"],
  "matches": ["<all_urls>"],
}],

Upvotes: 62

Related Questions