通过承诺传递消息

时间:2019-01-17 10:20:33

标签: google-chrome-extension

我正在尝试在以下位置进行扩展:

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

我正在尝试用Promises做到这一点,因为在上面的示例之后,我想使用URL数组来实现它,因此要使用for循环。因此,我需要同步执行,一个网址接一个网址。

这是我的代码:

background.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相同。

0 个答案:

没有答案