google-chrome-extension - 全局变量和异步回调函数

Question

如何将当前选项卡的 URL 存储在变量中，以便以后可以访问？我做了一些谷歌搜索，但不太了解异步回调函数。

var currentTab;
chrome.tabs.getSelected(null, function(tab) { currentTab = tab.url; });
console.log(currentTab);

Answer 1

所有 Chrome 方法都是异步的，这意味着它们只是将代码排队等待稍后调用。

另请注意，tabs.getSelected 已弃用，所以我正在使用tabs.query({active: true}...。

其他一切都完成后，回调无序触发：

var currentTab;                   // 1

chrome.tabs.query({active: true}, // 2, queues up callback and continues
    function(tabs) { 
        currentTab = tabs[0].url; // 4, last, after everything else
    });

console.log(currentTab);          // 3 callback hasn't fired yet, so undefined

欢迎来到有时被称为“回调地狱”的东西。

解决这个问题的最简单方法是使用异步或承诺包装库，如chrome-extension-async. 这让你使用async/await语法：

async function yourCode() {
    try {
       const currentTabs = await chrome.tabs.query({active: true});
       const currentTab = currentTabs[0];
       console.log(currentTab);
    }
    catch(err) {
        // Log errors etc
    }
}

完成后您仍在进行回调并执行代码，但现在您可以轻松地在await. 我最近在博客上写了比这里更详细的内容。