26

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": []
      }],
sparkle
  • 7,530
  • 22
  • 69
  • 131

1 Answers1

54

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>"],
}],
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • 1
    Might be silly question, but Would this prompt user to give access to all sites? – Ajeet Eppakayala Sep 09 '21 at 18:28
  • 3
    No, this feature is about site-to-extension access, not extension-to-sites. – wOxxOm Sep 09 '21 at 19:49
  • 1
    For me the error was I was setting the sources as ./images/copy, get rid of the . since it's not neccesary and it worked for me. – Joseph Astrahan Jun 24 '22 at 19:57
  • So I've tried everything(./content/, /content/, content/), but still get this error: `Denying load of chrome-extension://aimmlilnhffmbohdhgcehalocokocncl/content/templates/menu.html. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.` I'm trying to load an html template and my manifest looks like this `"web_accessible_resources": [ { "matches": [ "" ], "resources": [ "content/templates/main.html" ] } ]` – Mihai Marinescu Jan 18 '23 at 11:57
  • 1
    Don't forget to reload the extension and the tabs after editing manifest.json or the content script. – wOxxOm Jan 18 '23 at 19:10
  • Reload the extension did the trick for me, thanks – Federico Peralta Mar 31 '23 at 19:24