浏览器插件实现复制并粘贴cookie、localStorage、sessionStorage信息功能

已于 2025-02-21 11:36:39 修改
阅读量1.9k 收藏 42
点赞数 28
文章标签： javascript 前端 chrome devtools
于 2025-02-21 11:34:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn__qiao/article/details/145771843
版权

浏览器插件实现cookie、localStorage、sessionStorage信息复制粘贴功能

背景

在日常开发中，我们总是会先在本地环境进行开发调试代码，但在开发过程中又依赖测试环境的一些数据配置信息，因此我们会通过各种方式将本地环境获取测试环境的信息配置，例如配置域名代理，或者将测试环境的数据作为mock数据供本地调用，又或者将测试环境的用户登录信息cookie复制到本地。本章讲述开发一个将cookie信息快速复制、粘贴小功能的浏览器插件。

插件功能概述

  1. 复制功能
    • 从当前页面获取cookie、sessionStorage、localStorage数据。
    • 用户可以选择哪些信息（如：cookie、sessionStorage、localStorage）需要复制。
  2. 粘贴功能
    • 将选中的信息粘贴到目标页面
    • 目标页面可以是当前打开的页面或一个新的tab页

插件结构

  1. 插件结构如下：
  • manifest.json：插件的元数据和权限配置。
  • contentScript.js：内容脚本，处理页面信息的复制与粘贴。
  • popup.html：插件的用户界面，用于选择复制和粘贴的内容。
  • popup.js：插件界面逻辑，处理用户操作。
  • icon.png：插件的图标文件。

话不多说，直接上代码

manifest.json

插件的manifest.json文件配置了插件的基本信息和权限

{
    "manifest_version": 3,
    "name": "Copy Cookie & Storage",
    "version": "0.0.1",
    "description": "实现cookie、sessionStorage、localStorage信息复制与粘贴功能的插件",
    "permissions": ["cookies", "activeTab", "sessions"],
    "host_permissions": [
        "*://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["contentScript.js"]
      }
    ],
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/icon.png",
            "32": "/icon.png",
            "48": "/icon.png",
            "128": "/icon.png"
        }
    },
    "icons": {
        "16": "/icon.png",
        "32": "/icon.png",
        "48": "/icon.png",
        "128": "/icon.png"
    },
    "author": "milk"
}

contentScript.js

contentScript.js文件负责从当前页面提取信息，并将信息粘贴到目标页面。

// content_script.js

// 监听请求获取当前 tab 的 cookies
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    // 可以在这里对消息进行处理
    if (message.name === "from_pupop_get_storages") {
        
        const allLocalStorage = {};
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value = localStorage.getItem(key);
            allLocalStorage[key] = value;
        }

        // 获取所有sessionStorage键值对
        const allSessionStorage = {};
        for (let i = 0; i < sessionStorage.length; i++) {
            const key = sessionStorage.key(i);
            const value = sessionStorage.getItem(key);
            allSessionStorage[key] = value;
        }

        sendResponse({
            local: allLocalStorage,
            session: allSessionStorage,
        })
    }

    if (message.name === "from_pupop_send_local_storage") {
        for (const key in message.value) {
            if (Object.hasOwnProperty.call(message.value, key)) {
                const element = message.value[key];
                localStorage.setItem(key, element)
            }
        }
    }

    if (message.name === "from_pupop_send_session_storage") {
        for (const key in message.value) {
            if (Object.hasOwnProperty.call(message.value, key)) {
                const element = message.value[key];
                sessionStorage.setItem(key, element)
            }
        }
    }

    if (message.name === "from_pupop_clear_storages") {
        if (message.value.includes('sessionStorage')) {
            sessionStorage.clear();
        }
        if (message.value.includes('localStorage')) {
            localStorage.clear();
        }
    }

    // 如果需要，可以向popup.js发送回复消息
    // sendResponse({ received: true });
});

popup.html

