企业官网建设流程全解析

1. 项目概述：一个浏览器技能库的诞生

最近在整理个人知识库时，我翻到了一个几年前自己搭建的、名为browser-act/skills的仓库。这个名字听起来可能有点抽象，但它的核心目标非常明确：系统性地收集、整理、沉淀那些能极大提升浏览器使用效率的“骚操作”和“硬技能”。它不是指如何点击、拖拽这些基础操作，而是聚焦于那些能让你在信息海洋中“开挂”的技巧，比如利用浏览器开发者工具进行网页逆向分析、通过控制台脚本批量处理数据、借助扩展程序自动化重复工作流，甚至是利用浏览器内置的“实验性功能”实现一些意想不到的效果。

这个项目的初衷源于一个很实际的痛点：作为一名需要频繁与网页打交道的开发者、数据分析师或者内容创作者，我们每天有大量时间“泡”在浏览器里。然而，绝大多数人仅仅使用了浏览器不到10%的能力。我们习惯于搜索引擎、收藏夹和几个常用插件，却对浏览器本身这个强大的“瑞士军刀”知之甚少。browser-act/skills就是想成为一个活的、可协作的“浏览器能力图谱”，把散落在各处论坛、博客、个人笔记里的高效技巧，用结构化的方式组织起来，让每个人都能像升级装备一样，逐步解锁浏览器的隐藏能力。

它适合任何希望从“浏览器用户”进阶为“浏览器驾驭者”的人。无论你是前端开发者，需要调试复杂的页面交互；还是运营人员，需要批量采集或处理网页信息；亦或是普通用户，厌倦了重复的点击操作，这个项目里的技能点都能为你打开新世界的大门。接下来，我将拆解这个项目的核心设计思路、具体技能分类、实操实现方法以及我踩过的那些坑，希望能为你构建自己的效率工具箱提供一份详尽的参考。

2. 核心设计思路与技能体系构建

构建一个技能库，首要问题是如何分类。如果只是杂乱地堆砌技巧，其价值会大打折扣。browser-act/skills的设计核心是“以任务场景驱动，以能力层级递进”。

2.1 技能矩阵：四个维度与三个层级

我最终将技能划分为四个主要维度，这基本覆盖了浏览器能力的外延：

1. 操控与自动化：核心是利用浏览器提供的编程接口（如 Console、DevTools Protocol、扩展API）来模拟或批量执行用户操作。例如，写一段JavaScript在控制台里自动滚动页面并截图，或者用扩展自动填写表单。
2. 分析与洞察：重点是使用开发者工具深入网页内部，理解其结构、网络请求、性能表现和运行逻辑。这不仅是开发者的专利，运营人员可以用它分析竞品的数据加载方式，安全爱好者可以用它查看前端加密逻辑。
3. 定制与增强：通过修改浏览器设置、安装扩展、编写用户脚本（UserScript）或用户样式（UserStyle），来改变浏览器的外观和行为，使其更贴合个人工作习惯。比如，定制搜索引擎快捷键、用Stylish美化所有网站、用Tampermonkey脚本去除广告。
4. 效率与工作流：将浏览器与其他工具（如命令行、本地脚本、云服务）连接，打造无缝的信息处理流水线。例如，通过浏览器插件将网页内容一键保存到笔记软件（如Notion、Obsidian），或调用本地Python脚本处理网页抓取的数据。

在每个维度下，我又设定了三个掌握层级：

• 入门级：无需编程，通过图形界面或简单配置即可实现。如使用书签小工具（Bookmarklet）、掌握DevTools的元素检查器。
• 进阶级：需要基础的JavaScript或命令行知识。如编写简单的Console脚本、使用Chrome DevTools Protocol进行基础自动化、配置复杂的扩展选项。
• 专家级：涉及浏览器底层原理、复杂自动化框架或高级调试技巧。如开发完整的浏览器扩展、使用Puppeteer/Playwright进行端到端测试和爬虫、进行内存泄漏分析和性能深度调优。

这个矩阵成为了仓库目录结构的基石，确保每项技能都能找到自己的位置，并且学习者可以清晰地看到进阶路径。

2.2 内容沉淀格式：标准化与可执行性

为了让技能描述清晰、可复现，我为每个技能点设计了一个简单的模板：

