Chrome扩展程序API：将背景页上的chrome.tabs.captureVisibleTab添加到内容脚本 [英] Chrome Extension API: chrome.tabs.captureVisibleTab on Background Page to Content Script

问题描述

我的总体目标是通过后台页面使用以下截图：

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

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

然而，我可以' t似乎通过Message Passing将dataUrl传递回内容脚本：

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

我试过JSON.stringify（），但是

这很好：

  background.js 
 
 chrome.runtime.onMessage.addListener（
函数（request，sender，sendResponse）{
 sendResponse（{imgSrc：'hello'}）; 
} 
）; 
  

我将代码切换到此状态，没有任何东西可以通过：

  background.js 
 
 chrome.runtime.onMessage.addListener（
函数（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 ....等等......

记录在background.html中，这是有效的

我的问题是：如何将此网址发送到内容脚本？ 我不希望在背景页面上执行所有逻辑，这些逻辑无法控制实际可见页面上的任何内容。 使用chrome.tabs。

sendMessage

后台页面：

  chrome.runtime.onMessage.addListener （
函数（request，sender，sendResponse）{
 chrome.tabs.captureVisibleTab（
 null，
 {}，
函数（dataUrl）
 { 
 sendResponse（{imgSrc：dataUrl}）; 
} 
）; //记住captureVisibleTab（）是一个语句
返回true; 
} 
 ）; 
  

内容脚本

  chrome.runtime.sendMessage（{msg：capture}，function（response）{
 console.log（response.dataUrl）; 
}）; 
  

My overall goal was to take a screenshot via the background page using:

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

and pass it to the content script so I can use the page's HTML DOM to analyze the screenshot and cut it up the way I would like.

However, I can't seem to pass the dataUrl back to the content script with Message Passing:

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

I tried JSON.stringify() but to no avail.

This works perfectly fine:

background.js

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

I switch the code to this and nothing gets through:

background.js

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

My only proof that the background page is actually taking a screenshot is that I can do

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

and I see

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA....etc..."

logged in background.html, which is valid

My question is: How can I send this URL to the content script?

I would prefer not to do all the logic on the background page which can't control anything on the actual visible page.

解决方案

Use chrome.tabs.sendMessage

background page:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        chrome.tabs.captureVisibleTab(
            null,
            {},
            function(dataUrl)
            {
                sendResponse({imgSrc:dataUrl});
            }
        ); //remember that captureVisibleTab() is a statement
        return true;
    }
);

content script

chrome.runtime.sendMessage({msg: "capture"}, function(response) {
  console.log(response.dataUrl);
});

这篇关于Chrome扩展程序API：将背景页上的chrome.tabs.captureVisibleTab添加到内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！