如何使Chrome扩展中chrome.cookies.get的url参数随当前标签页动态变更

嘿，我之前也踩过这个坑！问题的核心其实是Chrome的API大多是异步执行的，你原来的代码逻辑顺序错了——chrome.tabs.getSelected还没拿到标签页URL呢，chrome.cookies.get就已经跑起来了，这时候tabUrl还是undefined，自然拿不到Cookie。

先看你原来的错误代码：

var tabUrl; 
chrome.tabs.getSelected(null, function(tab) { 
  tabUrl = tab.url 
}); 
chrome.cookies.get({url: tabUrl, name: 'token'}, function(cookie) { 
  document.getElementById("token").innerHTML = cookie.value 
});

这段代码里，chrome.tabs.getSelected是异步任务，它的回调函数会在主线程空闲时才执行，而后面的chrome.cookies.get是同步跟着执行的，这时候tabUrl还没被赋值，所以url参数是无效的。

解决方法很简单：把需要用到tab.url的代码全部放进chrome.tabs.getSelected的回调函数里，这样就能保证只有拿到当前标签页的URL后，才去调用获取Cookie的方法。正确的代码如下：

chrome.tabs.getSelected(null, function(tab) { 
  chrome.cookies.get({url: tab.url, name: 'expa_token'}, function(cookie) { 
    document.getElementById("token").innerHTML = cookie.value 
  }); 
});

另外还要提醒一句：别忘了在你的扩展manifest.json里配置好必要的权限，不然API会调用失败：

"permissions": [
  "tabs",
  "cookies",
  "<all_urls>" // 如果只针对特定域名，可以改成比如"https://example.com/*"
]

内容的提问来源于stack exchange，提问作者manh.vu