Insert an image in chrome extension

by

There are two possible causes for the problem.

  1. You’re injecting an image with src="logo.png". The inserted image element becomes a part of the page, so the browser does not try to load the image from the extension.
    To fix this problem, use chrome.extension.getURL("https://stackoverflow.com/questions/11804332/logo.png"); to get the absolute URL of the resource.

  2. "manifest_version": 2 is enabled in the manifest file. That disables all resources for external use, by default. When this error occurs, the following message appears in the console:

Not allowed to load local resource: chrome://gbmfhbpbiibnbbgjcoankapcmcgdkkno/logo.png

To solve the problem, add the resource to a whitelist, namely [`”web_accessible_resources”`][3] in the manifest file:

      ...,
      "web_accessible_resources": ["logo.png"]
    }

UPDATE:
chrome.extension.getURL("https://stackoverflow.com/questions/11804332/logo.png")

Deprecated since Chrome 58. Please use runtime.getURL.

More Related Contents:

  1. How can I get the URL of the current tab from a Google Chrome extension?
  2. How to stop CORB from blocking requests to data resources that respond with CORS headers?
  3. How to change chrome packaged app id Or Why do we need key field in the manifest.json?
  4. How can I open my extension’s pop-up with JavaScript?
  5. Since v38, Chrome extension cannot load from HTTP URLs anymore, workaround?
  6. chrome extension mv3 – Modularize service worker js file
  7. Disable developer mode extensions pop up in Chrome
  8. Where does Chrome store extensions?
  9. Is it possible to run Google Chrome in headless mode with extensions?
  10. Using ECMAScript 6
  11. Content script matching top-level domains like all google.*
  12. How to download a CRX file from the Chrome web store for a given ID? [closed]
  13. How to disable (gray out) page action for Chrome extension?
  14. Inject HTML into a page from a content script
  15. chrome.identity User Authentication in a Chrome Extension
  16. Can I modify outgoing request headers with a Chrome Extension?
  17. Is it possible to inject a javascript code that OVERRIDES the one existing in a DOM? (e.g default alert function)
  18. How to access the webpage DOM/HTML from an extension popup or background script?
  19. How do I import scripts into a service worker using Chrome extension manifest version 3?
  20. Disable chrome download multiple files confirmation
  21. Add contextmenu items to a Chrome extension’s browser action button
  22. Google Chrome Extensions – Open New Tab when clicking a toolbar icon
  23. Chrome version 18+: How to allow inline scripting with a Content Security Policy?
  24. What does “http://*/*”, “https://*/*” and “” mean in the context of Chrome extension’s permissions
  25. CORS issue doesn’t occur when using POSTMAN
  26. How can I detect the current tab’s mime type in a Google Chrome extension?
  27. Run script each time Chrome extension icon clicked
  28. Chrome Console SameSite Cookie Attribute Warning
  29. Passing message from background.js to popup.js
  30. Accessing `window`/DOM/HTML of the webpage from the extension

Leave a Comment