我遇到了问题：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 + "' />");
});
});
答案 0 :(得分：5)
offscreenTabs API是实验性的。下面的解决方案已在Chromium 20.0.1132.57（Linux）中成功测试过，但这并不意味着代码仍可在以后的版本中使用。
这个答案是How to use the experimental offscreenTab API?
创建选项卡时会调用chrome.experimental.offscreenTabs.create的回调函数。使用chrome.webRequest API和UNIX netcat命令进行的测试表明，在服务器响应之前，可以触发回调。因此，在呈现页面之后，触发回调的可能性不大。
我的演示扩展包含5个文件。他们的角色简要解释了：
manifest.json - 扩展程序所需的粘合剂（请参阅documentation）。sayhello.js - 一个content script，通知后台页面。这个帮助是必要的，因为chrome.tabs和chrome.webRequest是无用的：chrome.tabs的事件监听器永远不会触发屏幕外标签，chrome.webRequest的事件监听器会被触发页面已呈现。background.js - 从内容脚本接收message的背景页面。 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);
};
});