1. 项目概述一个浏览器技能库的诞生最近在整理个人知识库时我翻到了一个几年前自己搭建的、名为browser-act/skills的仓库。这个名字听起来可能有点抽象但它的核心目标非常明确系统性地收集、整理、沉淀那些能极大提升浏览器使用效率的“骚操作”和“硬技能”。它不是指如何点击、拖拽这些基础操作而是聚焦于那些能让你在信息海洋中“开挂”的技巧比如利用浏览器开发者工具进行网页逆向分析、通过控制台脚本批量处理数据、借助扩展程序自动化重复工作流甚至是利用浏览器内置的“实验性功能”实现一些意想不到的效果。这个项目的初衷源于一个很实际的痛点作为一名需要频繁与网页打交道的开发者、数据分析师或者内容创作者我们每天有大量时间“泡”在浏览器里。然而绝大多数人仅仅使用了浏览器不到10%的能力。我们习惯于搜索引擎、收藏夹和几个常用插件却对浏览器本身这个强大的“瑞士军刀”知之甚少。browser-act/skills就是想成为一个活的、可协作的“浏览器能力图谱”把散落在各处论坛、博客、个人笔记里的高效技巧用结构化的方式组织起来让每个人都能像升级装备一样逐步解锁浏览器的隐藏能力。它适合任何希望从“浏览器用户”进阶为“浏览器驾驭者”的人。无论你是前端开发者需要调试复杂的页面交互还是运营人员需要批量采集或处理网页信息亦或是普通用户厌倦了重复的点击操作这个项目里的技能点都能为你打开新世界的大门。接下来我将拆解这个项目的核心设计思路、具体技能分类、实操实现方法以及我踩过的那些坑希望能为你构建自己的效率工具箱提供一份详尽的参考。2. 核心设计思路与技能体系构建构建一个技能库首要问题是如何分类。如果只是杂乱地堆砌技巧其价值会大打折扣。browser-act/skills的设计核心是“以任务场景驱动以能力层级递进”。2.1 技能矩阵四个维度与三个层级我最终将技能划分为四个主要维度这基本覆盖了浏览器能力的外延操控与自动化核心是利用浏览器提供的编程接口如 Console、DevTools Protocol、扩展API来模拟或批量执行用户操作。例如写一段JavaScript在控制台里自动滚动页面并截图或者用扩展自动填写表单。分析与洞察重点是使用开发者工具深入网页内部理解其结构、网络请求、性能表现和运行逻辑。这不仅是开发者的专利运营人员可以用它分析竞品的数据加载方式安全爱好者可以用它查看前端加密逻辑。定制与增强通过修改浏览器设置、安装扩展、编写用户脚本UserScript或用户样式UserStyle来改变浏览器的外观和行为使其更贴合个人工作习惯。比如定制搜索引擎快捷键、用Stylish美化所有网站、用Tampermonkey脚本去除广告。效率与工作流将浏览器与其他工具如命令行、本地脚本、云服务连接打造无缝的信息处理流水线。例如通过浏览器插件将网页内容一键保存到笔记软件如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在浏览器控制台中选中这些元素并移除它们。实操步骤打开目标社交媒体网站例如Twitter/X的时间线页面。按F12打开开发者工具切换到Console面板。粘贴并执行以下脚本// 这是一个通用性较强的脚本通过选择器寻找文章容器 const selectors [ article, // Twitter/X [data-testidtweet], // Twitter/X 另一种选择器 div[rolearticle], // 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毫秒执行一次以处理滚动加载的新内容滚动页面脚本会自动识别并“淡出”移除新加载的内容。要停止脚本可以在Console中执行clearInterval(intervalId)或者直接刷新页面。注意此脚本仅在前端移除视觉元素并不会从服务器删除你的数据。刷新页面后内容会重新加载。不同网站的结构变化很快选择器如article可能需要随网站更新而调整。执行前最好在不起眼的区域先测试。进阶思考你可以将此脚本保存为书签小工具Bookmarklet只需将代码压缩为一行前面加上javascript:前缀保存为书签。以后点击书签即可在任何页面运行无需打开Console。3.2 分析与洞察利用网络面板Network进行竞品数据分析场景你想了解某个竞品网站的数据是如何加载的特别是那些动态渲染的内容如图表、列表数据。原理现代网页大量使用AJAX异步JavaScript和XML或Fetch API从服务器获取数据这些请求和响应都会在开发者工具的Network面板中留下记录。通过分析这些请求我们可以找到数据接口API Endpoint直接查看其返回的结构化数据通常是JSON格式。实操步骤打开目标网站并导航到包含动态数据的页面如商品列表、数据图表页。打开DevTools (F12)切换到Network面板。勾选Preserve log保留日志复选框防止页面跳转时请求记录被清除。刷新页面或触发数据加载动作如点击“加载更多”、筛选条件。在请求列表中重点关注XHR或Fetch类型的请求。这些通常是数据请求。点击一个可疑的请求查看其详细信息Headers查看请求URL、方法GET/POST、携带的参数Query String Parameters 或 Form Data和请求头如Authorization可能包含认证信息。Preview或Response这里直接展示了服务器返回的数据通常是格式化的JSON一目了然。你可以右键点击该请求选择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修改样式注入新功能从而深度定制网页体验。实操示例为任意网页添加“夜间模式”切换按钮首先在浏览器中安装 Tampermonkey 扩展。点击Tampermonkey图标选择“创建新脚本”。替换默认代码为以下内容// 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); })();保存脚本CtrlS。刷新或新开一个网页你会看到页面右下角出现一个浮动按钮点击即可切换夜间模式。注意用户脚本功能强大但需谨慎安装来源不明的脚本以免造成安全风险如窃取Cookie、记录键盘输入。建议只从GreasyFork等可信社区安装或自己编写、审查代码。3.4 效率与工作流结合浏览器与本地脚本实现自动化数据收集场景你需要定期从某个没有公开API的网站上收集一些结构化数据如价格、库存、新闻标题。原理虽然可以直接用Node.js的Puppeteer库但对于轻量级、一次性的任务我们可以利用浏览器手动获取数据再通过Console快速格式化最后借助浏览器提供的copy()函数将数据复制到剪贴板粘贴到本地文件或用脚本处理。实操步骤以收集商品列表为例在浏览器中提取数据打开目标商品列表页在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); // 在控制台查看格式化并复制到剪贴板将得到的JavaScript对象数组转换为JSON字符串并使用copy()函数复制。// 接上一步 const jsonData JSON.stringify(products, null, 2); // 第二个参数null第三个参数2是美化缩进 copy(jsonData); // 此函数由浏览器在Console环境中提供 console.log(数据已复制到剪贴板);在本地处理数据现在数据已经在你的系统剪贴板里了。你可以直接粘贴到文本编辑器如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[typesubmit]); // 等待登录成功后的页面元素例如成功消息或导航栏 await page.waitForSelector(#flash-messages .success, { timeout: 5000 }); // 提取登录成功后的欢迎信息 const successText await page.$eval(#flash-messages .success, el el.textContent.trim()); console.log(登录成功: ${successText}); // 假设登录后有一个显示用户信息的区域例如 div iduser-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[typesubmit]); // 根据类型 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。排查选择器问题这是最常见的原因。网站的DOM结构可能已经更新你使用的document.querySelector选择器找不到元素。打开Elements面板检查你想要的元素是否还在以及它的CSS选择器是否正确。执行时机问题你的脚本可能在页面元素加载完成之前就执行了。将代码包裹在DOMContentLoaded事件监听器中或使用setTimeout延迟执行或手动在元素出现后执行。CSP限制网站的Content Security Policy可能禁止内联脚本或eval。这种情况下Console脚本可能无法修改DOM。可以尝试在浏览器扩展的内容脚本中运行。5.2 Puppeteer脚本运行缓慢或不稳定问题脚本时快时慢有时超时失败。排查与优化启用无头模式并拦截资源如4.3节所述在生产环境运行务必使用headless: new新版或true并拦截非必要资源。调整超时和等待策略默认的导航超时是30秒。对于慢速网络或页面可以增加await page.goto(url, { waitUntil: networkidle2, timeout: 60000 })。waitUntil: networkidle2表示在500ms内没有超过2个网络连接时认为导航完成比默认的load事件更可靠。避免不必要的等待不要滥用page.waitForTimeout(5000)这种固定等待。尽量使用waitForSelector,waitForNavigation,waitForResponse等基于条件的等待。检查内存泄漏长时间运行的脚本可能导致内存增长。确保在循环或重复任务中正确关闭不再使用的页面 (page.close())并定期重启浏览器实例。使用更稳定的选择器避免使用基于索引的选择器如div:nth-child(3)因为它们极易因页面微调而失效。5.3 用户脚本Tampermonkey不生效问题安装了脚本但在目标网站上没有效果。排查检查match或include元数据脚本头部的// match *://*.example.com/*决定了脚本在哪些网址注入。确保你的当前网址匹配该规则。可以使用*://*/*来匹配所有网址慎用。检查脚本是否启用点击Tampermonkey图标查看脚本列表确保对应脚本的开关是打开状态。查看浏览器Console按F12打开目标页面的Console查看是否有来自你脚本的错误信息。用户脚本的错误会在这里显示。检查脚本执行顺序如果网站本身代码很复杂你的脚本可能需要在DOM加载后某个时机执行。可以尝试将代码包裹在window.addEventListener(load, function() { ... })中或使用// run-at document-end元数据。5.4 数据提取不准确或遗漏问题用Console或Puppeteer提取的数据不全或者包含了多余的信息。排查验证选择器在Elements面板使用CtrlFCmdF输入你的选择器看它是否精准地选中了你想要的所有元素且没有多余元素。处理动态加载对于滚动加载无限滚动的页面你的脚本可能只提取了首屏数据。需要模拟滚动触发更多内容加载。在Console中可以用setInterval滚动并提取在Puppeteer中可以用page.evaluate执行滚动和等待逻辑。数据清洗提取的文本可能包含多余的空白字符\n,\t, 多个空格。使用.trim()和.replace(/\s/g, )进行清洗。处理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()在不同浏览器中支持度不同尽量避免在关键脚本中使用。PuppeteerPuppeteer主要针对Chrome/Chromium。如果需要在Firefox或WebKitSafari上运行应考虑使用Playwright库它由微软开发原生支持Chromium、Firefox和WebKit三大引擎API与Puppeteer类似但更现代、更强大是跨浏览器自动化的首选。用户脚本管理器Tampermonkey支持最广Violentmonkey是另一个开源选择。Safari上的用户脚本支持可能较弱。构建browser-act/skills的过程本质上是一个将隐性知识显性化、将碎片经验系统化的过程。最大的体会是浏览器的能力边界远比你想象的要宽广。很多看似需要复杂编程才能解决的问题其实在浏览器控制台里敲几行代码就能搞定很多重复的网上劳作都可以通过一个简单的脚本或扩展来解放双手。关键在于要养成“遇到重复操作就想能否自动化遇到网页限制就想能否绕过或增强”的思维习惯。这个仓库对我来说不仅是一个技能清单更是一个不断演进的、关于如何更聪明地使用数字世界的思考笔记。如果你也开始积累自己的“技能库”我建议从解决一个你当下最痛点的、微小的浏览器使用问题开始记录下解决方案。积少成多你会发现自己的工作效率和数字生活的掌控感将得到质的提升。