## 技能名称 * **所属维度**：操控与自动化 / 分析与洞察 / 定制与增强 / 效率与工作流 * **难度等级**：⭐（入门） / ⭐⭐（进阶） / ⭐⭐⭐（专家） * **核心工具**：Chrome DevTools Console, Tampermonkey, Puppeteer等 * **应用场景**：快速删除社交媒体时间线、批量下载页面图片、监控网页数据变化 * **原理简述**：（用一两句话说明其如何工作） * **实操步骤**： 1. 打开目标网页。 2. 按下 F12 打开开发者工具，切换到 Console（控制台）标签页。 3. 粘贴以下代码... 4. 按下回车执行，观察结果。 * **代码/命令示例**：（提供可直接复制粘贴的代码块） * **注意事项与常见问题**： * 该脚本仅在当前标签页生效。 * 如果网站使用了严格的CSP（内容安全策略），部分脚本可能无法运行。 * 执行前请确保你了解代码的作用，避免在重要网站误操作。

这种格式强制要求提供上下文和可操作指令，避免了只有“是什么”而缺少“怎么用”的尴尬。它让每个技能点都成为一个独立的、可验证的“知识单元”。

3. 核心技能点详解与实操指南

下面，我挑选几个具有代表性的技能点，从四个维度各选一例，进行深度拆解。你会发现，很多看似神奇的操作，背后原理并不复杂。

3.1 操控与自动化：用Console脚本实现“一键清空”社交媒体信息流

场景：你想暂时远离社交媒体上无穷无尽的信息流，但手动删除或滑动非常低效。

原理：社交媒体页面的内容通常是动态加载的，但每条内容（帖子、推文）在DOM（文档对象模型）中通常以一个具有特定CSS类或结构的HTML元素存在。我们可以通过JavaScript在浏览器控制台中，选中这些元素并移除它们。

实操步骤：

1. 打开目标社交媒体网站（例如Twitter/X的时间线页面）。
2. 按F12打开开发者工具，切换到Console面板。
3. 粘贴并执行以下脚本：

// 这是一个通用性较强的脚本，通过选择器寻找文章容器 const selectors = [ 'article', // Twitter/X '[data-testid="tweet"]', // Twitter/X 另一种选择器 'div[role="article"]', // Facebook '.feed-shared-update-v2', // LinkedIn // 可以继续添加其他平台的选择器 ]; let removedCount = 0; const intervalId = setInterval(() => { let found = false; for (const selector of selectors) { const elements = document.querySelectorAll(selector); if (elements.length > 0) { elements.forEach(el => { el.style.transition = 'opacity 0.5s'; el.style.opacity = '0'; setTimeout(() => el.remove(), 500); // 淡出后移除 }); removedCount += elements.length; console.log(`已移除 ${elements.length} 条内容，总计 ${removedCount} 条`); found = true; break; // 找到一个匹配的选择器就执行 } } if (!found) { clearInterval(intervalId); console.log(`清理完成！共移除 ${removedCount} 条内容。`); } }, 300); // 每300毫秒执行一次，以处理滚动加载的新内容

4. 滚动页面，脚本会自动识别并“淡出”移除新加载的内容。
5. 要停止脚本，可以在Console中执行clearInterval(intervalId)，或者直接刷新页面。

注意：此脚本仅在前端移除视觉元素，并不会从服务器删除你的数据。刷新页面后内容会重新加载。不同网站的结构变化很快，选择器（如'article'）可能需要随网站更新而调整。执行前最好在不起眼的区域先测试。

进阶思考：你可以将此脚本保存为书签小工具（Bookmarklet），只需将代码压缩为一行，前面加上javascript:前缀，保存为书签。以后点击书签即可在任何页面运行，无需打开Console。

3.2 分析与洞察：利用网络面板（Network）进行竞品数据分析

场景：你想了解某个竞品网站的数据是如何加载的，特别是那些动态渲染的内容（如图表、列表数据）。

原理：现代网页大量使用AJAX（异步JavaScript和XML）或Fetch API从服务器获取数据，这些请求和响应都会在开发者工具的Network面板中留下记录。通过分析这些请求，我们可以找到数据接口（API Endpoint），直接查看其返回的结构化数据（通常是JSON格式）。

实操步骤：

