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

原创

已于 2025-02-21 11:36:39 修改 · 2.3k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #chrome devtools

于 2025-02-21 11:34:20 首次发布

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

背景

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

插件功能概述

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

插件结构

插件结构如下：

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>

最低0.47元/天解锁文章