Chrome 扩展 API:Chrome.tabs.captureVisibleTab 在背景页面上到内容脚本

Chrome Extension API: chrome.tabs.captureVisibleTab on Background Page to Content Script

本文关键字：Chrome 脚本 背景 API 扩展 tabs captureVisibleTab      更新时间：2023-09-26

我的总体目标是使用以下方法通过背景页面截取屏幕截图：

http://developer.chrome.com/extensions/tabs.html#method-captureVisibleTab

并将其传递给内容脚本，以便我可以使用页面的HTML DOM来分析屏幕截图并按照我想要的方式剪切它。

但是，我似乎无法使用消息传递将 dataUrl 传递回内容脚本：

http://developer.chrome.com/extensions/messaging.html

我尝试了JSON.stringify（），但无济于事。

这工作得很好：

background.js
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        sendResponse({imgSrc:'hello'});
    }
);

我将代码切换到此，但没有任何通过：

background.js
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        chrome.tabs.captureVisibleTab(
            null,
            {},
            function(dataUrl)
            {
                sendResponse({imgSrc:dataUrl});
            }
        )
    }
);

我唯一证明背景页面实际上是截图的证据是我可以做

chrome.tabs.captureVisibleTab(null,{},function(dataUrl){console.log(dataUrl);});

我看到

"data：image/jpeg;base64，/9j/4AAQSkZJRgABAQAAA....等等..."

登录后台.html，有效

我的问题是：如何将此 URL 发送到内容脚本？

我宁愿不在后台页面上执行所有无法控制实际可见页面上的任何内容的逻辑。

使用 chrome.tabs.sendMessage 并确保return true，而不是事件侦听器

背景页面：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        chrome.tabs.captureVisibleTab(
            null,
            {},
            function(dataUrl)
            {
                sendResponse({imgSrc:dataUrl});
            }
        );
        return true;
    }
);

内容脚本

chrome.runtime.sendMessage({msg: "capture"}, function(response) {
  console.log(response.dataUrl);
});
相关文章：