Добрый день,
Я создал расширение Chrome, которое позволяет моему приложению реагировать на снимок экрана текущей вкладки с помощью передачи сообщений. Итак, обзор того, как это работает, заключается в том, что мое приложение реагирования отправляет сообщение расширению через content_script.js, после чего скрипт контента будет связываться с фоновым скриптом, чтобы сделать снимок экрана. Затем он вернет dataURL в скрипт контента, а затем передаст его моему приложению.
Этот метод работает нормально, но я бы хотел "уточнить" снимок экрана, только возвращая снимок экрана с указанным элементом dom, в данном случае iframe
страницы. Есть ли способ сделать скриншот только на этом iframe
?
Вот что у меня есть:
(реакция приложения)
App.js
componentDidMount() {
var self = this;
window.addEventListener("message", function (event) { //listen for messages from react app
// We only accept messages from ourselves
if (event.source !== window)
return;
if (event.data.type && (event.data.type === "FROM_EXTENSION")) {
// console.log("React app received message: " + event.data.dialog);
self.setState({ img: event.data.image, showImageContainer: true })
}
});
}
getScreenshotHandler = () => {
var data = { type: "FROM_PAGE", text: "Screenshot Request" };
window.postMessage(data, "*");
}
componentWillUnmount() {
window.removeEventListener("message");
}
(расширение Chrome)
content_script.js
window.addEventListener("message", function (event) { //listen for messages from react app
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
//send message to background.js
chrome.runtime.sendMessage({ type: "screenshot" }, function (response) {
let data = { type: "FROM_EXTENSION", image: response.farewell, dialog: "いくつかの日本のもの" }
window.postMessage(data, "*");
});
}
});
(расширение хром)
background.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
let imageURL = null
chrome.tabs.captureVisibleTab(null, { format: "png" }, function (image) {//get screenshot of tab
sendResponse({ farewell: image });
});
console.log(imageURL);
return true;
});
Любая помощь будет оценена. Спасибо!