捕获并发送特定的可见选项卡

时间:2016-04-13 00:37:59

标签: javascript jquery ajax google-chrome google-chrome-extension

在我的background.js我将捕获div中的特定区域。

我的代码看起来像

function main()
{
    chrome.tabs.query( {'active': true}, check_tab );
}
function check_tab( tabs )
{
    for (i = 0; i < tabs.length; i++) { 
        var url = tabs[i].url;
        if ( -1 < url.indexOf( "https://www.specificurl" ) ) {
            chrome.tabs.captureVisibleTab( null, {'format': "png"}, function(img){
                $.ajax({
                    type: "POST",
                    url: "http://mywebsite.com/doSomething.php",
                    data: "img=" + img
                });
            });
        }
    }
}

我希望crop the image and sendsend image with position, width and height to cut。无论是第一种情况还是第二种情况,我都需要访问div的位置,宽度和高度才能正确切割。如何通过chrome.tabs获取网页的源代码?

由于

1 个答案:

答案 0 :(得分:1)

要获取当前页面的html,请使用var html = $('html').html();document.documentElement.innerHTML

chrome.tabs.executeScript(tabs[0].id, {"code": "var html = document.documentElement.innerHTML;"}, function(html) {
    console.log(html); 
});

看看这个open source project,它允许你捕捉网页中的选定区域,基本思路是使用画布绘制图像,然后你可以裁剪具有特定位置,宽度和高度。