Chrome extension image problem

Hello everyone,

I am trying to make my first Chrome extension. It creates a popup window that needs to have certain images on it, which are stored in the extension folder. I have this code for putting an image in the popup window:

url = chrome.runtime.getURL("SplinterlandsExtensionLowerBarI.png");

img = '<img src="'+url+'">';

popup.document.write(img);

The image does not appear, though I get no error message. Can anyone tell me what I’m doing wrong?

If your code is correct it might be something on their side.

How do I protect a picture from being copied online?

Here’s our collection of tips and best practices to help you prevent your images from being copied or stolen online.

  1. Register the copyright to your work. …
  2. Use a copyright notice. …
  3. Watermark your work. …
  4. Use a digital signature. …
  5. Include hidden foreground layers. …
  6. Edit EXIF data. …
  7. Use low-resolution images. …
  8. Adjust the color profile.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

OK, so if nobody here knows that much about this part of Javascript and Chrome extensions, can anyone recommend a place that could answer my question?

If you add a console.log statement like the following, can you tell us what gets displayed in the console?

url = chrome.runtime.getURL("SplinterlandsExtensionLowerBarI.png");
console.log('url = ' + url);
img = '<img src="'+url+'">';

popup.document.write(img);

Also, what does your manifest.json file look like? Better yet, do you have your full code available on GitHub, so we can take a look at it? That would allow us to fully test your code and more than likely be able to give you a better idea of how to proceed.

Hello,

And thanks. The url I get is:

chrome-extension://blbfolkanielclmaihoeanjhnimjbdlk/SplinterlandsExtensionLowerBarI.png

This is my manifest:

{
 "name": "Splinterlands Battle Advisor",
 "version": "1.0.0",
 "description": "A tool to add functionality to Splinterlands game.",
 "manifest_version": 3,
 "author": "Elaris999",
 "permissions": ["storage", "declarativeContent", "activeTab", "scripting"],
 "host_permissions": [""],
 "action":{
 "default_icon": "battle report button.png",
 "default_popup": "battle advisor.html",
 "default_title": "Splinterlands Battle Advisor"
 }
}

I do not have the full code available on GitHub or anywhere else, as I hope to maybe monetize it, and so do not want to go giving almost-working code to people who are better at this sort of programming than I am.