1 javascript screenshot google-chrome-extension offscreentabs
我遇到了一个问题: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 + "' />");
});
});
该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.jschrome.extension.sendMessage("Hello"); // Yup, that's it
background.jschrome.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);
};
});
| 归档时间： |
|
| 查看次数： |
438 次 |
| 最近记录： |