手把手教你开发浏览器插件-保存页面元素数据为json或csv

原创 已于 2025-07-24 09:51:15 修改 · 383 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#json #javascript #开发语言

于 2025-07-22 17:03:31 首次发布

主要功能是获取页面列表元素数据并保存为JSON或CSV格式。
插件包含manifest.json配置文件、后台脚本background.js、内容脚本content.js、弹出窗口popup.html及其相关JS/CSS文件。
核心功能通过changePageColor函数实现，该函数提取页面中特定class的元素数据，支持JSON和CSV两种导出格式。

文件夹目录结构
在这里插入图片描述
icon.png
在这里插入图片描述

插件配置文件 manifest.json

{
  "manifest_version": 3,
  "name": "我的第一个扩展",
  "version": "1.0",
  "description": "一个简单的浏览器扩展示例",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png"
    }
  },
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon16.png"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content.js"
      ]
    }
  ]
}

background.js

// 后台脚本，持续运行的扩展进程
console.log("后台脚本已加载");

// 示例：监听浏览器事件
chrome.runtime.onInstalled.addListener(() => {
    console.log("扩展已安装或更新");
});

// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log("收到消息:", message);
    sendResponse({reply: "消息已收到"});
});

content.js

console.log("内容脚本已加载到当前页面");

// 示例：在所有页面上添加一个小标记
const marker = document.createElement('div');
marker.textContent = '我的扩展已加载-王帆';
marker.style.position = 'fixed';
marker.style.bottom = '10px';
marker.style.right = '10px';
marker.style.backgroundColor = 'yellow';
marker.style.padding = '5px';
marker.style.zIndex = '9999';
document.body.appendChild(marker);

popup.html

<!DOCTYPE html>
<html>
<meta charset="utf-8"></meta>
<head>
    <style>
        body {
            width: 300px;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        #box {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        button {
            padding: 8px 12px;
            color: white;
            border: 3px solid; /* 初始边框设为透明 */
            border-radius: 4px;
            cursor: pointer;
            flex: 1 0 45%;
            animation: borderBreathing 2s infinite ease-in-out; /* 应用呼吸灯效果 */
        }

        /* 为每个按钮添加独特的动画 */
        #changeColor {
            background-color: #1e9fff;
            border-color: #1e9fff;
            animation-name: borderBreathingBlue;
        }

        #getElementData {
            background-color: #ffb800;
            border-color: #ffb800;
            animation-name: borderBreathingYellow;
        }

        #getTitle {
            background-color: #ff5722;
            border-color: #ff5722;
            animation-name: borderBreathingRed;
        }

        /* 呼吸灯效果动画 */
        @keyframes borderBreathing {
            0% {
                border-color: transparent; /* 初始时边框透明 */
            }
            25% {
                border-color: #ff00ff; /* 在25%时变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            50% {
                border-color: currentColor; /* 中间时边框变为当前按钮的颜色 */
                box-shadow: 0 0 6px 2px currentColor; /* 增加按钮的颜色阴影效果 */
            }
            75% {
                border-color: #ff00ff; /* 在75%时再次变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            100% {
                border-color: transparent; /* 结束时边框透明 */
                box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0); /* 恢复无阴影 */
            }
        }

        /* 为每种颜色分别定制呼吸灯效果 */
        @keyframes borderBreathingBlue {
            0% {
                border-color: transparent;
            }
            25% {
                border-color: #ff00ff; /* 在25%时变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            50% {
                border-color: #1e9fff; /* 中间时变为蓝色 */
                box-shadow: 0 0 6px 2px #1e9fff;
            }
            75% {
                border-color: #ff00ff; /* 在75%时再次变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            100% {
                border-color: transparent;
                box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0);
            }
        }

        @keyframes borderBreathingYellow {
            0% {
                border-color: transparent;
            }
            25% {
                border-color: #ff00ff; /* 在25%时变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            50% {
                border-color: #ffb800; /* 中间时变为黄色 */
                box-shadow: 0 0 6px 2px #ffb800;
            }
            75% {
                border-color: #ff00ff; /* 在75%时再次变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            100% {
                border-color: transparent;
                box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0);
            }
        }

        @keyframes borderBreathingRed {
            0% {
                border-color: transparent;
            }
            25% {
                border-color: #ff00ff; /* 在25%时变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            50% {
                border-color: #ff5722; /* 中间时变为红色 */
                box-shadow: 0 0 6px 2px #ff5722;
            }
            75% {
                border-color: #ff00ff; /* 在75%时再次变为紫色 */
                box-shadow: 0 0 6px 2px #ff00ff; /* 增加紫色的阴影效果 */
            }
            100% {
                border-color: transparent;
                box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0);
            }
        }

    </style>
    <title>扩展</title>
