【前端开发实战】从零开始开发Chrome浏览器扩展 - 快乐传播者项目完整教程

最新推荐文章于 2026-08-18 19:23:37 发布
原创 最新推荐文章于 2026-08-18 19:23:37 发布 · 2.2k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

【前端开发实战】从零开始开发Chrome浏览器扩展 - 快乐传播者项目完整教程

这里写目录标题

📖 前言

大家好！今天我将带领大家从零开始开发一个Chrome浏览器扩展项目 - 快乐传播者。这个项目不仅实用有趣，还能让你掌握现代浏览器扩展开发的核心技术。

通过本教程，你将学会：

  • Chrome扩展的Manifest V3规范
  • 现代JavaScript ES6+语法
  • 响应式CSS设计
  • 本地存储和通知系统
  • 内容脚本和后台脚本的使用
    在这里插入图片描述

🎯 项目介绍

快乐传播者是一个致力于主动创造和传播快乐的浏览器扩展工具，具有以下特色功能：

  • 🎉 随机快乐消息推送
  • 📸 快乐时刻记录分享
  • 😄 幽默内容推荐
  • 🎮 快乐挑战游戏
  • 📊 快乐影响力统计
    在这里插入图片描述
    在这里插入图片描述

🛠️ 技术栈

  • Manifest V3 - 最新Chrome扩展标准
  • 原生JavaScript - ES6+语法
  • CSS3 - 现代样式设计
  • Chrome Extension API - 浏览器扩展接口

📁 项目结构

HappyOne/
├── manifest.json          # 扩展配置文件
├── popup.html             # 弹出窗口界面
├── popup.js               # 弹出窗口逻辑
├── popup.css              # 弹出窗口样式
├── content.js             # 内容脚本
├── content.css            # 内容脚本样式
├── background.js          # 后台脚本
├── icons/                 # 图标文件夹
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md              # 项目说明

🚀 开始开发

第一步：创建项目基础结构

首先创建项目文件夹并初始化基础文件：

mkdir HappyOne
cd HappyOne

第二步：配置manifest.json

这是扩展的核心配置文件，定义了扩展的基本信息和权限：

{
  "manifest_version": 3,
  "name": "快乐传播者 - Happy Spreader",
  "version": "1.0.0",
  "description": "主动创造和传播快乐的浏览器扩展工具",
  "permissions": [
    "storage",
    "activeTab", 
    "notifications",
    "alarms"
  ],
  "host_permissions": [
    "https://*/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_title": "快乐传播者",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png", 
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

关键配置说明：

  • manifest_version: 3 - 使用最新的Manifest V3标准
  • permissions - 申请必要的权限
  • content_scripts - 注入到所有网页的脚本
  • background - 后台服务工作线程

第三步：创建弹出窗口界面

popup.html - 主界面结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快乐传播者</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <header class="header">
            <h1 class="title">🌟 快乐传播者</h1>
            <p class="subtitle">让世界充满快乐！</p>
        </header>

        <!-- 功能按钮区域 -->
        <div class="features">
            <button class="feature-btn" id="randomMessage">
                <span class="icon">🎉</span>
                <span class="text">随机快乐消息</span>
            </button>
            
            <button class="feature-btn" id="shareMoment">
                <span class="icon">📸</span>
                <span class="text">分享快乐时刻</span>
            </button>
            
            <button class="feature-btn" id="humorContent">
                <span class="icon">😄</span>
                <span class="text">幽默内容</span>
            </button>
            
            <button class="feature-btn" id="dailyChallenge">
                <span class="icon">🎮</span>
                <span class="text">每日挑战</span>
            </button>
            
            <button class="feature-btn" id="statistics">
                <span class="icon">📊</span>
                <span class="text">影响力统计</span>
            </button>
        </div>

        <!-- 结果显示区域 -->
        <div class="result-area" id="resultArea">
            <div class="result-content" id="resultContent"></div>
            <button class="copy-btn" id="copyBtn" style="display: none;">复制</button>
        </div>

        <!-- 底部信息 -->
        <footer class="footer">
            <p>今日已传播快乐 <span id="todayCount">0</span> 次</p>
        </footer>
    </div>
    
    <script src="popup.js"></script>
</body>
</html>

第四步：设计现代化样式

popup.css - 响应式设计：

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    width: 350px;
    min-height: 500px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 头部样式 */
.header {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 20px;
    text-align: center;
}

.title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 14px;
    opacity: 0.9;
}

/* 功能按钮样式 */
.features {
    padding: 20px;
    display: grid;
    gap: 15px;
}

.feature-btn {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
}

.feature-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.feature-btn .icon {
    font-size: 24px;
    margin-right: 15px;
}

/* 结果显示区域 */
.result-area {
    padding: 0 20px 20px;
    display: none;
}

.result-content {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
    border-left: 4px solid #667eea;
}

.copy-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* 底部样式 */
.footer {
    background: #f8f9fa;
    padding: 15px 20px;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    font-size: 14px;
    color: #666;
}

#todayCount {
    color: #667eea;
    font-weight: bold;
}

