background.js

var contextMenus = {};

var context = "image";
var title = "Copy Actual Image";
contextMenus.copyImageNotUrl = chrome.contextMenus.create({"title": title,
 "contexts":[context],
 onclick: async (info, tab) => {
    
    const imageSrc = info?.srcUrl;
    console.log('got a request to download an image', { info})
    if (!imageSrc) {
        return;
    }
     console.log(`downloading image from '${imageSrc}'`)

     chrome.tabs.executeScript(tab.id, {
        code: `var imageToCopyUrl = '${imageSrc}' `
    }, function() {
        
     chrome.tabs.executeScript({
        file: 'foreground.js'
    });

    });
 }
});  

forground.js

function removeButton() {
    var copyButton = document.getElementById("copyImageNotUrlButton");

    if (copyButton) {
        document.body.removeChild(copyButton);
    }
}

function createButton() {

copyButton = document.createElement("div");
copyButton.id = 'copyImageNotUrlButton'
copyButton.style = `position: absolute;top: calc(50vh - 25px);left: calc(50vw - 100px);z-index:30000;
width: 200px;height: 50px
display:inline-block;
color:#444;
border:1px solid #CCC;
background:#DDD;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
cursor:pointer;
vertical-align:middle;
padding: 5px;
text-align: center;`
copyButton.innerHTML = "Copy Image To Clipboard";
copyButton.onclick = async function() {

    navigator.permissions.query({name: "clipboard-write"}).then(async (result) => {
        if (result.state == "granted" || result.state == "prompt") {
            await copyImage(imageToCopyUrl)

        } else {
            console.warn("cannot copy")
        }
      });

}

document.body.appendChild(copyButton);
}

function imageToBlob(imageURL) {
    const img = new Image;
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.crossOrigin = "";
    img.src = imageURL;
    return new Promise(resolve => {
        
      img.onload = function () {
        c.width = this.naturalWidth;
        c.height = this.naturalHeight;
        
        
        setTimeout(() => {
            
            ctx.drawImage(this, 0, 0);
            c.toBlob((blob) => {
              // here the image is a blob
              resolve(blob)
            }, "image/png", 0.75);
        }, 1000)
      };
    })
  }

  async function copyImage(imageURL){
    var copyButton = document.getElementById("copyImageNotUrlButton");

    try {
    copyButton.innerText = 'Please wait';
    const blob = await imageToBlob(imageURL)
    const item = new ClipboardItem({ "image/png": blob });
    navigator.clipboard.write([item]);
    removeButton();
    } catch(e) {
        console.error(e);
    copyButton.innerText = 'Failed to copy, try again';
    }
  }

  removeButton();

  createButton();

manifest.json

{
    "name": "Copy Actual Image To Clipboard",
    "version": "1.0",
    "description": "Copy the actual image to the clipboard instead of the URL.",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": true
    },
    "permissions": [
        "activeTab",
        "contextMenus",
        "clipboardWrite"
    ]
}