Is there some addon to inject image from local disk to canvas?

Hello I look for addon, which would upload
and inject some file from my disk to site.
I want to draw sketch on canvas using
it with pen. The problem is that my drawing
abilities are very bad, so I need to redraw the
image. Do you know about such addon
or would it be neccessary to make one?
I just asked LLM and it answer it cannot help to inject image for security reasons.

I have tried to write some code using chatGPT but I did not manage to make it working. I got error that the connection was not established.

The addon should work like this:
I open site with canvas to draw (see the manifest). I open the image JPG in background script:
const tabTitleContains = "(JPEG obr";
translates as
const tabTitleContains = "(JPEG image";


// Function to check if URL is an image
function isImageURL(url) {
  const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp"];
  const urlExtension = url.split(".").pop().toLowerCase();
  return imageExtensions.includes(urlExtension);

// Handling messages from the content script
const tabTitleContains = "(JPEG image";
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.command === "getLatestImage") {
    // Get all tabs in the current window
    browser.tabs.query({ currentWindow: true }).then((tabs) => {
      let foundTabId = null;

      // Iterate through all tabs and look for a title containing "(JPEG image)"
      for (const tab of tabs) {
        if (tab.title.includes(tabTitleContains)) {
          // Tab with the title "(JPEG image)" was found
          foundTabId =;
          console.log("Found tab with image:", tab.title);

          // Get the URL of the page in the tab
          const tabUrl = tab.url;

          // If it's an image, send the URL back to the content script
          if (isImageURL(tabUrl)) {
            browser.tabs.sendMessage(, { image: tabUrl });
          break; // End the loop since we found the desired tab

      // Send a message back with the tab number
      if (foundTabId !== null) {
        sendResponse({ tabId: foundTabId });
      } else {
        sendResponse({ error: "Image with the label '(JPEG image)' was not found." });

    // Returning true ensures that sendResponse will wait for an asynchronous response
    return true;

Content script:

// Send a request to the background to get the image from the last tab
browser.runtime.sendMessage({ command: "getLatestImage" });

// Receive the response from the background
browser.runtime.onMessage.addListener((message) => {
  if (message.tabId) {
    const imageTabId = message.tabId;

    // Here you can work with the tab id containing the image (imageTabId)
    // For example, you can save this id for further use or utilize it for some other action.

    // Create a new image on the page and set it to the obtained URL
    const imageElement = document.createElement("img");
    imageElement.src = message.image;

    // Set the maximum dimensions of the image to maintain the aspect ratio
    const maxCanvasSize = 1024;
    const imageWidth = imageElement.naturalWidth;
    const imageHeight = imageElement.naturalHeight;
    const aspectRatio = imageWidth / imageHeight;

    if (aspectRatio >= 1) {
      // The image is wider or square = maxCanvasSize + "px"; = maxCanvasSize / aspectRatio + "px";
    } else {
      // The image is taller = maxCanvasSize * aspectRatio + "px"; = maxCanvasSize + "px";

    // Center the image on the canvas = "absolute"; = "50%"; = "50%"; = "translate(-50%, -50%)"; = "0.35"; // Image transparency

    // Add the image to the div.flex
    const flexDiv = document.querySelector("div.flex");
  } else if (message.error) {

The only work what worked really well after some debugging was this bash script to resize the image so fit the canvas.


# Function for resizing an image while maintaining the aspect ratio
resize_image() {

  # Check if the first argument is a valid file
  if [ ! -f "$input_file" ]; then
    echo "Error: The first argument '$input_file' is not a valid file."
    exit 1


  # Determine the dimensions of the original image
  original_width=$(identify -format "%w" "$input_file")
  original_height=$(identify -format "%h" "$input_file")

  # Decide which side will be limited to the desired size
  if (( original_width > original_height )); then
    new_height=$(( max_size * original_height / original_width ))
    new_width=$(( max_size * original_width / original_height ))
  echo "The target dimensions will be: $new_width x $new_height"

  # Resize the image while maintaining the aspect ratio
  convert "$input_file" -resize "${new_width}x${new_height}" "$output_file"

  echo "The image has been resized and saved as $output_file."

# Check if two arguments are provided
if [ $# -ne 2 ]; then
  echo "Error: The script expects two arguments: the path to the image and the desired size."
  echo "Usage: $0 image_path desired_size"
  exit 1

# Check if the second argument is a positive integer
if ! [[ "$2" =~ ^[1-9][0-9]*$ ]]; then
  echo "Error: The second argument must be a positive integer."
  exit 1

# Call the function to resize the image
resize_image "$1" "$2"

Hi guys,
I have updated the code so it contains comments in English. Can anyone help me to make this fully working? It was generated by AI and I didn’t find out why it does not work. When I run the addon its deactivated by Firefox after few seconds. I think there could be problems like AI cannot find out the id of the tab where the image is opened. It cannot find or run the tab id where the site I am trying to inject the code to canvas is open. Or is just tries to pass the image to the background of canvas before he obtained the id if the tab where the image is opened.