第五步：实现交互逻辑

popup.js - 核心功能实现：

// 快乐消息数据库
const happyMessages = [
    "🌟 今天又是充满希望的一天！",
    "😊 微笑是最好的语言，快乐是最好的礼物",
    "🌈 生活就像彩虹，需要经历风雨才能看到美丽",
    "💪 每一个挑战都是成长的机会",
    "🎉 快乐是会传染的，让我们一起传播正能量",
    "🌞 阳光总在风雨后，快乐总在坚持中",
    "✨ 你的笑容是世界上最美的风景",
    "🎊 今天也要开开心心的哦！",
    "💖 爱自己，爱生活，爱这个世界",
    "🚀 梦想在前方，快乐在路上",
    "🎵 生活就像一首歌，用心去感受它的美好",
    "🌺 花开不是为了花落，而是为了绽放",
    "🌟 你比想象中更强大，更美好",
    "🎭 人生如戏，但你是主角",
    "💎 你本身就是一颗闪耀的钻石"
];

// 幽默内容数据库
const humorContent = [
    "程序员笑话：为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 == Dec 25",
    "程序员日常：写代码时觉得自己是天才，调试时觉得自己是智障",
    "最浪漫的事：和代码一起变老，直到它不再报错",
    "程序员的爱情：if(you.love(me)) { return true; }",
    "调试的真相：99%的bug都是因为少了一个分号"
];

// 每日挑战任务
const dailyChallenges = [
    "今天对3个人说一句赞美的话",
    "帮助一个需要帮助的人",
    "分享一个有趣的笑话给朋友",
    "记录今天最开心的一件事",
    "给家人一个温暖的拥抱"
];

// DOM元素
const resultArea = document.getElementById('resultArea');
const resultContent = document.getElementById('resultContent');
const copyBtn = document.getElementById('copyBtn');
const todayCount = document.getElementById('todayCount');

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    loadTodayCount();
    setupEventListeners();
});

// 设置事件监听器
function setupEventListeners() {
    document.getElementById('randomMessage').addEventListener('click', showRandomMessage);
    document.getElementById('shareMoment').addEventListener('click', shareMoment);
    document.getElementById('humorContent').addEventListener('click', showHumorContent);
    document.getElementById('dailyChallenge').addEventListener('click', showDailyChallenge);
    document.getElementById('statistics').addEventListener('click', showStatistics);
    copyBtn.addEventListener('click', copyToClipboard);
}

// 显示随机快乐消息
function showRandomMessage() {
    const message = happyMessages[Math.floor(Math.random() * happyMessages.length)];
    displayResult(message, '🎉 快乐消息');
    updateTodayCount();
}

// 分享快乐时刻
function shareMoment() {
    const moment = prompt('请记录你的快乐时刻：');
    if (moment && moment.trim()) {
        const formattedMoment = `📸 快乐时刻：${moment}\n\n记录时间：${new Date().toLocaleString()}`;
        displayResult(formattedMoment, '📸 快乐时刻');
        saveMoment(moment);
        updateTodayCount();
    }
}

// 显示幽默内容
function showHumorContent() {
    const humor = humorContent[Math.floor(Math.random() * humorContent.length)];
    displayResult(humor, '😄 幽默内容');
    updateTodayCount();
}