这是插件的用户界面，允许用户选择要复制的信息，并粘贴到目标页面

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                min-width: 320px;
                overflow-x: hidden;
                font-family: Arial, sans-serif;
                font-size: 12px;
            }
            #container {
                min-height: 210px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 6px;
                position: relative;
            }
            .welcomeLabel {
                position: absolute;
                top: 90px;
                left: 50%;
                margin-left: -90px;
                font-size: 22px;
                font-weight: 600;
                width: 180px;
                text-align: center;
                font-family: fantasy;
                color: #544f4f;
            }
            .titile {
                font-weight: 600;
                font-size: 14px;
                text-align: center;
            }
            .radio-rows {
                font-size: 14px;
                font-weight: 600;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-direction: column;
            }

            .radio-rows button {
                margin: 10px 0;
                padding: 5px 10px;
                width: 140px;
                display: flex;
                align-items: center;
            }
            .radio-rows input {
                margin-top: 0;
            }
            .logoWrapper {
                flex: 1;
                text-align: center;
            }
            .logoWrapper img {
                max-height: 64px;
            }
            .formWrapper1,
            .formWrapper2 {
                display: flex;
                flex-direction: column;
                display: none;
            }
            .container1 .formWrapper1 {
                display: block;
            }
            .container2 .formWrapper2 {
                display: block;
            }
            .successIcon {
                width: 20px;
                margin-right: 10px;
            }
            .successCopy {
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 14px;
                margin-bottom: 10px;
            }
            .successPasteLabel {
                display: none;
            }
            .inputWrapper {
                display: flex;
                flex-direction: column;
            }
            .inputWrapper label {
                font-weight: bold;
            }
            input[type='text'] {
                width: 100%;
                border: 2px solid #aaa;
                border-radius: 4px;
                margin: 8px 0;
                outline: none;
                padding: 8px;
                box-sizing: border-box;
                transition: 0.3s;
            }
            input[type='text']:focus {
                border-color: dodgerBlue;
                box-shadow: 0 0 8px 0 dodgerBlue;
            }
            .buttonWrapper {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-left: -10px;
            }
            button {
                height: 30px;
                flex: 1;
                margin-left: 10px;
                background-color: #3498db;
                border: unset;
                border-radius: 4px;
                color: #fff;
                cursor: pointer;
            }
            button:hover {
                background-color: #217dbb;
            }
            .footer {
                font-size: 10px;
                margin-top: 8px;
                color: #756e6e;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .footer span {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .footer img {
                width: 12px;
                margin: 0 4px;
            }
            .link {
                font-weight: bold;
                color: #756e6e;
            }
            .versionLabel {
                position: absolute;
                top: 6px;
                right: 6px;
                font-size: 12px;
                color: #756e6e;
            }
        </style>
        <script src="popup.js"></script>
    </head>
    <body>
        <span class="versionLabel">v0.0.1</span>
        <div id="container">
            <div class="titile">选择你要拷贝或清除的数据</div>
            <div class="radio-rows">
                <button class="radio-row">localStorage:<input class="radio" type="radio" name="localStorage" value="localStorage" /></button>
                <button class="radio-row">SessionStorage:<input class="radio" type="radio" name="SessionStorage" value="sessionStorage" /></button>
                <button class="radio-row">Cookies:<input class="radio" type="radio" name="Cookies" value="cookies" /></button>
            </div>
            <div class="formWrapper1">
                <div id="successPasteLabel" class="successPasteLabel">
                    <div class="successCopy">
                        <img class="successIcon" src="images/success.png" />
                        <span>拷贝成功</span>
                    </div>
                </div>
                <div class="buttonWrapper">
                    <button id="copyButton">拷贝</button>
                    <button id="clearButton">清除</button>
                </div>
            </div>
            <div class="formWrapper2">
                <div class="successCopy">
                    <img class="successIcon" src="images/success.png" />
                    <span>Copied Successfully!</span>
                </div>
                <div class="buttonWrapper">
                    <button id="pasteButton">粘贴</button>
                    <button id="resetButton">重置</button>
                </div>
            </div>
        </div>
    </body>
</html>

popup.js

popup.js负责处理UI的交互逻辑，向contentScript.js发送请求来获取或粘贴数据

const copyContentSet = new Set(['localStorage', 'sessionStorage', 'cookies']);

const onCopyButtonClick = () => {
    chrome.tabs.query(
        {
            status: 'complete',
            windowId: chrome.windows.WINDOW_ID_CURRENT,
            active: true,
        },
        tab => {
            chrome.tabs.sendMessage(tab[0].id, { name: "from_pupop_get_storages" }, function(response) {
                if (response) {
                    localStorage.copyStorageData = JSON.stringify(response)
                }
            });

            chrome.cookies.getAll({ url: tab[0].url }, cookie => {
                localStorage.copyCookieData = JSON.stringify(cookie);
                setTimeout(() => handlePopupUI('copy'), 100);
            });
        },
    );
};

const removeOldCookies = (cookies, index, url) => {
    if (!cookies[index]) return;

    try {
        chrome.cookies.remove({
            url: url + cookies[index].path,
            name: cookies[index].name,
        }, () => removeOldCookies(cookies, index + 1, url));
    } catch (e) {
        console.error(`移除cookie错误: ${error}`, cookies[index].name);
    }
};

