如何实现Chrome扩展点击从简易API随机获取唯一数据？

架构老林

2026-7-26

实现Chrome扩展：点击获取API随机唯一结果

步骤1：创建Chrome扩展核心配置文件

Chrome扩展必须包含manifest.json配置文件，添加以下内容：

{
  "manifest_version": 3,
  "name": "随机名字生成器",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

可自行补充图标文件，或暂时忽略default_icon字段后续完善

步骤2：修改弹出页面HTML，添加交互触发区域

调整原有HTML为Chrome扩展弹出页结构，增加可点击的交互区域：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机名字</title>
    <style>
        body {
            width: 220px;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
        }
        #displayName {
            margin: 0;
            padding: 12px;
            border-radius: 8px;
            background-color: #f5f5f5;
            transition: background-color 0.2s;
        }
        #displayName:hover {
            background-color: #e8e8e8;
        }
    </style>
</head>
<body>
    <p id="displayName">点击获取随机名字🧡</p>
    <script src="app.js"></script>
</body>
</html>

步骤3：修改JS实现点击触发、随机唯一选择逻辑

将原有页面加载请求改为点击触发，同时处理数据去重与重复选择规避：

// 存储已选名字，避免重复
let usedNames = [];
// 存储去重后的完整名字列表
let uniqueNames = [];

const displayEl = document.getElementById('displayName');

// 点击触发请求与随机选择
displayEl.addEventListener('click', async () => {
    try {
        // 首次加载时请求API并处理数据
        if (uniqueNames.length === 0) {
            const response = await fetch('https://script.google.com/macros/s/AKfycbxOb2CGelDHQDYe7rRABLPRfuqxuFkDwZs4rq1yK0WDs-JEUkFdMftPhUuJjK3WmrOo/exec');
            const apiData = await response.json();
            
            // 对返回的name字段去重
            const nameSet = new Set(apiData.data.map(item => item.name));
            uniqueNames = Array.from(nameSet);
        }

        // 筛选未被选择过的名字
        let availableNames = uniqueNames.filter(name => !usedNames.includes(name));
        
        // 所有名字选完后重置已选列表
        if (availableNames.length === 0) {
            usedNames = [];
            availableNames = [...uniqueNames];
        }

        // 随机选择一个名字
        const randomIndex = Math.floor(Math.random() * availableNames.length);
        const selectedName = availableNames[randomIndex];
        
        // 标记为已选
        usedNames.push(selectedName);
        
        // 更新显示内容
        displayEl.textContent = selectedName;
    } catch (error) {
        displayEl.textContent = '加载失败，请重试';
        console.error('请求错误:', error);
    }
});

步骤4：扩展文件结构

你的扩展文件夹需包含以下文件：

manifest.json
popup.html
app.js
可选：图标文件（如icon16.png、icon48.png）

加载扩展到Chrome

打开Chrome，输入chrome://extensions/进入扩展管理页
开启右上角「开发者模式」
点击「加载已解压的扩展程序」，选择你的扩展文件夹

完成后，点击Chrome工具栏的扩展图标，弹出窗口内点击文本区域，即可随机获取唯一的名字结果，所有名字轮选完毕后会重置循环。

内容的提问来源于stack exchange，提问作者Akash Das

如何实现Chrome扩展点击从简易API随机获取唯一数据？

步骤1：创建Chrome扩展核心配置文件 #

步骤2：修改弹出页面HTML，添加交互触发区域 #

步骤3：修改JS实现点击触发、随机唯一选择逻辑 #

步骤4：扩展文件结构 #

加载扩展到Chrome #

步骤1：创建Chrome扩展核心配置文件

步骤2：修改弹出页面HTML，添加交互触发区域

步骤3：修改JS实现点击触发、随机唯一选择逻辑

步骤4：扩展文件结构

加载扩展到Chrome