// 显示每日挑战
function showDailyChallenge() {
    const challenge = dailyChallenges[Math.floor(Math.random() * dailyChallenges.length)];
    const challengeText = `🎮 今日挑战：${challenge}\n\n完成这个挑战，让世界更美好！`;
    displayResult(challengeText, '🎮 每日挑战');
    updateTodayCount();
}

// 显示统计信息
function showStatistics() {
    chrome.storage.local.get(['totalCount', 'moments'], function(result) {
        const totalCount = result.totalCount || 0;
        const moments = result.moments || [];
        
        const stats = `📊 快乐影响力统计\n\n` +
                     `总传播次数：${totalCount}\n` +
                     `快乐时刻记录：${moments.length} 条\n` +
                     `今日传播：${getTodayCount()} 次\n\n` +
                     `继续加油，让世界更美好！`;
        
        displayResult(stats, '📊 统计信息');
    });
}

// 显示结果
function displayResult(content, title) {
    resultContent.innerHTML = `<strong>${title}</strong><br><br>${content}`;
    resultArea.style.display = 'block';
    copyBtn.style.display = 'block';
}

// 复制到剪贴板
function copyToClipboard() {
    const text = resultContent.textContent;
    navigator.clipboard.writeText(text).then(function() {
        copyBtn.textContent = '已复制！';
        setTimeout(() => {
            copyBtn.textContent = '复制';
        }, 2000);
    });
}

// 保存快乐时刻
function saveMoment(moment) {
    chrome.storage.local.get(['moments'], function(result) {
        const moments = result.moments || [];
        moments.push({
            content: moment,
            timestamp: new Date().toISOString()
        });
        chrome.storage.local.set({ moments: moments });
    });
}

// 更新今日计数
function updateTodayCount() {
    const today = new Date().toDateString();
    chrome.storage.local.get(['todayCount', 'lastDate'], function(result) {
        let todayCount = result.todayCount || 0;
        const lastDate = result.lastDate;
        
        if (lastDate !== today) {
            todayCount = 1;
        } else {
            todayCount++;
        }
        
        chrome.storage.local.set({
            todayCount: todayCount,
            lastDate: today
        });
        
        document.getElementById('todayCount').textContent = todayCount;
    });
    
    // 更新总计数
    chrome.storage.local.get(['totalCount'], function(result) {
        const totalCount = (result.totalCount || 0) + 1;
        chrome.storage.local.set({ totalCount: totalCount });
    });
}

// 加载今日计数
function loadTodayCount() {
    chrome.storage.local.get(['todayCount', 'lastDate'], function(result) {
        const today = new Date().toDateString();
        if (result.lastDate === today) {
            document.getElementById('todayCount').textContent = result.todayCount || 0;
        } else {
            document.getElementById('todayCount').textContent = '0';
        }
    });
}

// 获取今日计数
function getTodayCount() {
    return document.getElementById('todayCount').textContent;
}

第六步：创建内容脚本

content.js - 在网页中注入快乐元素：

// 创建浮动快乐按钮
function createFloatingButton() {
    const button = document.createElement('div');
    button.id = 'happy-floating-btn';
    button.innerHTML = '😊';
    button.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        z-index: 10000;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        user-select: none;
    `;
    
    button.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.1)';
        this.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.3)';
    });
    
    button.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
        this.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.2)';
    });
    
    button.addEventListener('click', showRandomHappyElement);
    
    document.body.appendChild(button);
}

// 显示随机快乐元素
function showRandomHappyElement() {
    const happyEmojis = ['😊', '🌟', '🎉', '💖', '🌈', '✨', '🎊', '💪', '🌞', '🎵'];
    const emoji = happyEmojis[Math.floor(Math.random() * happyEmojis.length)];
    
    const element = document.createElement('div');
    element.innerHTML = emoji;
    element.style.cssText = `
        position: fixed;
        left: ${Math.random() * (window.innerWidth - 100)}px;
        top: ${Math.random() * (window.innerHeight - 100)}px;
        font-size: 40px;
        z-index: 9999;
        pointer-events: none;
        animation: floatUp 2s ease-out forwards;
    `;
    
    document.body.appendChild(element);
    
    setTimeout(() => {
        document.body.removeChild(element);
    }, 2000);
}

// 添加CSS动画
const style = document.createElement('style');
style.textContent = `
    @keyframes floatUp {
        0% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateY(-100px) scale(1.5);
        }
    }
