比比主题自动签到插件技术实现解析

原创 奶狗 发表于 5 天前 浏览 2921 分类 日常
AD

广告位出租

一、项目概述

比比主题自动签到插件是一款基于 Chrome Extension Manifest V3 开发的浏览器插件，旨在为用户提供自动化签到服务。插件支持多站点管理、浏览器启动自动签到、每日定时签到等核心功能，并提供完善的通知提醒机制。

二、技术栈分析

2.1 核心技术栈

技术版本用途
Chrome ExtensionManifest V3浏览器插件框架
Service Worker-后台任务管理
HTML5/CSS3-弹窗界面
JavaScript (ES6+)-核心逻辑实现
Chrome Storage API-数据持久化
Chrome Notifications API-通知提醒
Chrome Alarms API-定时任务
Fetch API-HTTP请求

2.2 Manifest V3 核心特性

插件采用最新的 Manifest V3 标准，相比 V2 具有以下优势：

  • Service Worker 替代 Background Page ：更轻量、更高效的后台执行环境
  • 声明式权限 ：更安全的权限管理机制
  • Content Security Policy ：更强的安全性保障
{
    "manifest_version": 3,
    "permissions": ["storage", "alarms", "notifications"],
    "host_permissions": ["*://*/*"],
    "background": {"service_worker": "background.js"}
}

三、核心实现逻辑

3.1 架构设计

插件采用经典的 MVC 架构模式：

┌─────────────────────────────────────────────────────────────┐
│                     用户界面层 (Popup)                      │
│  popup.html ──→ popup.js ──→ 用户交互、站点管理、状态展示     │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                      业务逻辑层 (Background)                │
│  background.js ──→ 自动签到、定时任务、API调用、数据管理       │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                      数据持久化层 (Storage)                 │
│  Chrome Storage API ──→ 站点配置、签到记录、状态数据          │
└─────────────────────────────────────────────────────────────┘

3.2 多站点管理实现

站点数据结构设计：

// 站点对象结构
{
    id: 1625078400000,           // 唯一标识（时间戳）
    name: "奶狗网",           // 站点名称（可选）
    url: "https://example.com",   // 站点链接
    lastSignDate: "2026-04-29",  // 上次签到日期
    lastPoints: 10,              // 上次获得积分
    continuousDays: 5             // 连续签到天数
}

站点管理核心方法：

// 加载站点列表
function loadSites(callback) {
    chrome.storage.local.get(['signSites'], function(result) {
        sites = result.signSites || [];
        if (callback) callback();
    });
}

// 保存站点列表
function saveSites() {
    chrome.storage.local.set({ signSites: sites });
}

// 添加站点
function addSite(name, url) {
    const newSite = {
        id: Date.now(),
        name: name || '',
        url: url,
        lastSignDate: '',
        lastPoints: 0,
        continuousDays: 0
    };
    sites.push(newSite);
    saveSites();
}

3.3 自动签到机制

3.3.1 触发时机

插件设计了三重自动签到触发机制：

触发时机延迟时间触发条件
浏览器启动2秒chrome.runtime.onStartup
插件安装1.5秒chrome.runtime.onInstalled
每日定时24小时chrome.alarms.create('autoSignDaily')
// 浏览器启动自动签到
chrome.runtime.onStartup.addListener(function() {
    loadSites(function() {
        setTimeout(autoSignAllSites, 2000);
    });
});

// 插件安装自动签到
chrome.runtime.onInstalled.addListener(function(details) {
    loadSites(function() {
        if (details.reason === 'install') {
            chrome.alarms.create('autoSignDaily', { periodInMinutes: 1440 });
        }
        if (sites.length > 0) {
            setTimeout(autoSignAllSites, 1500);
        }
    });
});

3.3.2 批量签到流程

async function autoSignAllSites() {
    if (sites.length === 0) return;
    
    let successCount = 0, failCount = 0, alreadySignedCount = 0;
    const results = [];

    // 串行遍历所有站点执行签到
    for (const site of sites) {
        const result = await signSite(site);
        results.push(result);
        
        if (result.success) successCount++;
        else if (result.alreadySigned) alreadySignedCount++;
        else failCount++;
    }

    // 构建签到摘要并发送通知
    const summary = buildSummary(results);
    showNotification('签到完成', summary);
}

3.3.3 单个站点签到实现

async function signSite(site) {
    const today = new Date().toISOString().split('T')[0];
    
    // 检查今日是否已签到
    if (site.lastSignDate === today) {
        return { success: false, alreadySigned: true, ... };
    }

    try {
        const url = new URL(site.url);
        const ajaxUrl = `${url.origin}/wp-admin/admin-ajax.php`;

        const response = await fetch(ajaxUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: 'action=bee_sign',
            credentials: 'include',
            timeout: 30000
        });

        const data = await response.json();

        if (data.code === 'success') {
            // 更新签到记录
            site.lastSignDate = today;
            site.lastPoints = data.data?.points || 0;
            site.continuousDays = data.data?.continuous_days || 0;
            saveSites();

            return { success: true, points: site.lastPoints, ... };
        }
        // ... 错误处理
    } catch (error) {
        return { success: false, message: error.message };
    }
}

3.4 通知提醒机制

