借用chrome插件给开发提效

背景

在最近正在开发的项目中，启动本地项目的时候，不同项目在处理登录态的时候都会有不同的方式，如此情景，在多个项目并行开发时会有很多困扰，因此考虑借用chrome插件中对cookie处理能力来 提高这块的效率

目前不同项目所遇到的情景

1. 复制cookie信息到本地服务的cookie中
2. 登录线上地址，手动把 控制台application 的 xxx 的 security 勾掉，然后打开本地dev.XXcorp.com （需要配置host： 127.0.0.1 dev.XXcorp.com）
3. 登录线上url，从线上application-cookie中的 复制 XXX_ID 到 本地服务控制台的 application-cookie中

解决方案

• 1 和 2 的解决方法一样，可以通过 复制源地址的cookie 到 目标地址，使用 复制cookie

• 3 的解决方案 与 1、2 不同，需要单独处理下cookie，修改cookie

修改cookie

这是这次记录本篇文章的原因，因为是最新增加的功能，复制cookie是去年的逻辑了。

由于设计的 cookie操作，需要在 插件的 manifest.json 加上权限

借用chrome 插件的 background script 操作cookie:

chrome.cookies.onChanged.addListener(function (changeInfo) {
  const cookie = changeInfo.cookie;

  // 过滤 58name 并且 secure为true防止 死循环，xxxName 为需要调整的 cookie name
  if (cookie.name === "xxxName" && cookie.secure) {
    var updateInfo = {
      url: `https://${cookie.domain.slice(1)}${cookie.path}`, // 构建完整的 URL
      name: cookie.name,
      value: cookie.value,
      domain: cookie.domain,
      path: cookie.path,
      secure: false,
    };
    console.log("log===> chrome.cookies.getAll cookies", cookie);

    chrome.cookies.set(updateInfo, function () {
      console.log("Cookie updated successfully", updateInfo);
    });
  }
});

复制cookie

popup页面的逻辑 以及 如何 通信到 background的逻辑就不赘述了，主要是 保存了 source 和 target的信息，然后 background去做处理，这里 直接介绍 background的部分：

chrome.cookies.onChanged.addListener(function (changeInfo) {
  const cookie = changeInfo.cookie;
  const curCookieDomain = cookie.domain;

  getItem(storagePageCookie, async function (result) {
    const data: IConfingItem = result?.curGroup ?? result.list[0];
    if (!data || !data.target || !data.source) {
      return;
    }

    const domain = data.source
      .replace(/(https|http):\/\//g, "")
      .split("?")[0]
      .split("/")[0];

    const needSet = domain.includes(curCookieDomain);

    if (needSet) {
      const target = data.target;
      const domain = target
        .replace(/(https|http):\/\//g, "")
        .split("?")[0]
        .split("/")[0];
      let secure = false;
      if (target.indexOf("https") === 0) {
        secure = true;
      }

      if (changeInfo.removed) {
        chrome.cookies.remove({
          url: target.split("?")[0],
          name: cookie.name,
        });
      } else {
        chrome.cookies.set({
          url: target.split("?")[0],
          name: cookie.name,
          value: cookie.value,
          domain: domain,
          path: cookie.path,
          secure: secure,
          httpOnly: cookie.httpOnly,
          expirationDate: cookie.expirationDate,
        });
      }
    }
  });
});

如此一来，配置好 原域名 和 目标域名 点击 执行即可完成 cookie同步，无需再手动 去复制 cookie到 本地 和 本地服务对应的页面 application-cookie 里。