</head>
<body>
<h2>我的扩展</h2>
<p>这是一个简单的浏览器扩展</p>
<div id="box">
    <button id="changeColor">改变页面颜色</button>
    <button id="getElementData">获取元素数据</button>
    <button id="getTitle">获取页面标题</button>
</div>
<!-- 浏览器插件-新版本(采集数据demo) -->
<script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('changeColor').addEventListener('click', async () => {
    try {
        console.log("按钮点击事件触发");

        const tabsAll = await chrome.tabs.query({});

        const tabs = await chrome.tabs.query({active: true, currentWindow: true});
        if (!tabs || tabs.length === 0) {
            throw new Error("没有找到活动标签页");
        }

        const tab = tabs[0];
        if (!tab.id) {
            throw new Error("标签页ID无效");
        }

        console.log("准备执行脚本，标签页ID:", tab.id);

        await chrome.scripting.executeScript({
            target: {tabId: tab.id},
            func: changePageColor,
            args: [tabsAll, tab]
        });

        console.log("脚本执行成功");
    } catch (error) {
        console.error("执行脚本失败:", error);
        // 可选：在弹出窗口中显示错误信息
        const errorElement = document.createElement('div');
        errorElement.style.color = 'red';
        errorElement.textContent = `错误: ${error.message}`;
        document.body.appendChild(errorElement);
    }
});


function changePageColor(tabs, tab) {
    console.log(tabs);
    console.log(tab);
    try {
        const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        console.log("正在改变背景颜色为:", randomColor);
        document.body.style.backgroundColor = randomColor;
        chrome.runtime.sendMessage({action: 'someAction', data: 'myData'}, (response) => {
            console.log('收到背景页的响应:', response.reply);
        });
    } catch (error) {
        console.error("内容脚本执行出错:", error);
    }
}

document.getElementById('getElementData').addEventListener('click', async () => {
    try {
        console.log("按钮点击事件触发");

        const tabsAll = await chrome.tabs.query({});

        const tabs = await chrome.tabs.query({active: true, currentWindow: true});
        if (!tabs || tabs.length === 0) {
            throw new Error("没有找到活动标签页");
        }

        const tab = tabs[0];
        if (!tab.id) {
            throw new Error("标签页ID无效");
        }

        console.log("准备执行脚本，标签页ID:", tab.id);

        await chrome.scripting.executeScript({
            target: {tabId: tab.id},
            func: getPageElementData,
            args: [tabsAll, tab]
        });

        console.log("脚本执行成功");
    } catch (error) {
        console.error("执行脚本失败:", error);
        // 可选：在弹出窗口中显示错误信息
        const errorElement = document.createElement('div');
        errorElement.style.color = 'red';
        errorElement.textContent = `错误: ${error.message}`;
        document.body.appendChild(errorElement);
    }
});

