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

忘是亡心i 2023-10-04 20:22 55阅读 0赞

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

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

![b2f2bfba39c14d50919c1b00bfcb7fbe.png][]

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

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

然后在js文件中编写一个方法：![a7847a7e89604f3d86549c51c73c9a39.png][] 第一个红框是获取当前站点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][https_developer.chrome.com_docs_extensions_reference_cookies_method-getAll]

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

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

![6c6ea0106da34157ba6bef9135b52dc4.png][]

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

![f98b28507f714b9d9e196f3c470ea9dc.png][]

[b2f2bfba39c14d50919c1b00bfcb7fbe.png]: https://img-blog.csdnimg.cn/b2f2bfba39c14d50919c1b00bfcb7fbe.png
[a7847a7e89604f3d86549c51c73c9a39.png]: https://img-blog.csdnimg.cn/a7847a7e89604f3d86549c51c73c9a39.png
[https_developer.chrome.com_docs_extensions_reference_cookies_method-getAll]: https://developer.chrome.com/docs/extensions/reference/cookies/#method-getAll
[798a64a1e8db4836ba8edc6ebb9574d8.png]: https://img-blog.csdnimg.cn/798a64a1e8db4836ba8edc6ebb9574d8.png
[6c6ea0106da34157ba6bef9135b52dc4.png]: https://img-blog.csdnimg.cn/6c6ea0106da34157ba6bef9135b52dc4.png
[f98b28507f714b9d9e196f3c470ea9dc.png]: https://img-blog.csdnimg.cn/f98b28507f714b9d9e196f3c470ea9dc.png