Question

我对chrome扩展非常陌生，并会有所反应。我所做的概述非常简单。我有一个chrome扩展程序，它需要一个activeTab的屏幕快照，我想将该屏幕快照从该扩展程序发送到我的react应用。

据我了解，我需要从扩展中调度一个事件，并让react应用程序监听它。我的react应用程序的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>

reactJS应用

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>

我想知道我做错了哪些部分，或者有更好的方法来实现我要实现的目标。任何帮助表示赞赏。谢谢！

如何将数据从Chrome扩展程序发送到React应用

0 个答案: