0

I has a code in background script:

const getFullImg = () => {
        return new Promise((resolve) => {
          let element = imagesWidgetDocument.querySelector(
            ".rc-imageselect-challenge"
          );
          let rect = element.getBoundingClientRect();
          chrome.runtime.sendMessage({ action: "takeScreenshot", rect: rect },function (response) {
                console.log(response)
                resolve(response);
            }
          );
          
        });
      };

And such a script in the content:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "takeScreenshot") {
    console.log('Получено')
    let rect = request.rect;
    chrome.tabs.captureVisibleTab({ format: "png", quality: 100 }, function(screenshotUrl) {
      if (screenshotUrl) {
        var img = new Image();
        img.onload = function() {
          var canvas = document.createElement("canvas");
          canvas.width = 500;
          canvas.height = 500;
          let x = rect.left + window.scrollX;
          let y = rect.top + window.scrollY;
          var ctx = canvas.getContext("2d");
          
          ctx.drawImage(img, x + 110, y + 130, 500, 500, 0, 0, 500, 500);
          var dataURL = canvas.toDataURL("image/png");
          console.log(dataURL)
          chrome.runtime.sendMessage({ action: "screenshotTaken", data: dataURL });
          sendResponse(dataURL);
        };
        img.src = screenshotUrl;
      } else {
        sendResponse(null);
      }
    });
    return true; /Message to chrome that the request is asynchronous /
  }
});

Content script working right, but when it has to send a response to the message i get this error:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

My manifest_version - 3
my manifest.json:

"host_permissions": [
        "<all_urls>"
      ],
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["./js/screenshot.js", "./js/popup.js"]
        }
    ],    
    "action": {
        "default_popup": "popup.html"
    },
    "permissions": ["scripting", "activeTab", "storage", "tabs"],
    "background": {
        "service_worker": "./js/background.js"
    }

I trying to send new message from content script and get it on background, but it's not working, so i don't know how to fix that

Heropaster
  • 1
  • 1
  • 1
    1) The background script can't use DOM things like querySelector or document because it's a service worker in ManifestV3. 2) The content script can't use chrome.tabs.captureVisibleTab. 3) The popup script should be loaded only in html file that you specified in `default_popup` 4) `rect` is not a JSON-compatible type, so it will be transferred as `{}`. You need to send the properties explicitly e.g. [rect.left, rect.top], 5) See [Chrome extension content script re-injection after upgrade or install](https://stackoverflow.com/q/10994324) – wOxxOm Apr 19 '23 at 09:59
  • but my function takeScreenshot works without error. It just doesn't get an answer. – Heropaster Apr 20 '23 at 03:51
  • No, chrome.tabs is physically absent in a content script, so it can't work. You probably load the script it in two places e.g. in popup.html where it can work. – wOxxOm Apr 20 '23 at 05:11

0 Answers0