Я очень плохо знаком с расширениями Chrome и реагирую. Обзор того, что я делаю, довольно прост. У меня есть расширение Chrome, которое делает снимок экрана activeTab, и я хочу отправить этот снимок экрана с расширения в мое приложение реагирования.
Из того, что я понимаю, мне нужно отправить событие из расширения и заставить приложение реагировать прослушивать его. У меня есть прослушиватель событий в index.html моего приложения реагирования для прослушивания событий, отправляемых расширением. Я потерпел неудачу в моих попытках.
Вот что у меня есть:
Расширение Chrome
popup.js
let tabImage = document.getElementById('tabImage');
let capturedImage = null;
tabImage.onclick = () => {
chrome.tabs.captureVisibleTab(null, (image) => {
document.dispatchEvent(new CustomEvent('csEvent', { data: image })) // send image to react app
viewScreenshot(image);
});
}
//Create a new window in the browser with the captured image
viewScreenshot = (capturedImage) => {
const b64 = capturedImage;
const contentType = 'image/jpeg';
const byteCharacters = atob(b64.substr(`data:${contentType};base64,`.length));
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 1024) {
const slice = byteCharacters.slice(offset, offset + 1024);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
const blobUrl = URL.createObjectURL(blob);
window.open(blobUrl, '_blank');
}
popup.html
<html lang="en">
<head>
</head>
<body>
<button id="tabImage">Get a screenshot!</button>
<script src='popup.js'></script>
</body>
</html>
Приложение ReactionJS
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shots</title>
</head>
<body>
<iframe id="qa_films" src="./demo_course_classic_player_html5-flash-AMP/story.html"
style="position:absolute ;top:0; left:0; bottom:0; right:0; width:100%; height:90%; border:none; margin:0 auto; padding:0; z-index: 0; overflow:hidden; "></iframe>
<div id="screenshot"></div>
</body>
<script>
document.body.addEventListener('csEvent', (event) => {
console.log(event);
})
</script>
</html>
Я хотел бы знать, в какой части я делаю это неправильно или есть лучший способ реализовать то, чего я пытаюсь достичь. Любая помощь приветствуется. Спасибо!