@andrejfomenko

Как сделать скрин в расширении chrome?

Имеется копипастное расширение для хрома. Суть клик на иконку - кнопка - клик по кнопке - сохранить скрин активной вкладки. Если в popup.js(мой скрипт) стоит "console.log(response);" то я получаю в консоль ImgSrc:
60ea648515e94150597807.png
Если я ставлю "console.log(response.dataUrl);" то получаю:
60ea653129ec5527710706.png
код для скрипта и background брал отсюда:ссылка
мой 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"]
		}
		]
	
}

мой 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;
    }
);

мой 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);
});

};

и интерфейс в 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>
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 2
@zkrvndm
Боты, парсеры, расширения
Ну видно же, что вам надо imgSrc брать из response!

Делайте так:
console.log(response.imgSrc);
var link = document.createElement('a');
link.href = response.imgSrc;
link.download = 'Scrin.jpg';
link.click();
Ответ написан
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
возможно это вам поможет Как сделать загрузку картинки с сайта JS?

в ответе по ссылке есть запуск окна сохранения полученого blob на диск
вам остается только найти способ преобразования ImgSrc в blob

вот тут тоже есть подсказки и примеры по теме вопроса https://developer.mozilla.org/ru/docs/Web/API/HTML...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы