Question

Background.js：

chrome.tabs.executeScript(tab.id, 
{
    file: "exec_script.js"
}, function(res) {
    console.log(res);
});

exec_script.js：

var test = html2canvas(document.body, {
  allowTaint: false,
  letterRendering: true,
  logging: true
}).then(function (canvas) {
    var dataUrl = canvas.toDataURL();
    var bImage = dataUrl.replace('data:image/png;base64,', '');
});
test

据我所知，exec_script.js中的最后一个语句必须作为result参数传递给回调。但它返回空对象。

但是如果我在exec_script.js中做如下：

var test = "good";
test

它将变量的值返回给回调。

此选项卡也没有聚焦。

Answer 1

chrome.tabs.executeScript返回的结果由执行脚本的主体生成，换句话说，它是同步JavaScript的标准行为。

在你的情况下，同步部分创建test对象，调度Promise但尚未执行它（a task/microtask is queued），将刚刚初始化的test对象作为最后一个语句它会被executeScript拾取。此外，由于executeScript仅传输对象的JSON可用部分，并且test是复杂的类对象，因此传输空对象。您可以通过检查控制台中的console.log(JSON.stringify(test))手动检查它。

要传输异步代码的结果，请使用messaging：

background.js

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    console.log(sender.tab, msg);
    // do something
});
chrome.tabs.executeScript(tab.id, {file: "exec_script.js"});

exec_script.js

var test = html2canvas(document.body, {
  allowTaint: false,
  letterRendering: true,
  logging: true
}).then(function(canvas) {
    var dataUrl = canvas.toDataURL();
    var bImage = dataUrl.replace('data:image/png;base64,', '');
    chrome.runtime.sendMessage({dataUrl: dataUrl});
});

N.B。只有JSON可用的对象部分通过消息传递。

Chrome扩展程序 - 如何在回调

1 个答案: