[英]How do i move a screenshot from an extension to a content script?
So the idea goes like this... all i want to do is call an extension background page as soon as a specific content script is loaded. 所以这个想法是这样的...我想要做的就是在加载特定内容脚本后立即调用扩展背景页面。 (in this case when a page is loaded) I have something like this in my content script.
(在这种情况下加载页面时)我的内容脚本中有类似的内容。
var port = chrome.extension.connect({name: "screenshot"});
port.postMessage({request: "screenshot"});
port.onMessage.addListener(function(msg) {
var img = document.createElement('img');
img.src = msg.response;
document.body.appendChild(img);
});
And something like this in my background.js page 在我的background.js页面中有类似的东西
function takeScreenshot(){
chrome.tabs.captureVisibleTab(null, function(img) {
return img;
});
}
chrome.extension.onConnect.addListener(function(port) {
console.assert(port.name == "screenshot");
port.onMessage.addListener(function(msg) {
if (msg.request == "screenshot"){
port.postMessage({response: takeScreenshot() });
}
});
});
But i am having no luck... I get the image to show up on the body but it doesnt actually pass the image when returning img from takeScreenshot 但我没有运气......我得到的图像显示在身体上但是当从takeScreenshot返回img时它实际上没有传递图像
The problem is you are trying to achieve synchronization between synchronous and asynchronous events in background page 问题是您正在尝试在后台页面中实现同步和异步事件之间的同步
a) chrome.tabs.captureVisibleTab() is asynchronous a) chrome.tabs.captureVisibleTab()是异步的
b) port.postMessage() is synchronous b) port.postMessage()是同步的
When port.postMessage({response: takeScreenshot() });
当
port.postMessage({response: takeScreenshot() });
is called it does not wait for takeScreenshot() call back ie; 被称为不等待takeScreenshot() 回调 ie;
return img;
so an empty JSON object is sent to content script 所以一个空的JSON对象被发送到内容脚本
Avoid it with posting message after call back returns 在回叫之后回复 发布消息时避免使用它
chrome.extension.onConnect.addListener(function(port) {
console.assert(port.name == "screenshot");
port.onMessage.addListener(function(msg) {
if (msg.request == "screenshot"){
chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(img) {
//post message only after call back return with Data URL
port.postMessage(img);
});
}
});
});
Working Version Demonstration 工作版演示
manifest.json 的manifest.json
{
"name":"Screen Shot Demo",
"description":"This demonstrates Screen Shot API",
"manifest_version":2,
"version":"1",
"permissions":["tabs","<all_urls>"],
"background":{
"scripts":["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["myscript.js"]
}
]
}
background.js background.js
chrome.extension.onConnect.addListener(function(port) {
console.assert(port.name == "screenshot");
port.onMessage.addListener(function(msg) {
if (msg.request == "screenshot"){
chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(img) {
//post message only after call back return with Data URL
port.postMessage(img);
});
}
});
});
myscript.js (contentscript) myscript.js (内容脚本 )
var port = chrome.extension.connect({
name: "screenshot"
});
port.postMessage({
request: "screenshot"
});
port.onMessage.addListener(function (msg) {
var img = document.createElement('img');
img.src = msg;
document.body.appendChild(img);
});
Let me know if you need more information. 如果您需要更多信息,请与我们联系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.