Kак использовать сторонние библиотеки в расширении гугл?

Question

[Алексей Яковлев]

manifest.json:

{
    "name": "Get cats",
    "description": "Extract all images of cats from current web page",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
        "16": "./icons/16.jpg"
    },
    "action": {
        "default_popup": "index.html"
    },
    "permissions": ["scripting", "tabs", "storage", "webRequest"],
    "host_permissions": ["http://<my_ip>*", "http://*/", "https://*/", "<all_urls>"],
    "background": {
        "service_worker": "background.js"
    },
    "web_accessible_resources": [
        {
            "resources": ["https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"],
            "matches": ["<all_urls>"]
        }
    ]
}

background.js:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 
  if (request.action === "get_answer") { 
    chrome.scripting.executeScript( 
      { 
        target: { tabId: request.tabId, files: ["content.js"] }, 
        func: () => { 
          function loadHtml2Canvas(callback) { 
            const script = document.createElement('script'); 
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'; 
            script.onload = callback; 
            document.head.appendChild(script); 
          } 
 
          function _getPhoto(element) { 
            if (typeof html2canvas === 'undefined') { 
              loadHtml2Canvas(() => { 
                html2canvas(element) 
                  .then((canvas) => { 
                    alert(canvas);
                    const dataURL = canvas.toDataURL(); 
                    chrome.runtime.sendMessage({ action: "canvas_data", dataURL }); 
                  }) 
                  .catch((error) => { 
                    alert(`Ошибка при работе с html2canvas: ${error}`); 
                  }); 
              }); 
            } else { 
              html2canvas(element) 
                .then((canvas) => { 
                  const dataURL = canvas.toDataURL(); 
                  chrome.runtime.sendMessage({ action: "canvas_data", dataURL }); 
                }) 
                .catch((error) => { 
                  alert(`Ошибка при работе с html2canvas: ${error}`); 
                }); 
            } 
          } 
 
          _getPhoto(document.querySelector(".discipl")); 
        } 
      } 
    ); 
  } 
}); 
 
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { 
  if (message.action === "canvas_data") { 
    alert('Полученные данные canvas:', message.dataURL); 
    // Можно добавить логику для дальнейшей обработки данных 
  } 
});

index.js который подключается к index.html (самому расширению):

const mainSubmit = document.querySelector("#main__submit"); 
 
mainSubmit.addEventListener("click", (event) => { 
  event.preventDefault(); 
 
  // Получаем активную вкладку 
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    const tab = tabs[0]; 
 
    if (!tab) { 
      alert("Нет активных вкладок"); 
      return; 
    } 
 
    // Отправляем сообщение на background script для выполнения задачи 
    chrome.runtime.sendMessage({ action: "get_answer", tabId: tab.id }); 
  }); 
});

код выполняется для typeof html2canvas === 'undefined' а внутри html2canvas(element).then код полностью отказывается работать

я хочу использовать библиотеку html2canvas в своем расширении, как это сделать?

Comments

[ProjectSoft]

Почему html2canvas тянете с cdn? Ведь брать с файлов расширения на много проще.
Тогда

target: { 
	tabId: request.tabId, 
	files: [
		"html2canvas.min.js",
		"content.js"
	] 
},

И уже в content.js строить логику обработки нужного вам элемента
_getPhoto(document.querySelector(".discipl"));
.discipl точно есть на каждой странице? Точно скажу - нет.
Шлите сообщение в content.js для рендера нужного элемента.