How to take a screenshot in chrome extension?

A

andrejfomenko2021-07-11 06:29:32

JavaScript

andrejfomenko, 2021-07-11 06:29:32

There is a copy-paste extension for chrome. The essence of clicking on the icon - button - clicking on the button - save the screen of the active tab. If in popup.js (my script) is "console.log(response);" then I get in the console ImgSrc:

If I put "console.log(response.dataUrl);" then I get: I

took the code for the script and background from here: link
my manifest:

{
  "name": "Скрин",
  "description": "screen",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },

  "action": {
  "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "permissions": [
        "activeTab",
    "tabs",
    "alarms",
    "desktopCapture",
    "nativeMessaging",
    "tabCapture",
    "tabGroups",
    "scripting",
        "storage",
      "unlimitedStorage",
      "browsingData",
      "notifications"
    ],
  "content_scripts": [
    {
      "matches": ["<all_urls>", "http://*/*"],
      "js": ["/javascripts/jquery.js", "/javascripts/screen.js", "send.js"]
    }
    ]
  
}

my background.js:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        chrome.tabs.captureVisibleTab(
            null,
            {},
            function(dataUrl)
            {
                sendResponse({imgSrc:dataUrl});
            }
        ); //remember that captureVisibleTab() is a statement
        return true;
    }
);

my popup.js:

let snow = document.getElementById("snow");
// когда кнопка нажата — находим активную вкладку и запускаем нужную функцию
snow.addEventListener("click", async () => {
  // получаем доступ к активной вкладке
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // выполняем скрипт
  chrome.scripting.executeScript({
  	// скрипт будет выполняться во вкладке, которую нашли на предыдущем этапе
    target: { tabId: tab.id },
    // вызываем функцию, в которой лежит запуск снежинок
    function: snowFall,
  });
});

// запускаем снег
function snowFall() {
chrome.runtime.sendMessage({msg: "capture"}, function(response) {
  console.log(response);
});

};

and interface in popup.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
  	<meta charset="UTF-8">
    <style type="text/css">

    	/* задаём размеры кнопки и размер текста на кнопке  */
    	button {
        font-size: 12px;
      height: 40px;
      width: 80px;
    }
    </style>
  </head>
  <body>
  	<!-- создаём кнопку на странице -->
    <button id="snow">Скрин</button>
    <!-- подключаем скрипт, который обработает нажатие на эту кнопку -->
    <script src="popup.js"></script>
  </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

Nadim Zakirov, 2021-07-11
@zkrvndm

Well, you can see that you need to take imgSrc from response !
Do this:

console.log(response.imgSrc);
var link = document.createElement('a');
link.href = response.imgSrc;
link.download = 'Scrin.jpg';
link.click();