@aleshaykovlev
html, css, js, node, webpack, sass, react

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

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 в своем расширении, как это сделать?
  • Вопрос задан
  • 132 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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