1. 打开目标网站，并导航到包含动态数据的页面（如商品列表、数据图表页）。
2. 打开DevTools (F12)，切换到Network面板。
3. 勾选Preserve log（保留日志）复选框，防止页面跳转时请求记录被清除。
4. 刷新页面，或触发数据加载动作（如点击“加载更多”、筛选条件）。
5. 在请求列表中，重点关注XHR或Fetch类型的请求。这些通常是数据请求。
6. 点击一个可疑的请求，查看其详细信息：
   • Headers：查看请求URL、方法（GET/POST）、携带的参数（Query String Parameters 或 Form Data）和请求头（如Authorization可能包含认证信息）。
   • Preview或Response：这里直接展示了服务器返回的数据，通常是格式化的JSON，一目了然。
7. 你可以右键点击该请求，选择Copy->Copy as cURL或Copy as Node.js fetch，即可获得一段能在命令行或其他脚本中直接重放该请求的代码，用于进一步的数据获取和分析。

实操心得：

• 筛选技巧：在Network面板的筛选框输入json或api可以快速过滤出数据接口请求。
• 搜索关键数据：如果你在网页上看到了某个特定数字或文本，可以在Network面板的搜索框（放大镜图标）里搜索它，可能会直接定位到包含该数据的请求。
• 模拟与重放：通过Copy as cURL获取命令后，你可以在终端中执行，或者导入到Postman等API测试工具中，修改参数进行反复测试，这对于理解API行为至关重要。

3.3 定制与增强：使用用户脚本（UserScript）打造个性化网页

场景：你常访问的某个网站广告太多、布局不喜欢，或者缺少某个你需要的功能。

原理：用户脚本是一段JavaScript代码，在用户浏览器加载页面时自动运行。它通过油猴（Tampermonkey）或暴力猴（Violentmonkey）等扩展程序进行管理。脚本可以操作页面的DOM，修改样式，注入新功能，从而深度定制网页体验。

实操示例：为任意网页添加“夜间模式”切换按钮

1. 首先在浏览器中安装 Tampermonkey 扩展。
2. 点击Tampermonkey图标，选择“创建新脚本”。
3. 替换默认代码为以下内容：

// ==UserScript== // @name 简易网页夜间模式 // @namespace http://tampermonkey.net/ // @version 0.1 // @description 为当前网页添加一个切换夜间模式的按钮 // @author You // @match *://*/* // @grant none // ==/UserScript== (function() { 'use strict'; // 创建切换按钮 const toggleButton = document.createElement('button'); toggleButton.innerHTML = '🌙 夜间模式'; toggleButton.style.position = 'fixed'; toggleButton.style.bottom = '20px'; toggleButton.style.right = '20px'; toggleButton.style.zIndex = '9999'; toggleButton.style.padding = '10px'; toggleButton.style.backgroundColor = '#333'; toggleButton.style.color = '#fff'; toggleButton.style.border = 'none'; toggleButton.style.borderRadius = '5px'; toggleButton.style.cursor = 'pointer'; // 创建夜间模式样式 const nightModeStyle = document.createElement('style'); nightModeStyle.id = 'tm-night-mode-style'; nightModeStyle.textContent = ` html, body, div, p, span, a, li, td { background-color: #1a1a1a !important; color: #e0e0e0 !important; border-color: #444 !important; } h1, h2, h3, h4, h5, h6 { color: #bb86fc !important; } a { color: #03dac6 !important; } input, textarea, select { background-color: #2d2d2d !important; color: #e0e0e0 !important; border: 1px solid #555 !important; } `; let isNightMode = false; toggleButton.addEventListener('click', function() { isNightMode = !isNightMode; if (isNightMode) { document.head.appendChild(nightModeStyle); toggleButton.innerHTML = '☀️ 日间模式'; toggleButton.style.backgroundColor = '#555'; } else { const styleEl = document.getElementById('tm-night-mode-style'); if (styleEl) styleEl.remove(); toggleButton.innerHTML = '🌙 夜间模式'; toggleButton.style.backgroundColor = '#333'; } }); document.body.appendChild(toggleButton); })();

4. 保存脚本（Ctrl+S）。
5. 刷新或新开一个网页，你会看到页面右下角出现一个浮动按钮，点击即可切换夜间模式。

注意：用户脚本功能强大，但需谨慎安装来源不明的脚本，以免造成安全风险（如窃取Cookie、记录键盘输入）。建议只从GreasyFork等可信社区安装，或自己编写、审查代码。

3.4 效率与工作流：结合浏览器与本地脚本实现自动化数据收集

场景：你需要定期从某个没有公开API的网站上收集一些结构化数据（如价格、库存、新闻标题）。

