Chrome JS扩展获取Instagram Cookie问题：document.cookie缺失所需Cookie

• 为什么document.cookie只能拿到少量Cookie？
  那些看不到的Cookie都加了*HttpOnly*属性，浏览器会禁止前端JavaScript（包括你的content script）读取这类Cookie，目的是防范XSS攻击。而Cookie编辑器能拿到全量Cookie，是因为它调用了Chrome扩展专属的chrome.cookies API，这个API不受HttpOnly属性限制。

• 用chrome.cookies API获取全量Cookie的方法：

  1. 先确认扩展权限配置：你的manifest.json里已经有cookies权限，但建议在permissions数组里明确加上*://*.instagram.com/*，避免权限范围模糊导致的问题。
  2. 必须在**后台脚本（background script）**里调用chrome.cookies.getAll()，content script无法直接调用这个API。如果需要在content script中使用Cookie，可以通过消息传递机制让后台把数据传过来。

  示例代码：

  // background.js
  // 监听content script的消息请求
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'fetchInstagramCookies') {
      // 获取当前标签页对应域名的所有Cookie
      chrome.cookies.getAll({url: sender.tab.url}, (cookies) => {
        sendResponse({data: cookies});
      });
      return true; // 异步响应需返回true保持消息通道开放
    }
  });
  

  // content.js
  // 向后台发送获取Cookie的请求
  chrome.runtime.sendMessage({type: 'fetchInstagramCookies'}, (response) => {
    console.log('全量Instagram Cookie:', response.data);
    // 在这里处理拿到的Cookie数据
  });
  

• 注意事项：

  • 后台脚本需要在manifest.json中声明，比如添加"background": { "service_worker": "background.js" }（Manifest V3）或"background": { "scripts": ["background.js"] }（Manifest V2）。
  • 确保扩展的权限配置完全覆盖Instagram的域名，否则chrome.cookies API会返回空数据。

内容的提问来源于stack exchange，提问作者iskandar