const clearStorages = () => {
    chrome.tabs.query(
        {
            status: 'complete',
            windowId: chrome.windows.WINDOW_ID_CURRENT,
            active: true,
        },
        tab => {
            chrome.tabs.sendMessage(tab[0].id, { name: "from_pupop_clear_storages", value: Array.from(copyContentSet.values()).join(',') }, function(response) {
                document
                    .getElementById('clearButton').innerHTML = '已清除'
            });

            if (copyContentSet.has('cookies')) {
                chrome.cookies.getAll({ url: tab[0].url }, cookies => {
                    removeOldCookies(cookies, 0, tab[0].url);
                });
            }
        },
    );
}

const onPasteButtonClick = async () => {
    let copyCookieData;
    let copyStorageData
    try {
        copyCookieData = localStorage.copyCookieData
            ? JSON.parse(localStorage.copyCookieData)
            : null;
        copyStorageData = localStorage.copyStorageData
            ? JSON.parse(localStorage.copyStorageData)
            : null;
    } catch (e) {
        return alert('粘贴cookie报错，请重试');
    }

    if (!copyCookieData)
        return alert('请先复制cookie');

    chrome.tabs.query(
        {
            status: 'complete',
            windowId: chrome.windows.WINDOW_ID_CURRENT,
            active: true,
        },
        tab => {
            if (!tab?.[0]?.url) {
                return alert('URL无效');
            }

            if (copyContentSet.has('cookies')) {
                chrome.cookies.getAll({ url: tab[0].url }, cookies => {
                    copyCookieData.forEach(({ name, value, path }) => {
                        try {
                            chrome.cookies.set({
                                url: tab[0].url,
                                name,
                                value,
                            });
                        } catch (error) {
                            console.error(`报错: ${error}`);
                        }
                    });
                    onResetButtonClick('paste');
                });
            }

            if (copyContentSet.has('localStorage')) {
                chrome.tabs.sendMessage(tab[0].id, { name: "from_pupop_send_local_storage", value: copyStorageData.local });
            }

            if (copyContentSet.has('sessionStorage')) {
                chrome.tabs.sendMessage(tab[0].id, { name: "from_pupop_send_session_storage", value: copyStorageData.session });
            }
        }
    );
};

const onResetButtonClick = action => {
    localStorage.removeItem('copyCookieData');
    handlePopupUI(action);
};

const handlePopupUI = action => {
    const copyCookieData = localStorage.copyCookieData;
    const containerElement = document.getElementById('container');
    containerElement.setAttribute('class', '');

    if (copyCookieData) {
        containerElement.classList.add('container2');
    } else {
        containerElement.classList.add('container1');
    }

    const successPasteLabel = document.getElementById('successPasteLabel');
    const welcomeLabel = document.getElementById('welcomeLabel');
    if (action === 'paste') {
        successPasteLabel.setAttribute('style', 'display: block');
    } else {
        successPasteLabel.setAttribute('style', 'display: none');
    }
};

window.addEventListener('load', () => {
    handlePopupUI();

    document
        .getElementById('copyButton')
        .addEventListener('click', onCopyButtonClick);
    document
        .getElementById('clearButton')
        .addEventListener('click', clearStorages);
    document
        .getElementById('pasteButton')
        .addEventListener('click', onPasteButtonClick);
    document
        .getElementById('resetButton')
        .addEventListener('click', () => onResetButtonClick('reset'));

    const radios = document
    .getElementsByClassName('radio')

    for (let index = 0; index < radios.length; index++) {
        const element = radios[index];
        element.checked = true;
        element.parentElement.addEventListener('click', (evt) => {
            if (copyContentSet.has(element.value)) {
                copyContentSet.delete(element.value)
                element.checked = false
                element.removeAttribute('checked')
            } else {
                copyContentSet.add(element.value)
                element.checked = true
            }
        })
    }
});

测试和调试

  1. 打开chrome浏览器，进入chrome://extensions/
  2. 启用开发者模式并点击 加载已解压的扩展程序。
  3. 选择你的插件文件夹并加载插件。
  4. 你可以在浏览器工具栏点击插件图标来使用它。

总结

这个浏览器插件实现了复制和粘贴 cookie、sessionStorage 和 localStorage 信息的功能。用户可以选择哪些信息需要复制，并且将其粘贴到当前页面或其他页面。通过使用 Chrome 的 cookies 和 storage API，插件能够灵活地获取和设置数据。

