google-chrome-extension - 通过 Promise 传递消息

Question

我正在尝试在哪里进行扩展：

• 背景在浏览器中创建一个新的空白选项卡
• 然后使用 url 更新新标签页
• 然后打开一个消息端口到新标签
• 然后将消息传递给内容脚本以检索新标签页上的元素
• 然后内容脚本以标题响应背景

我正在尝试用 Promises 来做到这一点，因为在上面的例子之后，我想用一个 url 数组来实现它，所以用一个 for 循环。所以我需要同步进行，一个 url 后一个 url。

这是我的代码：

背景.js

function createNewTab() {
    return new Promise(function (resolve, reject) {
        var newTabId = 0;
        chrome.tabs.create({
            url: "about:newtab"
        }, function(newTab) {
            resolve(newTab);
        });        
    });        
}

function updateTab(newTab) {
    console.log("updateTab try with tab " + newTab.id);
    return new Promise(function (resolve, reject) {
        chrome.tabs.update(newTab.id, {
            url: "https://forum.openstreetmap.fr/viewtopic.php?f=3&t=6811&start=0"
        }, function (tab) {
            if (tab.url == "https://forum.openstreetmap.fr/viewtopic.php?f=3&t=6811&start=0")
                resolve(["updated", tab])
            else
                reject(["failed", null])
        });
    });
}

function connectTab(newTab) {
    console.log("connectTab try with tab " + newTab.id);
    return new Promise(function (resolve, reject) {
        var port = chrome.tabs.connect(newTab.id, {
            name: "scrap"
        });
        resolve(port);
    });
}

function passMsgToTab(port) {
    return new Promise(function (resolve, reject) {
        port.postMessage({
            type: "title"
        });
        resolve("passed");
        reject("failed");
    });
}

createNewTab()
.then(function(newTab) {
    console.log("createNewTab newTab : " + newTab.id);
    return updateTab(newTab)
})
.then(function(responseTab) {
    var response = responseTab[0];
    var newTab = responseTab[1];
    console.log("updated ? " + response + " | tab : " + newTab.id);    
    if (response == "updated")
        return connectTab(newTab)
})
.then(function (port) {
    console.log("connectTab port : " + port.name);
    return passMsgToTab(port)
})
.then(function (response) {
     console.log("message passed ? " + response);
})

和 content_script.js ：

chrome.runtime.onConnect.addListener(function (port) {
    console.assert(port.name == "scrap");
    port.onMessage.addListener(function (msg) {
        console.log("recieved msg : " + msg.type); 
        if (msg.type == "title") {
            var title = $("h3.first a").text();
            port.postMessage({
                title: title
            });
        }
    });
 });

所以前两个步骤（createTab & updateTab）成功了。但是消息传递失败。我从 connectTab 检索响应，但由于我没有将 resolve 放入回调函数中，我认为它不起作用。我可以从 then() 到达 port.name 但我能用这个端口做什么？我在哪里可以解决？我认为这与 port.message 相同。

标签： google-chrome-extension