`;
document.head.appendChild(style);

// 页面加载完成后创建浮动按钮
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', createFloatingButton);
} else {
    createFloatingButton();
}

// 监听来自popup的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action === 'showHappyMessage') {
        showRandomHappyElement();
        sendResponse({success: true});
    }
});

第七步：创建后台脚本

background.js - 后台服务工作线程：

// 安装时的初始化
chrome.runtime.onInstalled.addListener(function() {
    console.log('快乐传播者扩展已安装！');
    
    // 设置默认数据
    chrome.storage.local.set({
        totalCount: 0,
        todayCount: 0,
        moments: [],
        lastDate: new Date().toDateString()
    });
    
    // 创建定时提醒
    createReminderAlarm();
});

// 创建定时提醒
function createReminderAlarm() {
    chrome.alarms.create('happyReminder', {
        delayInMinutes: 60, // 每小时提醒一次
        periodInMinutes: 60
    });
}

// 监听定时器
chrome.alarms.onAlarm.addListener(function(alarm) {
    if (alarm.name === 'happyReminder') {
        showHappyNotification();
    }
});

// 显示快乐提醒通知
function showHappyNotification() {
    const messages = [
        "🌟 时间到啦！该传播一些快乐了！",
        "😊 休息一下，给自己一个微笑吧！",
        "🎉 快乐时刻到了，分享你的好心情！",
        "💖 记得关心身边的人，传递温暖！",
        "🌈 生活很美好，保持积极心态！"
    ];
    
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
    
    chrome.notifications.create({
        type: 'basic',
        iconUrl: 'icons/icon128.png',
        title: '快乐传播者',
        message: randomMessage
    });
}

// 监听扩展图标点击
chrome.action.onClicked.addListener(function(tab) {
    // 如果popup没有打开，发送消息到content script
    chrome.tabs.sendMessage(tab.id, {
        action: 'showHappyMessage'
    });
});

// 监听来自content script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action === 'updateCount') {
        updateStatistics(request.count);
        sendResponse({success: true});
    }
});

// 更新统计数据
function updateStatistics(count) {
    chrome.storage.local.get(['totalCount'], function(result) {
        const totalCount = (result.totalCount || 0) + count;
        chrome.storage.local.set({ totalCount: totalCount });
    });
}

第八步：创建图标文件

你需要准备三个尺寸的图标文件：

  • icons/icon16.png (16x16像素)
  • icons/icon48.png (48x48像素)
  • icons/icon128.png (128x128像素)

可以使用在线工具如Canva或Figma创建，或者使用现成的图标。

🚀 安装和测试

在Chrome中安装扩展

  1. 打开Chrome浏览器
  2. 访问 chrome://extensions/
  3. 开启右上角的"开发者模式"
  4. 点击"加载已解压的扩展程序"
  5. 选择你的项目文件夹
  6. 扩展安装完成！

测试功能

  1. 点击工具栏中的扩展图标
  2. 测试各个功能按钮
  3. 在任意网页上查看右下角的浮动按钮
  4. 检查通知功能是否正常工作

🎨 自定义和扩展

添加新功能

你可以轻松添加新功能，比如：

  • 天气提醒
  • 每日名言
  • 健康提醒
  • 学习计划

样式定制

修改CSS文件来自定义界面：

  • 更改颜色主题
  • 调整布局
  • 添加动画效果
  • 优化响应式设计

数据管理

扩展使用Chrome Storage API存储数据：

  • 本地存储：chrome.storage.local
  • 同步存储：chrome.storage.sync
  • 会话存储：chrome.storage.session

📱 发布到Chrome Web Store

完成开发后，你可以：

  1. 打包扩展文件
  2. 创建开发者账号
  3. 提交到Chrome Web Store
  4. 等待审核通过

🎯 项目亮点

  1. 现代化设计 - 使用渐变色彩和圆角设计
  2. 响应式布局 - 适配不同屏幕尺寸
  3. 丰富交互 - 动画效果和悬停反馈
  4. 数据持久化 - 本地存储用户数据
  5. 定时提醒 - 智能的快乐提醒机制
  6. 页面注入 - 在网页中注入快乐元素

💡 学习收获

通过这个项目，你学会了：

  • Manifest V3 的新特性和配置
  • Chrome Extension API 的使用方法
  • 现代JavaScript 的异步编程
  • CSS3 的动画和响应式设计
  • 本地存储 的数据管理
  • 内容脚本 的页面注入技术

🌟 总结

这个项目不仅实用有趣，更重要的是让你掌握了现代浏览器扩展开发的核心技术。通过实际项目练习，你将更好地理解前端开发的各个方面。

记住，编程不仅是技术，更是创造快乐的过程。希望这个项目能给你带来快乐，也能让你成为快乐的传播者！

项目源码：GitHub仓库

如果觉得有帮助，请点赞收藏支持！ 👍

标签
#chrome #前端 #html5 #javascript
手把手教你从0到1开发浏览器插件
热门推荐
熟悉JS拼写的FE
06-03 2万+
Chrome插件，官方名称extensions（扩展程序）；为了方便理解，以下都称为Chrome插件，或者简称插件，那么什么是Chrome插件呢？扩展程序是自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制Chrome的功能和行为。插件程序可以提供以下几个功能：生产力工具：网页内容丰富信息聚合乐趣和游戏可以通过点击更多 -> 扩展程序来查看所有安装的插件，或者直接打开插件标签页。
【JS】认识并实现一个chrome扩展程序
DevFrank的博客
08-16 722
从零开始认识并实现一个chrome扩展程序
5.1 Bash工具实现与提示词工程（智能体工程）
夏天又到了的专栏
08-16 196
在前面章节中，我们明确了通过注入System Prompt是智能体从“单次工具调用Demo”走向“成熟实用产品”的核心支撑，而工具的标准化实现与System Prompt的动态适配，则是上下文工程体系的两大基础落地模块。Bash作为类Unix与Windows环境下最常用的系统交互工具，能为智能体提供文件操作、系统状态查询、脚本执行等核心底层能力，是智能体拓展物理世界交互边界的重要抓手；
Conmi的正确答案——Chrome 启动被 2345 网址导航劫持的排查与修复记录
Conmi的博客
08-16 371
现象：每次打开 Chrome 都自动访问环境：Linux Mint 22.3 / Google Chrome 151。
自动化工程的构建
2401_87750511的博客
08-16 262
使用make/makefile构建自动化工程
DeepSeek自带的一些插件的功能介绍
水水不水啊的博客
08-16 296
本文介绍了DSH（DeepSeek Helper）的核心组件及其功能架构。DSH是一个基于插件化设计的AI代理系统，其核心运行引擎包括Agent循环、大语言模型适配器、本地代码执行沙箱和子Agent管理等模块。系统提供了丰富的工具集（如命令行执行、文件操作、网络搜索等）、会话记忆管理、Web用户界面以及底层开发支持。DSH采用"一切皆插件"的设计理念，各功能模块可灵活配置和替换，支持热更新和类型安全，同时通过沙箱和权限策略保障系统安全性。该系统既支持单任务处理，也能通过子Agent和长期目标管理实现复杂任务
【已解决】VS Code管理员模式调试Edge报错：Unable to Launch Browser？Chrome为何正常？终极排查指南
最新发布
weixin_42117463的博客
08-18 193
摘要： VS Code以管理员身份运行时，调试Edge浏览器报错“unable to launch browser”，而Chrome却正常。该问题源于Windows安全机制（UAC与进程完整性级别）与Edge严格的安全策略限制。解决方案包括：1）优先以非管理员模式运行VS Code；2）改用Chrome调试；3）通过attach模式手动启动Edge并附加调试器；4）使用VS Code内置浏览器或Edge原生开发者工具。理解权限冲突本质可帮助开发者灵活选择调试方案，提升开发效率。 关键词： VS Code调试
Python 操作/调试 已打开的 Chrome：简要说明
weixin_52236586的博客
08-16 260
用户平时从桌面、任务栏或开始菜单启动的 Chrome，默认不会开放 DevTools 远程调试端口。因此，Selenium 等自动化程序不能临时附加到这个已经运行的普通浏览器实例，也无法稳定读取当前页面的 DOM、点击元素或抓取结构化数据。远程调试端口必须在 Chrome开启，无法在 Chrome 已经启动后再动态补上。
ChromeOS 技术解析-Day19
m0_51089660的博客
08-16 339
ChromeOS是基于Linux内核的操作系统，但其设计理念与常规Linux发行版截然不同。它通过以下特性实现了独特的用户体验： 系统架构：以Chrome浏览器作为核心UI层，替代传统桌面环境，底层采用定制化Linux内核（基于Gentoo构建系统） 安全机制：只读根文件系统、dm-verity验证、自动更新和Titan C安全芯片构成多层防护 应用生态： 原生支持Web应用（PWA） 通过ARCVM运行Android应用 借助Crostini容器支持Linux应用
【chromeDownload】自定义组件：多用于登录框底部提供下载Chrome谷歌浏览器的链接
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-14 56
摘要：这段代码实现了一个Chrome浏览器下载推荐组件，包含浏览器推荐提示、Chrome图标展示以及三种下载方式（官网下载、在线安装包、离线安装包）。组件采用Vue框架开发，通过flex布局实现响应式设计，点击下载按钮会跳转对应链接（包括国内可访问的镜像地址）。样式部分使用SCSS编写，为下载按钮添加了悬停效果和点击动画，整体设计简洁实用。
手机ADB + Chrome调试（手机调试电脑本地环境）
weixin_46759354的博客
08-18 174
本文详细介绍了Android设备通过ADB连接电脑进行调试的完整流程。主要内容包括：1.工具准备与环境配置（下载platform-tools、配置环境变量）；2.手机端设置（开启开发者模式、USB调试）；3.连接设备步骤（物理连接、授权调试）；4.端口转发实现手机访问电脑本地服务；5.Chrome远程调试方法；6.常用ADB命令速查和常见问题解决方案。重点强调了数据线选择、USB调试授权、端口转发等关键环节的操作要点，并提供了详细的故障排查方法，适合需要调试移动端网页或应用的开发者参考。
高通学习24--XBL_CONFIG（TODO）
fanged的专栏
08-14 371
报错根因修复v2 状态机被“孤儿*/结尾的注释 ASSERT”卡死，吞掉后续 sectionv3 加先剥*/再判断v3 第一版把合法的多行注释闭合符*/也剥掉了v3 重写为完整注释感知状态机，合法注释透传wrapper 无法执行Windows CRLF 污染 shebangtr -d '\r'+ 自检开发环境无签名路径非致命，忽略文件（WSL 路径改动内容：把（SSC_QUP_2 的 SSC_4–7）从原配置改为Hi-Z（高阻/浮空）关键区别：原来 150–153 和 148–149 一样是。
工程如何打包并验证 Chrome 80 兼容性
老白干的zone
08-18 310
背景：本项目是一个基于 Vite 5 构建的大型 React 微前端应用（含 antd、echarts、dayjs 等重型依赖）。部分内网用户仍在使用（发布于 2020 年初，V8 8.0），而 Vite 默认按现代浏览器（原生 ESM、可选链、空值合并、Array.at()等）输出产物。本文总结我们如何在不放弃现代开发体验的前提下，让打包产物平滑运行在 Chrome 80 上，并给出可落地的验证流程。
Chrome 插件弹窗一直停留在初始的小尺寸 —— 你看到的小方块
Brightimoon的博客
08-15 102
形成一个循环依赖：内容永远等于弹窗视口本身，内容永远没有自己独立的尺寸，也永远不会"超出"弹窗的初始小视口。Chrome 找不到任何依据把弹窗放大，于是弹窗就停留在初始的小尺寸——你看到的小方块。Chrome 弹窗的尺寸规则：弹窗窗口不是固定大小，而是根据文档内容自适应——内容多宽多高，弹窗就开多大（上限 800×600）。弹窗视口高度 ──决定──▶ 文档内容高度（100dvh = 视口的 100%）文档内容高度 ──决定──▶ 弹窗窗口高度（按内容自适应）
Codex Chrome 插件 + Timeline Studio：构建可编辑的 AI 视频剪辑 Agent 工作流
baidu_19714719的博客
08-17 451
AI 视频剪辑的下一阶段，不应该只是生成速度更快、模型更大，或者生成按钮更加醒目。进入用户真实的浏览器工作环境；理解参考视频和产品页面；综合画面、语音、OCR 与运动证据；做出可解释的剪辑决策；将决策落实到多轨时间线；验证字幕、声音、镜头和最终导出；交付用户可以继续修改的工程。Codex Chrome 提供浏览器上下文，Skill 提供剪辑方法，Timeline Studio 则负责承载真实的视频工程。这套组合的价值，不是让 AI 取代时间线。
Pi ：上下文工程——Context Assembly、Compaction 与 Memor
2303_77143335的博客
08-15 651
这是本系列最重要的"横向能力"篇。前面所有篇都在讲"Agent 怎么运行"，这一篇讲。模型选错了可以换，上下文构造错了，Agent 会"越跑越傻"——这正是本系列一直强调"Context 是编译出来的"的完整展开。
工作流表单和流程设计前端
08-13 261
完整遵循 BPMN 2.0 官方规范，导出的 XML 可通用所有主流工作流引擎（Camunda、Flowable、Activiti）高级功能、AI 助理、源码授权为商业版，VForm3 / VForm：同类型 Vue 动态表单设计器。基于 SVG 绘图，不依赖 Flash / 客户端软件，所有渲染、编辑逻辑在前端完成；搭配使用：流程引擎（bpmn-js 画审批流程）+ FormCreate（配置每个审批节点的业务表单），bpmn.io，开源（MIT 协议），免费商用，GitHub 持续迭代更新。
ollama v0.32.14正式发布：WebP 自动转码、Qwen 系统消息兼容升级与 llama.cpp、MLX 更新全解析
福大大架构师每日一题
08-18 536
如果检测到输入为 WebP，则会先解码为图像，再编码为 PNG，最后将 PNG 数据传递给后续请求。可以确认的是，该文件属于 LLM 图片集成测试，并且此次 v0.32.14 的核心更新之一正是 llama-server 对 WebP 图片的转码处理。此外，版本还更新了 llama.cpp、MLX 的版本标识，登记了 DeepSeek Harness 文档入口，并更新了相关模型启动示例。通过这一函数，WebP 转 PNG 的行为被集中封装，Completion 和 Chat 两类请求都复用同一套逻辑。
Open-Lovable本地部署实战:抓取网页并生成React前端
Lethehong
08-13 2万+
文章摘要 Open-Lovable是一款由MendableAI开发的开源工具，能够将任意网页快速克隆为可编辑的React应用。本文详细介绍了在Windows系统下部署Open-Lovable的完整流程，包括环境准备、依赖安装、API密钥配置等步骤。通过实际操作演示了如何使用该工具克隆Firecrawl官网首页，并展示了生成代码的结构和下载方式。最后还介绍了如何通过cpolar实现内网穿透，使本地项目能够被外部网络访问。该工具为前端开发者提供了快速原型设计的解决方案，但需注意合理使用范围，避免侵犯第三方权益。
把 cc-switch 搬上鸿蒙 PC 的那些天：一个 Tauri 应用的移植笔记
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
08-18 329
本文记录了将Tauri应用移植到鸿蒙PC的真实过程。作者选取GitHub热门项目cc-switch（12万+星标）作为移植对象，该工具采用Tauri v2架构（React+Rust）。移植面临三大挑战：1)依赖解析冲突需通过patch机制解决；2)交叉编译问题包括openssl、rquickjs等库的适配；3)构建系统细节如Windows环境下的manifest误判。最终方案基于社区OpenHarmony版Tauri fork，通过NAPI桥接+ArkWeb渲染实现。文章特别指出鸿蒙开发需要NDK与完整SD
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值