Capture (screenshot) inactive tab
I would like to capture an image of a possibly inactive tab.
The problem is that when using the approach shown here, the tab often doesn't get a load time until the capture is complete, resulting in a crash.
The callback chrome.tabs.update()
is executed before the tab can be captured.
I also tried to add listeners to events like tabs.onActivated
and tabs.onHighlighted
and capture when they are fired, but the result is the same. And as indicated by this, I've also tried highlighted
instead of active
on chrome.tabs.update()
- and a combination of both; with listeners and callbacks.
The only way to make it work better is to use it setTimeout()
, but this is very hacky, unreliable and ugly. The fact that you need to activate the tab before capturing is somewhat noisy, but if you need to add delays, the problem is slightly worse.
This looks more like a convenience feature for my extension, but it would be nice to get it to work.
/* Not the real code, but the same logic. */
var request_tab = 25,
request_win = 123
old_tab;
/* Check which tab is active in requested window. */
chrome.tabs.query({
active : true,
windowId : request_win
}, function (re) {
old_tab = re[0].id;
if (old_tab !== request_tab) {
/* Requested tab is inactive. */
/* Activate requested tab. */
chrome.tabs.update(request_tab, {
active: true
}, function () {
/* Request capture */ /* CB TOO SOON! */
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
/* ... data ... */
/* Put back old tab */
chrome.tabs.update(old_tab, {
active: true
});
})
});
} else {
/* Requested tab is active. */
/* Request capture. */
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
/* ... data ... */
})
}
});
source to share
Since you update the tab using the method chrome.tabs.update()
, the callback will be called immediately after the tab properties are changed, but obviously before the page is loaded . To get around this, you have to remember that the tab is not yet ready , and using the event chrome.tabs.onUpdated
, check out when it is ready , and you can usechrome.tabs.captureVisibleTab()
.
Here's the solution:
var request_tab = 25,
request_win = 123,
waiting = false,
// ^^^ Variable used to check if tab has loaded
old_tab;
// Check which tab is active in requested window.
chrome.tabs.query({
active : true,
windowId : request_win
}, function (re) {
old_tab = re[0].id;
if (old_tab !== request_tab) {
// Requested tab is inactive
// Activate requested tab
chrome.tabs.update(request_tab, { active: true });
// Tab isn't ready, you can't capture yet
// Set waiting = true and wait...
waiting = true;
} else {
// Requested tab is active
// Request capture
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
// Elaborate data...
})
}
});
chrome.tabs.onUpdated.addListener(function(tabID, info, tab) {
// If the tab wasn't ready (waiting is true)
// Then check if it now ready and, if so, capture
if (waiting && tab.status == "complete" && tab.id == request_tab) {
// Now you can capture the tab
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
// Elaborate data...
// Put back old tab
// And set waiting back to false
chrome.tabs.update(old_tab, { active: true });
waiting = false;
});
}
});
source to share