function getPageElementData(tabs, tab) {
    console.log(tabs);
    console.log(tab);
    try {
        // 获取 ul class="datu" 的所有 li 元素
        const datuList = document.querySelectorAll('.datu li');
        console.log(datuList)
        // 循环获取 div class="datu-mingzi" 为药品名称 div class="datu-compamy" 为厂家
        const datuInfo = [];
        for (let i = 0; i < datuList.length; i++) {
            const datu = datuList[i];
            const mingzi = datu.querySelector('.datu-mingzi');
            datuInfo.push({
                mingzi: mingzi.innerText
            });
        }
        console.log(datuInfo);
        // 将数据保存为 JSON 文件
        // const blob = new Blob([JSON.stringify(datuInfo, null, 2)], { type: 'application/json' });
        // const link = document.createElement('a');
        // link.href = URL.createObjectURL(blob);
        // link.download = 'datuInfo.json';
        // link.click();


        // 转换 JSON 数据为 CSV
        function convertToCSV(jsonData) {
            const keys = Object.keys(jsonData[0]);  // 获取对象的键名（表头）
            const header = keys.join(',');          // 生成表头
            const rows = jsonData.map(row => keys.map(key => row[key]).join(','));  // 生成每行数据

            return [header, ...rows].join('\n');  // 返回最终的 CSV 字符串
        }

        const csvData = convertToCSV(datuInfo);
        // 创建 CSV 文件并下载
        const blob = new Blob([csvData], {type: 'text/csv'});
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'datuInfo.csv';
        link.click();

        chrome.runtime.sendMessage({action: 'someAction', data: 'myData'}, (response) => {
            console.log('收到背景页的响应:', response.reply);
        });

    } catch (error) {
        console.error("内容脚本执行出错:", error);
    }
}

document.getElementById('getTitle').addEventListener('click', async () => {
    try {
        console.log("按钮点击事件触发");

        const tabsAll = await chrome.tabs.query({});

        const tabs = await chrome.tabs.query({active: true, currentWindow: true});
        if (!tabs || tabs.length === 0) {
            throw new Error("没有找到活动标签页");
        }

        const tab = tabs[0];
        if (!tab.id) {
            throw new Error("标签页ID无效");
        }

        console.log("准备执行脚本，标签页ID:", tab.id);

        await chrome.scripting.executeScript({
            target: {tabId: tab.id},
            func: getPageTitle,
            args: [tabsAll, tab]
        });

        console.log("脚本执行成功");
    } catch (error) {
        console.error("执行脚本失败:", error);
        // 可选：在弹出窗口中显示错误信息
        const errorElement = document.createElement('div');
        errorElement.style.color = 'red';
        errorElement.textContent = `错误: ${error.message}`;
        document.body.appendChild(errorElement);
    }
});

function getPageTitle(tabs, tab) {
    console.log(tabs);
    console.log(tab);
    try {
        // 获取页面标题
        const pageTitle = document.title;
        console.log('页面标题:', pageTitle);

        chrome.runtime.sendMessage({action: 'someAction', data: 'myData'}, (response) => {
            console.log('收到背景页的响应:', response.reply);
        });
    } catch (error) {
        console.error("内容脚本执行出错:", error);
    }
}

styles.css

body{
    font-family: Arial;
    width:250px;
    padding:10px;
    background:#f8f9fa;
}

