javascript - 从嵌套函数返回当前 URL - Chrome 扩展

Question

我正在尝试制作一个 Chrome 扩展来获取当前所选选项卡的 URL，但遇到了一个问题，无法获取存储 URL 的变量来返回。

我已经尝试了几件事，但这是我期望工作的代码:

function getStream() {
    alert(getLinking());
}

function getLinking() {
    chrome.tabs.query({
            'active': true,
            'windowId': chrome.windows.WINDOW_ID_CURRENT
        },
        function getURL(tabs) {
            var URL = tabs[0].url;
            return URL;
        }
    );
    return getURL();
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('start').addEventListener('click', getStream);
});

但是它实际上并没有返回任何内容，因此警报不会显示。请注意，返回变量 URL 对我来说非常重要，这样我就可以在 getStream 函数中使用它，只是在 getURL 函数中添加警报并不是我想要的。

如果有人可以帮助我，那就太棒了，我还不太熟悉 javascript，而且我特别不熟悉 chrome 扩展，所以每一个建议都会有所帮助。

Answer 1

方法 chrome.tabs.query 是异步的，因此需要回调来返回结果。

当您使用异步调用时，您可以使用以下任何方式处理结果:

• 回调
• promise
• 异步/等待

请检查这个问题:How do I return the response from an asynchronous call?

根据您的代码，最简单的解决方案是:

function getStream() {
    getLinking(function(URL) { // passing a callback 
        alert(URL)
    });
}

function getLinking(callback) { // callback - is a function that will be called when async call finished
    chrome.tabs.query({
            'active': true,
            'windowId': chrome.windows.WINDOW_ID_CURRENT
        },function(tabs) {
            callback(tabs[0].url); // run callback with a result
        }
    );
    // do not need to return anything
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('start').addEventListener('click', getStream);
});