原理：虽然可以直接用Node.js的Puppeteer库，但对于轻量级、一次性的任务，我们可以利用浏览器手动获取数据，再通过Console快速格式化，最后借助浏览器提供的copy()函数将数据复制到剪贴板，粘贴到本地文件或用脚本处理。

实操步骤（以收集商品列表为例）：

1. 在浏览器中提取数据：打开目标商品列表页，在Console中运行代码提取信息。假设每个商品项有一个类名.product-item，里面包含.name和.price。

// 在页面Console中执行 const products = Array.from(document.querySelectorAll('.product-item')).map(item => { return { name: item.querySelector('.name')?.innerText.trim() || 'N/A', price: item.querySelector('.price')?.innerText.trim() || 'N/A', // 可以提取更多字段 link: item.querySelector('a')?.href || 'N/A' }; }); console.log(products); // 在控制台查看

2. 格式化并复制到剪贴板：将得到的JavaScript对象数组转换为JSON字符串，并使用copy()函数复制。

// 接上一步 const jsonData = JSON.stringify(products, null, 2); // 第二个参数null，第三个参数2是美化缩进 copy(jsonData); // 此函数由浏览器在Console环境中提供 console.log('数据已复制到剪贴板！');

3. 在本地处理数据：现在数据已经在你的系统剪贴板里了。你可以：
   • 直接粘贴到文本编辑器（如VS Code）保存为.json文件。
   • 在本地写一个Python脚本（需要pyperclip库）读取剪贴板内容并处理。
   • 更进阶的做法是，写一个浏览器扩展，将Console提取和复制的过程自动化，并添加定时任务和本地保存功能。

这个工作流的优势在于：它结合了人的灵活性（处理复杂的登录、验证码、动态加载）和机器的效率（批量提取和格式化），对于非标准化的网页数据抓取非常实用。

4. 高级应用：基于Puppeteer的端到端自动化

当技能进阶到专家级，就需要更强大、更稳定的自动化工具。Puppeteer（或类似的Playwright）是一个由Chrome团队维护的Node.js库，它提供了高级API来控制无头（Headless）或有头的Chrome/Chromium浏览器。这意味着你可以用代码模拟几乎所有用户操作。

4.1 项目初始化与基础脚本

首先，你需要一个Node.js环境。创建一个新目录并初始化项目：

mkdir browser-automation-project cd browser-automation-project npm init -y npm install puppeteer

然后，创建一个基础脚本screenshot.js，用于自动访问网页并截图：