使用插件快速获取cookies
m0_73689941的博客
06-27 3863
在使用需要用cookies的工具时，这个插件可以快速方便的获取cookies
【chrome插件】获取浏览器cookie
分享博主日常学习和使用的一些技术
09-17 3839
Chrome 插件（扩展程序）是一种强大的工具，可以提升浏览器的功能。当你想要获取网页的 Cookie 信息时，自制一个简单的插件可能会比使用第三方工具更方便。即使你是一个新手，只要按照以下步骤，你也能轻松完成。恭喜你！你已经成功创建了一个可以获取并显示当前页面及其父级域名的 Cookie 的 Chrome 插件。希望这篇教程能帮助到你，让你对 Chrome 插件的开发有了更深入的了解，如果确实帮到了你，可以关注一下，不迷路。
Get Cookie-crx 插件 2.0版本
10-24
浏览器扩展插件Get Cookie 2.0版本，可快速获取cookie等信息
手动获取Cookie的方法（以chrome浏览器为例）
最新发布
m0_62205683的博客
04-02 1917
(3) 选择你所需要访问的主题（以留学为例）。(2) 完成账号登录（手机号+验证码/密码）(2) 保存到如下Python代码即可。(1) 点击该请求 → 找到。(1) 刷新页面（F5。Network（网络）
快速复制 Cookies 插件开发
paopao_pop的博客
01-16 800
快速复制 Cookies 插件开发
cookie插件
zichuanhuo221的博客
12-28 603
/** * Created by mouwe on 2016/12/15. * 这个文件[小插件]：提供了几个函数，专门用于cookie的增删改查操作的！ * 1. 保存cookie值 * 2. 读取cookie值 * 3. 修改cookie值 * 4. 删除cookie值 * * cookie中存放的数据 key=value [键值对] * 值：有可能是汉字 汉字在处理的时
Cookies Quick Manager插件
rnn0921的博客
08-09 704
下载路径：https://github.com/ysard/cookie-quick-manager。或者在火狐扩展中搜索Cooies Quick Manager。使用burpsuite抓包发现 cookie已修改。使用Cookies Quick Manager插件。删除当前网站的上下文 cookie。修改一下cookie，然后保存。搜索当前网站的 cookie。删除当前网站的 cookie。删除当前网站的本地存储。搜索所有cookie。
cookies插件
Hanzwii的博客
01-25 621
npm i cookiesvar Cookies = require("cookies"); app.use(function(req,res,next){ req.cookies = new Cookies(req,res); req.userinfo = {}; if(req.cookies.get("userinfo")){ try{
实现Web会话共享的Session Share-crx插件功能解析
- 目标用户收到会话信息后，复制到浏览器的地址栏中，并点击“接管cookie并加载网站”选项或会话共享图标来加载会话。 3. 网站运营商集成方法 网站运营商可以将Session Share-crx插件集成到他们的网站中，允许他们...
Cookie插件
10-27
js操作cookie需要很长一段代码,十分麻烦,引入这个js文件后,我们就能像在服务端操作session一样,使用key/value了.如:写入cookie $.cookie("name","value"),读取cookie $.cookie("name")
editcookie插件
11-26
EditThisCookie是一款可以管理Chrome浏览器中cookies的插件，用户可以利用EditThisCookie添加，删除，编辑，搜索，锁定和屏蔽cookies。（360极速浏览器可用）
cookie操作插件
11-24
对cookie操作插件 可满足对cookie的大多数操作 比如得到cookie值 设置cookie值
cookies.js插件
03-29
javascript、jquery获取cookies，设置cookies的插件。
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
09-04
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板
【前端学习指南】Chrome Dev Tools 浏览器调试技巧
范同学的学习历程
11-19 1171
浏览器调试模式下的各个调试工具是常用的工具集，能够帮助开发者理解、调试和优化网页。浏览器工具打开方式：打开命令菜单快捷键：相关命令：dark theme -->DevTool切换成黑色主题light theme -->切换成白色主题Capture area screenshot -->选择范围截图Capture full size screenshot -->选择整个页面截图Capture node screenshot -->捕捉一个node节点截图通过Dock命令可以改变窗口位置Undock命令可
一步步使用SpringBoot结合Vue实现登录和用户管理功能
2301_78145364的博客
04-21 1202
按照官方文档，来进行MP的分页。作为Mybatis的增强工具，MP自然是支持自定义sql的。其实在MP中，单表操作基本上是不用自己写sql。这里只是为了演示MP的自定义sql，毕竟在实际应用中，批量操作、多表操作还是更适合自定义sql实现。修改pom.xml，在 中添加：**/*.xmltrue配置文件：在application.properties中添加mapper扫描路径及实体类别名包今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！
Vue.JS项目实战：Fintax采访功能开发指南
- 一旦看到终端中打印的链接，复制该链接并粘贴到浏览器地址栏，即可打开运行中的Vue.js项目。 3. 项目开发目标 本项目的目标是通过一系列实际开发任务来提升开发者对Vue.js核心特性的理解。具体目标包括： - 类和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值