1

我遇到了一个问题：chrome.experimental.offscreenTabs.create效果很好，但是该toDataUrl方法生成了一个高度为 1 像素的图像。我已经尽力了，但生成的图像toDataUrl没有显示我指定的大小。如何解决这个问题？

这是我的代码：

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 + "' />");
    });
});
4

1 回答 1

5

offscreenTabsAPI 是实验性的。以下解决方案已在 Chromium 20.0.1132.57 (Linux) 中成功测试，但这并不意味着该代码在以后的版本中仍然有效。
此答案是如何使用实验性 offscreenTab API？

chrome.experimental.offscreenTabs.create创建选项卡时调用的回调函数。使用chrome.webRequestAPI 和 UNIX netcat命令进行的测试表明，可以在服务器响应之前触发回调。因此，在页面呈现后不太可能触发回调。

我的演示扩展包含 5 个文件。简要说明它们的作用：

  • manifest.json- 扩展所需的胶水（参见文档）。
  • sayhello.js-通知背景页面的内容脚本。这个助手是必要的，因为chrome.tabs和chrome.webRequest没用： 的事件侦听chrome.tabs器永远不会为屏幕外的选项卡触发，并且 的事件侦听chrome.webRequest器会在页面呈现之前触发。
  • background.js-从内容脚本接收消息的背景页面。chrome.extension.getViews()用于定位启动屏幕外选项卡的视图。
  • options.html-启动屏幕外选项卡的可见视图。（后台页面无法启动屏幕外选项卡）。
  • options.js- 当清单版本 2 处于活动状态时，不执行内联脚本。脚本必须放在外部文件中，并使用<script src>.

我已将扩展名上传到http://rob.lekensteyn.nl/offscreentabs.zip 相同的文件，crx 扩展名：CRX。如果您想测试它，请不要忘记在 启用实验权限。chrome://flags

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);
    };
});
于 2012-07-24T13:48:28.140 回答