How to produce an image by chrome.experimental.off

I've got a problem: the chrome.experimental.offscreenTabs.create worked well, but the toDataUrl method produced an image with a height of 1 pixel. I've tried my best, but the image produced by toDataUrl does not show the size as I specified. How can this problem be solved?

Here is my code:

chrome.experimental.offscreenTabs.create({ url: "http:/www.baidu.com" }, function(offscreenTab) {
    // console.log(offscreenTab);
    chrome.experimental.offscreenTabs.toDataUrl(offscreenTab.id, { format: "png" }, function(imgUrl) {
        $("#container").html("<img src='" + imgUrl + "' />");
    });
});

标签： javascript google-chrome-extension screenshot offscreentabs

1条回答

别忘想泡老子

2楼-- · 2019-02-20 05:00

The offscreenTabs API is experimental. The solution below has successfully been tested in Chromium 20.0.1132.57 (Linux), but that doesn't mean that the code still works in later versions.
This answer is a follow-up to How to use the experimental offscreenTab API?

The callback function of chrome.experimental.offscreenTabs.create is called when the tab is created. Tests using the chrome.webRequest API and the UNIX netcat command showed that the callback can be fired before the server responds. Hence, it's unlikely that a callback is triggered after the page is rendered.

My demo extension consists of 5 files. Their role is briefly explained:

manifest.json - The required glue for the extension (see documentation).
sayhello.js - A content script which notifies the background page. This helper is necessary, because the chrome.tabs and chrome.webRequest are useless: The event listeners of chrome.tabs are never triggered for offscreen tabs, and the event listeners of chrome.webRequest are triggered before the page is rendered.
background.js - A background page to receive the message from the content script. chrome.extension.getViews() is used to locate the view which launches the offscreen tab.
options.html - The visible view which launches offscreen tabs. (The background page cannot launch an offscreen tab).
options.js - When manifest version 2 is active, inline scripts are not executed. The script must be placed in an external file, and loaded using <script src>.

I've uploaded the extension to http://rob.lekensteyn.nl/offscreentabs.zip ^{same file, crx extension: CRX}. Don't forget to enable the experimental permission at chrome://flags, if you want to test it.

`manifest.json`

{
    "name": "OffscreenTabs API test",
    "version": "1.0",
    "description": "offscreenTabs demo - See https://stackoverflow.com/q/11606135",
    "manifest_version": 2,
    "permissions": ["experimental", "<all_urls>"],
    "options_page": "options.html",
    "background": {"scripts": ["background.js"] },
    "content_scripts": [{
        "js": ["sayhello.js"],
        "matches": ["<all_urls>"]
    }]
}

`sayhello.js`

chrome.extension.sendMessage("Hello"); // Yup, that's it

`background.js`

chrome.extension.onMessage.addListener(function(message, sender) {
    if (message === "Hello" && sender && sender.tab) {
        // Message received from content script, pass information to a view
        //  within our extension, which processes offscreenTabs
        chrome.extension.getViews({type:"tab"}).forEach(function(_window) {
            if (_window.checkTab) _window.checkTab(sender.tab.id);
        });
    }
});

`options.html`

<!DOCTYPE html>
<head>
<meta charset="utf8">
<title>offscreenTabs test</title>
<script src="options.js"></script>
</head>
<body>
Enter an URL and press <kbd>Enter</kbd>.<br>
<input type="url" size="100" id="url" value="https://stackoverflow.com/users/938089/rob-w">
<img id="lastImg">
</body>
</html>

`options.js`

"use strict";

var collection = [];
// This function is called by the background (via the content script)
// If the tabId is recognised, take a screenshot
function checkTab(tabId) {
    var index = collection.indexOf(tabId);
    if (index !== -1) {
        collection.splice(index, 1); // Remove tabId
        toDataUrl(tabId);            // Take screenshot
    }
}

function create(url, width, height) {
    var createProperties = {url: url};
    if (width) createProperties.width = width;
    if (height) createProperties.height = height;

    // Create offscreen tab
    chrome.experimental.offscreenTabs.create(createProperties, function(offscreenTab) {
        console.log("Created " + offscreenTab.id, offscreenTab);
        collection.push(offscreenTab.id);
    });
}
function toDataUrl(offscreenTabId, options) {
    chrome.experimental.offscreenTabs.toDataUrl(offscreenTabId, options, function(dataUrl) {
        document.getElementById('lastImg').src = dataUrl;
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // "Press Enter to load the offscreen tab and take a screenshot"
    document.getElementById('url').onkeyup = function(ev) {
        if (ev.keyCode == 13) 
            create(this.value);
    };
});

0人赞添加讨论(0) 举报