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 в своем расширении, как это сделать?