插件实现了完善的通知系统，支持多种场景的消息提醒：

function showNotification(title, message) {
    chrome.notifications.create({
        type: 'basic',
        iconUrl: 'icons/icon48.png',
        title: title,
        message: message,
        priority: 1
    });
}

function buildSummary(results) {
    const successResults = results.filter(r => r.success);
    const alreadySignedResults = results.filter(r => r.alreadySigned);
    const failResults = results.filter(r => !r.success && !r.alreadySigned);

    let lines = [];
    
    if (successResults.length > 0) {
        const successLine = successResults.map(r => `${r.name}: +${r.points}分`).join('; ');
        lines.push(`✓ 成功: ${successLine}`);
    }
    
    if (failResults.length > 0) {
        const failLine = failResults.map(r => `${r.name}: ${r.message}`).join('; ');
        lines.push(`✗ 失败: ${failLine}`);
    }
    
    return lines.join('\n');
}

3.5 日志系统

为便于调试和问题追踪，插件实现了详细的日志记录机制：

function log(message, type = 'info') {
    const timestamp = new Date().toLocaleString('zh-CN');
    const prefix = type === 'error' ? '[ERROR]' : type === 'success' ? '[SUCCESS]' : '[INFO]';
    console.log(`[比比主题签到 ${timestamp}] ${prefix} ${message}`);
}

日志输出示例

[比比主题签到 2026/4/29 10:00:00] [INFO] 浏览器启动，准备自动签到...
[比比主题签到 2026/4/29 10:00:02] [INFO] 开始批量签到，共 2 个站点
[比比主题签到 2026/4/29 10:00:02] [SUCCESS] 站点A - 签到成功！获得 10 积分
[比比主题签到 2026/4/29 10:00:03] [INFO] 批量签到结束: 成功 1 个, 已签到 1 个, 失败 0 个

四、前端界面实现

4.1 弹窗布局设计

弹窗采用响应式设计，主要包含以下区域：

<div class="header">
    <h1>比比主题自动签到</h1>
    <p>浏览器启动自动签到</p>
</div>

<div class="status-bar" id="statusBar">...</div>

<div class="input-group">
    <input type="text" id="siteName" placeholder="站点名称">
    <input type="url" id="siteUrl" placeholder="站点链接">
</div>

<div class="btn-group">
    <button class="btn" id="addBtn">添加站点</button>
    <button class="btn btn-secondary" id="signAllBtn">全部签到</button>
</div>

<div class="site-list" id="siteList">...</div>

4.2 站点列表渲染

function refreshSiteList() {
    chrome.runtime.sendMessage({ action: 'getStatus' }, function(response) {
        const sites = response.sites;
        
        siteList.innerHTML = sites.map((site, index) => `
            <div class="site-item">
                <div class="site-header">
                    <div>
                        <div class="site-name">${site.name || getDomain(site.url)}</div>
                        <div class="site-url">${site.url}</div>
                    </div>
                    <div class="site-actions">
                        <button onclick="signSite(${index})">
                            ${site.todaySigned ? '已签到' : '签到'}
                        </button>
                        <button onclick="showDeleteModal(${site.id})">删除</button>
                    </div>
                </div>
                <span class="site-status ${site.todaySigned ? 'signed' : 'not-signed'}">
                    ${site.todaySigned ? '✓ 今日已签到' : '○ 待签到'}
                </span>
                <div class="site-info">
                    <span>连续签到: ${site.continuousDays} 天</span>
                    <span>上次获得: ${site.lastPoints} 积分</span>
                </div>
            </div>
        `).join('');
    });
}

五、安全与性能考量

5.1 安全性

  • 权限最小化 ：仅申请必要的权限（storage、alarms、notifications）
  • Content Security Policy ：限制脚本和样式来源
  • 请求凭证处理 ：使用 credentials: 'include' 确保会话保持

5.2 性能优化

  • 异步处理 ：所有 I/O 操作采用异步方式
  • 延迟执行 ：浏览器启动后延迟 2 秒再执行签到，避免影响启动性能
  • 串行请求 ：批量签到采用串行方式，避免同时发起大量请求

六、总结

比比子自动签到插件通过合理的架构设计和技术选型，实现了一个功能完善、性能优良的自动化签到工具。核心亮点包括：

  1. 多站点管理 ：支持添加、删除、管理多个签到站点
  2. 智能触发 ：浏览器启动自动签到 + 每日定时签到
  3. 实时反馈 ：完善的通知系统和状态展示
  4. 错误追踪 ：详细的日志记录便于问题排查
  5. 用户体验 ：简洁直观的操作界面
    该插件为 Chrome Extension Manifest V3 的最佳实践提供了一个很好的参考案例。
允许转载，请保留本文出处
#插件
上一篇
Docker 部署 Umami 避坑指南

喜欢这篇内容吗？

相关内容

比比主题自动签到插件技术实现解析

  • 日常

Docker 部署 Umami 避坑指南

  • 日常

阿里云，腾讯云，华为云等众多云计算服务商ASN号大全

  • 教程
合作
服务
关于
精选友链
联系我们
Copyright © 2026 奶狗网

豫ICP备19018117号｜豫公网安备41132402411745号