Question

美好的一天，

我创建了一个chrome扩展程序，该扩展程序允许我的react应用使用消息传递功能捕获当前标签页的屏幕截图。因此，有关其工作原理的概述是，我的react应用通过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, "*");
        });
    }
});

（chrome扩展名） 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;
  });

任何帮助将不胜感激。谢谢！

使用captureVisibleTab捕获DOM中特定元素的屏幕截图

0 个答案: