chrome extensions插件获取当前url和网站cookie学习v3版本

我现在有一个需求是想要拿到某些网站的cookie，如果是手动一个一个打开检查，然后发一个请求，再复制拿cookie未免有点过于复杂了，所以就像偷懒一下，用插件获取一下：

想要获取当前站点的cookie，得先获取到当前站点的url吧，所以在manifest.json中添加权限：

permissions里面增加tabs和cookies，是为了用tabs获取当前网站的url，cookies就是为了获取cookie的

host_permissions里面的"*://*/*" 和  "<all_urls>" 表示所有站点，应该要其中一个就可以表示所有站点了

然后在js文件中编写一个方法： 第一个红框是获取当前站点url的，第二个chrome.cookies.getAll()是获取cookie的：

  // 获取网站的cookie，并打印出来
  function handleCookie(params) {
    chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
      let url = tabs[0].url;
      // use `url` here inside the callback because it's asynchronous!
      console.log('url--', url);
      chrome.cookies.getAll({ url }, function (cookies) {
        const resList = cookies.map(item => {
          return `${item.name}=${item.value}`
        })
        const cookieStr = resList.join(";")
        console.log("cookies-----", cookieStr);
        document.getElementById("cookies").innerHTML = cookieStr
      });
    });
  }

 根据官网的api可以看到：

https://developer.chrome.com/docs/extensions/reference/cookies/#method-getAll

 需要传递一个对象进去，和一个回调函数，第一个对象的作用其实可以过滤cookie，如果是空对象，就会获取到所有网站的cookie ，如果传一个url过去，就会过滤出这个url站点的cookie.

最后我在html页面放置了一个节点用于展示这个cookie：

最后看结果吧：成功获取到cookie并展示