button{
    background:#007bff;
    border: none;
    color: white;
    padding:10px;
    width:100%;
    cursor: pointer;
    border-radius:5px;
}
-天道酬勤-
关注
【Python高阶开发】7. 工业数据血缘追踪入门到实战：OpenLineage手把手教程
专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域，希望和大家共同进步！
08-13 1086
摘要：工业数据从传感器到决策的流转链路复杂，数据血缘追踪是解决“数据从哪来、到哪去、谁处理过”的核心技术。本文从工业场景实际需求出发，用通俗语言讲解数据血缘的价值，介绍开源工具OpenLineage的基本原理，并通过虚拟半导体工厂案例，手把手教你部署OpenLineage、集成工业数据处理流程、追踪设备到模型的全链路数据。内容包括Docker部署、Spark集成、工业设备元数据扩展等实操步骤，附完整代码和执行效果。即使是新手，也能跟着完成从部署到问题排查的全流程，让工业数据真正可追溯、可信任。
如何轻松爬取 TikTok 评论？手把手教你高效采集数据！
pzhyy的博客
03-13 2081
在大数据时代，爬取 TikTok 评论已成为市场分析和用户研究的重要方式。Tapicker 作为一款高效的TikTok 采集器，可以帮助用户轻松完成TikTok 采集任务，并将数据用于数据分析、数字营销、潜在客户挖掘等场景。如果你正在寻找一款易用且强大的TikTok 采集软件，不妨试试 Tapicker，让数据采集更智能、更便捷！
手把手教你实现小红书数据采集工具：从 GUI 界面到数据存储全流程
m0_73690216的博客
08-07 1740
在数据分析、市场调研或内容创作中，从小红书等平台获取结构化数据往往是第一步。但手动复制粘贴效率低下，而市面上的采集工具要么功能受限，要么操作复杂。今天我们就来手把手实现一个「小红书数据采集工具」，包含可视化界面、自动滚动加载、数据解析与存储等功能，即使是新手也能轻松上手。
【手把手教安装】pyharm安装教程（包括常用库和插件）
热门推荐
momo_via的播客
01-08 1万+
pycharm安装以及常用python库、pycharm使用小技巧（插件、快捷键等）
手把手教你入门 ONLYOFFICE 8.2 版本的新功能
VincentYoung的专栏
12-27 3069
ONLYOFFICE 是一款开源的办公软件，包括文档编辑器、表格编辑器、演示文稿编辑器等，可以在线编辑文档、表格和演示文稿，支持多人实时协作。ONLYOFFICE 的主要特点包括：开源：ONLYOFFICE 是开源软件，可以自由地下载、安装和使用，无需支付任何费用。兼容性：ONLYOFFICE 的文档、表格和演示文稿格式与 Microsoft Office 兼容，可以无缝地打开和保存 Microsoft Office 文件。
【基础】性能测试，从0到实战（手把手教，非常实用）
2301_78276982的博客
06-05 1154
基于协议来模拟用户发送的请求（业务模拟），对服务器形成一定负载。时间性能空间性能与界面无关工业化的性能测试工具，能支持大量用户，提供详细的报表来提供测试分析的数量支持的协议多使用C语言来编写的优点1.支持用户量大（以万为单位）2.提供精确的报表3.支持ip欺骗缺点1.收费2.体积大3.无法定制存放可执行文件和配置文件jmeter.bat:windows的启动文件jmeter.log：日志文件jmeter.sh：linux的启动文件。
手把手教你用Python+Flask搭建可上线的音乐推荐Web系统（含源码）
FuncFun的博客
10-05 1127
手把手教你构建可上线的音乐推荐Python系统，解决个性化推荐开发难题。基于Python+Flask实现Web服务，涵盖协同过滤算法、用户行为分析与前后端交互逻辑，适合学习与项目实战。含完整源码，值得收藏。
【性能测试基础】，从0到实战（手把手教，非常实用）
m0_58026506的博客
02-21 604
一、性能基础什么是性能测试--->本质?基于协议来模拟用户发送的请求（业务模拟），对服务器形成一定负载。关注点：时间性能空间性能与界面无关性能测试分类性能测试（狭义）性能测试方法是通过模拟生产环境运行的业务压力量和使用场景组合，测试系统性能是否满足生产性能要求。通俗地讲，这种方法就是要在特定的运行条件下来验证系统能力状态。负载测试通过在被测系统上进行不断加压，直到性能指标达到极限，例如“响应时间”超过了预定指标或某种资源已经达到了饱和状态。压力测试（强度测试）
Python开发从入门到精通(上) - 基础编程
YunWisdom
01-16 2232
本书致力于让读者通过阅读、学习及实践成为Python大师。我们从“Hello, World！”开始，一步一步走向精通Python的道路。在这趟旅程中，你将已经不再是新手，而将成为拥有Python的核心技能的大师，这趟通往未来的旅程只是刚刚开始。我们通过不断进步与探索，去探索未知和科学。记住Python是一个强大且灵活的工具，读者朋友们请永远保持好奇心，继续探索数据科学、人工智能、Web开发等领域，让Python陪伴你走得更远！
【手把手教你实践】：火狐浏览器SQLite Manager插件在数据备份与恢复中的应用
[【手把手教你实践】：火狐浏览器SQLite Manager插件在数据备份与恢复中的应用](https://linuxhint.com/wp-content/uploads/2018/02/sq3-1024x382.png) # 摘要 火狐浏览器的SQLite Manager插件是管理和操作SQLite...
搭建本地商城环境全攻略：手把手教你配置PHP+MySQL开发调试流程（含避坑指南）
# 本地商城系统全链路搭建与调优实战：从零到高可用的工程化实践 ...但问题来了：为什么很多人明明照着教程一步步操作，最后却卡在“页面空白”、“数据库连不上”、“Xdebug断点不生效”这种看似低级实则致命
【'Mario'框架实战秘籍】：手把手教你编写和运行第一个测试案例
!... # 摘要 本文全面介绍了'Mario'测试框架，包括其核心概念、安装步骤、测试用例的编写与管理，以及如何在不同项目环境中应用和扩展该框架...此外，文章还分析了'Mario'框架在敏捷开发和大型项目中的应用实例，并分享了
吴恩达新课程：Agentic AI（笔记12）
最新发布
cfy2401926342的博客
12-08 579
摘要：本文介绍了Agent系统中的规划设计模式，该模式使智能体能够自主决定执行复杂任务的工具调用序列，无需硬编码。以客服助理Agent为例，通过提供工具集和LLM编写结构化执行计划（如JSON格式），系统可灵活处理复杂查询。该模式扩展了任务范围，提高了灵活性，但也存在结果不稳定等风险。推荐使用Huggingface社区的smolagents框架，其简洁易用，适合开发者入门和定制化系统。结构化输出（如JSON）确保计划可靠解析和执行，提升系统稳定性。
微信小程序读取接口文件流
海阔天空
12-04 91
微信小程序读取接口中的文件流
单片机 使用 cJson 添加 无符号 32 位数值（uint32_t）溢出问题的解决办法
weixin_46158019的博客
12-05 422
的最大值（2147483647）时，数据不正常。，使用的是 ARMCC 系统工具链 ，文件。单片机 使用在 cJSON 中添加无符号32位（）数据出现「溢出」。）数据 ，超过 有符号32位(，查看此函数 调用关系 —>cJson 使用的函数是。
观测云告警对接华为 WeLink 最佳实践
观测云的博客
12-08 198
本文介绍如何将观测云告警信息实时推送至 WeLink，帮助用户第一时间掌握系统运行状态，实现企业高效、安全的在线协作能力。
protobuf[2]
qq_47987543的博客
12-07 664
本文介绍了使用Protobuf高效处理批量数据和时间信息的实践方法。首先展示了如何通过repeated字段批量上传传感器数据，包括proto文件定义和C++实现，重点说明了repeated字段的高效操作方法。其次详细讲解了使用Protobuf内置的Timestamp类型替代传统int64时间戳的实践，通过TimeUtil工具类实现时间的获取和格式化，并演示了转换为JSON时的可读性优势。文章提供了完整的代码示例，包括proto文件定义、C++实现以及编译运行方法，帮助开发者掌握Protobuf在这些场景下的
Python爬虫实战：面向对象编程在淘宝商品数据抓取中的应用
wbryze的博客
12-03 706
本文介绍了使用Python面向对象编程构建淘宝商品爬虫的方法，重点解决2024年淘宝平台的反爬机制。文章详细阐述了爬虫类的设计思路，包括基类构建、请求重试机制、随机延迟控制和动态请求头管理等核心功能。通过继承实现特定爬虫类，结合JSON数据提取和HTML解析技术获取商品信息，并提供了应对验证码、滑块等反爬措施的解决方案。该爬虫设计具有模块化、可扩展的特点，能有效提高数据采集的稳定性和效率。
springmvc项目应用层级
safsdfooo的博客
12-05 983
拦截器（Interceptor）是SpringMVC提供的组件，用于在请求处理前后执行特定逻辑。特性拦截器（Interceptor）过滤器（Filter）归属SpringMVC框架Servlet规范拦截范围只拦截Controller请求拦截所有请求（包括静态资源）依赖注入支持Spring依赖注入不支持（需要特殊处理）执行顺序Controller前后Servlet前后// 1. 创建拦截器@Component@Autowired@Override。
手把手教你安装vue-devtools浏览器插件
- 如果在安装过程中遇到问题，比如插件不加载或功能无法正常使用，可能需要清除浏览器缓存，关闭浏览器，重新打开浏览器并按照上述步骤重新安装。 - 确保下载的vue-devtools是最新版本，旧版本可能会存在兼容性...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值