捕获并发送特定的可见标签

Question

in my background.js i will capture a specific area in a div.

My code looks like

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
                });
            });
        }
    }
}

I would like crop the image and send or send image with position, width and height to cut . Whether it's the first case or the second case, I need access to the position, the width and height of the div to cut correctly. How can I get the source code of the webpage by chrome.tabs ?

Thanks

Answer 1

To get the html of current page, use var html = $('html').html(); or document.documentElement.innerHTML

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

Take a look at this open source project , it allows you to capture selected area in a web page, the basic idea would be using canvas to draw the image, then you can crop the canvas with specific position, width and height.