手把手教你制作Cookie、Local、Session数据导出插件

Rocky大约 4 分钟

温馨提示：本文所述插件仅供学习交流，使用前请确保获得网站主人同意。偷看别人底裤是犯法的，但扒自己网站的底裤...那叫技术探索！

一、缘起：当网页开始穿秋裤

某个月黑风高的夜晚，我正在调试一个满是bug的网站。这个傲娇的网页把数据层层包裹——localStorage穿着保暖内衣，sessionStorage套着羊毛衫，Cookie还裹着三层羽绒服。每次调试都要打开开发者工具扒拉它们，简直比给猫咪穿袜子还费劲！

于是我拍案而起："是时候发明网页扒裤神器了！"

二、扒裤三件套制作指南

1. 先扒第一层：localStorage保险箱

// 这是你网页的保险箱密码本
const extractLocalStorage = () => {
  const data = {};
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    data[key] = localStorage.getItem(key);
  }
  return data;
};

技术解读：

这就像用磁铁吸开邻居家的保险箱（当然我们只吸自己家的），把里面的金条（数据）全部倒出来拍个全家福。

2. 再扒第二层：sessionStorage比基尼

// 网页的临时泳装存放处
const extractSessionStorage = () => {
  const data = {};
  for (let i = 0; i < sessionStorage.length; i++) {
    const key = sessionStorage.key(i);
    data[key] = sessionStorage.getItem(key);
  }
  return data;
};

生活小贴士：

sessionStorage就像泳池更衣室的储物柜，关掉浏览器这个更衣室就会自动清空。所以扒裤要趁早，关门前记得拍照！

3. 终极目标：Cookie的皇帝新衣

// 获取网站通行证大全
chrome.cookies.getAll({ url }, (cookies) => {
  const cookieJar = cookies.map(cookie => ({
    name: cookie.name,
    value: cookie.value,
    domain: cookie.domain,
    expiry: cookie.expirationDate
  }));
});

哲学思考：

Cookie就像网站颁发的通行证，但我们经常不知道这些通行证上写了什么羞羞的内容。现在，我们有了显微镜！

三、给扒裤神器穿上性感外衣

<div class="btn-group">
  <button id="exportLocal">扒开localStorage</button>
  <button id="exportSession">掀翻sessionStorage</button>
  <button id="exportCookie">撕碎Cookie</button>
</div>

设计理念：

三个按钮要像不同风格的比基尼——蓝色代表深海探秘（local），绿色象征丛林冒险（session），红色彰显烈焰红唇（Cookie）

2. 数据保存仪式感

const downloadJSON = (data, type) => {
  const filename = `${type}_底裤照_${new Date().toISOString()}.json`;
  // 此处省略文件生成魔法...
};

仪式说明：

给每份数据打上精确到毫秒的时间戳，就像给扒下来的底裤贴上"案发时间"标签（大雾）

四、三秒让网页裸奔（完整代码）

完整代码仓库地址open in new window （注：此链接纯属虚构，请勿尝试访问）

// 此处应有300行代码
// 但为了世界和平，我决定只放一个颜文字
chrome.runtime.onInstalled.addListener(() => {
  console.log("(๑•̀ㅂ•́)و✧ 扒裤小分队已就位！");
});

五、法律与道德的边缘蹦迪

使用前：请默念三遍《程序员职业道德规范》
使用时：建议搭配正义披风使用
使用后：及时删除敏感数据，就像看完不该看的网站要清空历史记录

结语：让我们文明观猴

现在，当网页再对你藏着掖着时，你可以优雅地掏出这个插件："宝贝，让我看看你的底裤...啊不是，底层数据！"

最后送上程序员专属祝福：愿你的console永远没有error，愿你的数据永远不用debug！

系统推荐

随机毒鸡汤：2018年，88喽。

手把手教你制作Cookie、Local、Session数据导出插件

# 一、缘起：当网页开始穿秋裤

# 二、扒裤三件套制作指南

# 1. 先扒第一层：localStorage保险箱

# 2. 再扒第二层：sessionStorage比基尼

# 3. 终极目标：Cookie的皇帝新衣

# 三、给扒裤神器穿上性感外衣

# 1. 按钮时装秀（popup.html）

# 2. 数据保存仪式感

# 四、三秒让网页裸奔（完整代码）

# 五、法律与道德的边缘蹦迪

# 结语：让我们文明观猴

# 系统推荐