How to Use Raycast to Retrieve Specific Website Cookie Using Chrome Launcher and Chrome Remote Interface in JavaScript

raycast_get_chrome_cookie.ts

import { Detail } from "@raycast/api";
import { useEffect, useState } from "react";
const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');

const domain = 'https://github.com/';
export default function Command() {
  const [cookie, setCookie] = useState(null);

  useEffect(() => {
    const getCookie = async () => {
      // 需要获取cookie的网站域名
      const url = domain;
      // 需要获取的cookie名称
      const cookieName = 'preferred_color_mode'

      try {
        // 启动 chrome
        // https://github.com/GoogleChrome/chrome-launcher#launching-headless-chrome
        const chrome = await chromeLauncher.launch({
          chromeFlags: ['--headless']
        });

        // 连接到 chrome
        // https://github.com/cyrus-and/chrome-remote-interface
        const protocol = await CDP({ port: chrome.port });
        const { Network, Page } = protocol;
        await Promise.all([Network.enable(), Page.enable()]);
        // 导航到网站
        await Page.navigate({ url });
        await Page.loadEventFired();
        // 获取所有cookie
        const { cookies } = await Network.getAllCookies();

        // 查找指定cookie
        const cookie = cookies.find(c => c.name === cookieName);

        // 及时关闭 chrome 进程和连接
        await protocol.close();
        await chrome.kill();

        // 更新状态进行渲染
        if (cookie) {
          setCookie(`${cookie.name}=${cookie.value}`);
        } else {
          setCookie(`Cookie ${cookieName} not found`);
        }
      } catch (error) {
        setCookie(`Error: ${error.message}`);
      }
    };

    getCookie();
  }, []);

  return (
    <Detail markdown={`Cookie from ${domain}:\n\n${cookie}`} />
  )
}