const puppeteer = require('puppeteer'); (async () => { // 1. 启动浏览器，可以设置 headless: false 来看到浏览器界面 const browser = await puppeteer.launch({ headless: false, slowMo: 250 }); // slowMo 让操作变慢，方便观察 const page = await browser.newPage(); // 2. 设置视口大小 await page.setViewport({ width: 1920, height: 1080 }); // 3. 导航到目标网址 await page.goto('https://example.com'); // 4. 等待特定元素出现（确保页面加载完成） await page.waitForSelector('h1'); // 5. 执行操作：截图 await page.screenshot({ path: 'example.png', fullPage: true }); // 6. 获取页面数据：例如，获取标题 const title = await page.title(); console.log(`页面标题是: ${title}`); // 7. 关闭浏览器 await browser.close(); })();

运行node screenshot.js，你会看到浏览器自动打开，访问 example.com，然后截图保存，并在控制台打印标题。

4.2 实现复杂交互：自动登录与数据提取

让我们实现一个更真实的场景：自动登录一个模拟的测试网站，并提取登录后的用户信息。

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.setViewport({ width: 1200, height: 800 }); try { // 导航到登录页 await page.goto('https://the-internet.herokuapp.com/login'); // 输入用户名和密码（使用CSS选择器定位元素） await page.type('#username', 'tomsmith'); await page.type('#password', 'SuperSecretPassword!'); // 点击登录按钮 await page.click('button[type="submit"]'); // 等待登录成功后的页面元素（例如，成功消息或导航栏） await page.waitForSelector('#flash-messages .success', { timeout: 5000 }); // 提取登录成功后的欢迎信息 const successText = await page.$eval('#flash-messages .success', el => el.textContent.trim()); console.log(`登录成功: ${successText}`); // 假设登录后有一个显示用户信息的区域，例如 <div id="user-info"> // 这里我们模拟提取一些信息 const userInfo = await page.evaluate(() => { // 这个函数在浏览器上下文内执行，可以访问DOM return { // 假设页面上有这些元素 welcomeMsg: document.querySelector('h2')?.innerText || 'Not Found', // 可以尝试获取更多信息 }; }); console.log('提取的用户信息:', userInfo); // 截图记录结果 await page.screenshot({ path: 'after_login.png' }); } catch (error) { console.error('自动化过程出错:', error); await page.screenshot({ path: 'error.png' }); // 出错时截图 } finally { // 确保浏览器被关闭 await browser.close(); } })();

关键点解析：

• page.type(selector, text)：模拟键盘输入。
• page.click(selector)：模拟鼠标点击。
• page.waitForSelector(selector, options)：等待某个元素出现在DOM中，这是处理动态加载页面的关键。
• page.$eval(selector, pageFunction)：在页面上下文中执行一个函数，并返回对选中元素的处理结果。这是从页面提取数据的主要方式。
• page.evaluate(pageFunction)：在页面上下文中执行一个函数，并返回其结果。可以执行更复杂的DOM操作和逻辑。

4.3 性能优化与错误处理实战

在实际项目中，自动化脚本的稳定性和性能至关重要。

1. 请求拦截与资源优化： 如果你的任务不需要加载图片、样式或字体，可以拦截这些请求以大幅提升速度。

await page.setRequestInterception(true); page.on('request', (request) => { const resourceType = request.resourceType(); // 阻止图片、样式表、字体、媒体等资源的加载 if (['image', 'stylesheet', 'font', 'media'].includes(resourceType)) { request.abort(); } else { request.continue(); } }); // 然后再执行 page.goto()

2. 稳健的选择器与等待策略： 依赖易变的CSS类名或ID很容易导致脚本失效。优先使用更稳定的选择器，如>// 不推荐：依赖易变的类名 await page.click('.btn-primary.login-button'); // 推荐：使用更稳定的属性或组合 await page.click('button[type="submit"]'); // 根据类型 await page.click('nav a:has-text("Home")'); // Puppeteer特有的文本选择器（需启用实验功能） // 或者使用XPath（适用于复杂定位） await page.waitForXPath('//h1[contains(text(), "Welcome")]');

3. 全面的错误处理与日志记录： 为每个可能失败的操作添加try-catch，并记录详细的日志，方便排查。

const fs = require('fs').promises; async function safeClick(page, selector, description) { try { await page.waitForSelector(selector, { timeout: 10000 }); await page.click(selector); console.log(`[OK] 成功点击: ${description} (${selector})`); } catch (error) { console.error(`[FAIL] 点击失败: ${description} (${selector})`, error.message); await page.screenshot({ path: `error_${Date.now()}.png` }); throw error; // 或根据业务决定是否继续 } } // 使用 await safeClick(page, '#submitBtn', '提交表单按钮');

4. 处理弹窗和多个页面： 浏览器自动化中经常需要处理新打开的标签页或弹窗。

// 监听新页面（标签页）打开事件 const [newPage] = await Promise.all([ new Promise(resolve => browser.once('targetcreated', target => resolve(target.page()))), page.click('a[target="_blank"]'), // 点击一个会打开新标签页的链接 ]); await newPage.bringToFront(); // 切换到新页面 // ... 在新页面上操作 await newPage.close(); // 关闭新页面 await page.bringToFront(); // 切换回原页面

5. 常见问题、排查技巧与经验实录

在构建和使用browser-act/skills库的过程中，我遇到了无数的问题。下面是一些高频问题和解决思路的实录，希望能帮你少走弯路。

5.1 Console脚本执行失败

• 问题：在控制台粘贴脚本后，报错Uncaught TypeError: Cannot read properties of null。
• 排查：
  1. 选择器问题：这是最常见的原因。网站的DOM结构可能已经更新，你使用的document.querySelector选择器找不到元素。打开Elements面板，检查你想要的元素是否还在，以及它的CSS选择器是否正确。
  2. 执行时机问题：你的脚本可能在页面元素加载完成之前就执行了。将代码包裹在DOMContentLoaded事件监听器中，或使用setTimeout延迟执行，或手动在元素出现后执行。
  3. CSP限制：网站的Content Security Policy可能禁止内联脚本或eval。这种情况下，Console脚本可能无法修改DOM。可以尝试在浏览器扩展的内容脚本中运行。

5.2 Puppeteer脚本运行缓慢或不稳定

• 问题：脚本时快时慢，有时超时失败。
• 排查与优化：
  1. 启用无头模式并拦截资源：如4.3节所述，在生产环境运行务必使用headless: 'new'（新版）或true，并拦截非必要资源。
  2. 调整超时和等待策略：默认的导航超时是30秒。对于慢速网络或页面，可以增加：await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 })。waitUntil: 'networkidle2'表示在500ms内没有超过2个网络连接时认为导航完成，比默认的load事件更可靠。
  3. 避免不必要的等待：不要滥用page.waitForTimeout(5000)这种固定等待。尽量使用waitForSelector,waitForNavigation,waitForResponse等基于条件的等待。
  4. 检查内存泄漏：长时间运行的脚本可能导致内存增长。确保在循环或重复任务中正确关闭不再使用的页面 (page.close())，并定期重启浏览器实例。
  5. 使用更稳定的选择器：避免使用基于索引的选择器（如div:nth-child(3)），因为它们极易因页面微调而失效。

5.3 用户脚本（Tampermonkey）不生效

• 问题：安装了脚本，但在目标网站上没有效果。
• 排查：
  1. 检查@match或@include元数据：脚本头部的// @match *://*.example.com/*决定了脚本在哪些网址注入。确保你的当前网址匹配该规则。可以使用*://*/*来匹配所有网址（慎用）。
  2. 检查脚本是否启用：点击Tampermonkey图标，查看脚本列表，确保对应脚本的开关是打开状态。
  3. 查看浏览器Console：按F12打开目标页面的Console，查看是否有来自你脚本的错误信息。用户脚本的错误会在这里显示。
  4. 检查脚本执行顺序：如果网站本身代码很复杂，你的脚本可能需要在DOM加载后某个时机执行。可以尝试将代码包裹在window.addEventListener('load', function() { ... })中，或使用// @run-at document-end元数据。

5.4 数据提取不准确或遗漏

• 问题：用Console或Puppeteer提取的数据不全，或者包含了多余的信息。
• 排查：
  1. 验证选择器：在Elements面板使用Ctrl+F（Cmd+F），输入你的选择器，看它是否精准地选中了你想要的所有元素，且没有多余元素。
  2. 处理动态加载：对于滚动加载（无限滚动）的页面，你的脚本可能只提取了首屏数据。需要模拟滚动，触发更多内容加载。在Console中可以用setInterval滚动并提取，在Puppeteer中可以用page.evaluate执行滚动和等待逻辑。
  3. 数据清洗：提取的文本可能包含多余的空白字符（\n,\t, 多个空格）。使用.trim()和.replace(/\s+/g, ' ')进行清洗。
  4. 处理iframe：如果目标内容在<iframe>内，你需要先切换到iframe的上下文。在Puppeteer中：const frame = page.frames().find(f => f.name() === 'frameName'); await frame.$eval(...)。在Console中，需要先选中iframe元素，然后在Elements面板的上下文菜单里选择Frame->Open in Console。

5.5 浏览器环境差异与兼容性

• 问题：脚本在Chrome上运行良好，但在Firefox或Safari上出错。
• 经验：
  • Console API：基本一致，但某些实验性API可能有差异。
  • CSS选择器支持：现代选择器如:has()在不同浏览器中支持度不同，尽量避免在关键脚本中使用。
  • Puppeteer：Puppeteer主要针对Chrome/Chromium。如果需要在Firefox或WebKit（Safari）上运行，应考虑使用Playwright库，它由微软开发，原生支持Chromium、Firefox和WebKit三大引擎，API与Puppeteer类似但更现代、更强大，是跨浏览器自动化的首选。
  • 用户脚本管理器：Tampermonkey支持最广，Violentmonkey是另一个开源选择。Safari上的用户脚本支持可能较弱。

构建browser-act/skills的过程，本质上是一个将隐性知识显性化、将碎片经验系统化的过程。最大的体会是，浏览器的能力边界远比你想象的要宽广。很多看似需要复杂编程才能解决的问题，其实在浏览器控制台里敲几行代码就能搞定；很多重复的网上劳作，都可以通过一个简单的脚本或扩展来解放双手。关键在于，要养成“遇到重复操作就想能否自动化，遇到网页限制就想能否绕过或增强”的思维习惯。这个仓库对我来说，不仅是一个技能清单，更是一个不断演进的、关于如何更聪明地使用数字世界的思考笔记。如果你也开始积累自己的“技能库”，我建议从解决一个你当下最痛点的、微小的浏览器使用问题开始，记录下解决方案。积少成多，你会发现自己的工作效率和数字生活的掌控感，将得到质的提升。