problem with "devtools://devtools/" in google chrome extension

Question

I have this script for message to background script in my content.js:

const getFullImg = async () => {
        const element = imagesWidgetDocument.querySelector(".rc-imageselect-challenge");
        const rect = element.getBoundingClientRect();
        try {
          const response = await sendMessageToBackground({ action: "takeScreenshot" });
          if (response) {
            const img = new Image();
            img.src = response;
            await new Promise((resolve) => {
              img.onload = resolve;
            });
            const canvas = document.createElement("canvas");
            canvas.width = 500;
            canvas.height = 500;
            const x = rect.left + window.scrollX;
            const y = rect.top + window.scrollY;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(img, x + 110, y + 130, 500, 500, 0, 0, 500, 500);
            const dataURL = canvas.toDataURL("image/png");
            return dataURL;
          }
        } catch (error) {
          console.error(error);
        }
      };
      
      const sendMessageToBackground = (message) => {
        return new Promise((resolve, reject) => {
          chrome.runtime.sendMessage(message, (response) => {
            if (chrome.runtime.lastError) {
              reject(chrome.runtime.lastError);
            } else {
              resolve(response);
            }
          });
        });
      };

And this code in background.js:

//TakeScreenshot
chrome.runtime.onMessage.addListener(async (request, sender) => {
  if (request.action === "takeScreenshot") {
    try {
      const screenshotUrl = await new Promise((resolve) => {
        chrome.tabs.captureVisibleTab({ format: "png", quality: 100 }, resolve);
      });
      return screenshotUrl;
    } catch (error) {
      console.error(error);
    }
  }
  return true
});

But i get this error in my tab: message: 'The message port closed before a response was received.'}

And this error in background.js: Unchecked runtime.lastError: Cannot access contents of url "devtools://devtools/". Extension manifest must request permission to access this host.

But I don't have a single line of code trying to access this resource.

I'm trying to change my manifest.json to add devtools://devtools/ as permission or property of host_permissions, but it didn't work.
It's my first order and i really wont to know how to fix that

{
    "name": "CaptchaSolver",
    "description": "solves captchas from websites",
    "version": "1.1",
    "manifest_version": 3,
    "icons": {
        "48": "images/48.png"
    },
    "host_permissions": [
        "<all_urls>"
    ],
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["./js/index.js"]
        }
    ],    
    "action": {
        "default_popup": "popup.html"
    },
    "permissions": ["scripting", "activeTab", "storage", "tabs"],
    "background": {
        "service_worker": "./js/background.js"
    }
}

problem with "devtools://devtools/" in google chrome extension

0 Answers0