我曾经在浏览器中花费了太多时间在重复的任务上——填写表单、管理标签和滚动无尽的页面。感觉必须有一种更聪明的方式来处理这一切。
于是，我转向了 JavaScript 来自动化这些任务。效果立竿见影。曾经需要几个小时的事情现在只需要几分钟。
在本文中，我将分享 20 个简单的 JavaScript 脚本，帮助您自动化常见的浏览器任务。如果您想节省时间并提高生产力，请继续阅读。
1. 自动表单填写
问题： 是否发现自己一遍又一遍地在不同网站上输入相同的个人信息？填写求职申请、在线购物或注册表单可能会让人感到麻木。
解决方案：
function autoFillForm(formData) {const inputs = document.querySelectorAll('input');inputs.forEach(input => {const name = input.name.toLowerCase();if (formData[name]) {input.value = formData[name];}});}
使用场景： 自动填充表单字段，如姓名、电子邮件、地址等。
2. 截图捕捉
问题： 您正在阅读一篇重要文章或找到一条关键信息，但无法保存整个页面。截图总是会截断或需要多个步骤。
解决方案：
function captureScreenshot() {html2canvas(document.body).then(canvas => {const link = document.createElement('a');link.download = 'screenshot.png';link.href = canvas.toDataURL();link.click();});}
使用场景： 一键捕捉全页截图，非常适合研究、文档或保存重要信息。
3. 文本提取工具
问题： 您找到了一篇好文章，但复制文本却是一场噩梦。有些网站禁止复制，或者文本分散在多个部分。
解决方案：
function extractAllText() {const allText = document.body.innerText;navigator.clipboard.writeText(allText);alert('文本已复制到剪贴板！');}
使用场景： 一键提取并复制网页上的所有可读文本。
4. 链接采集器
问题： 研究耗时太长？手动复制页面上的每个链接既耗时又容易出错。
解决方案：
function collectAllLinks() {const links = Array.from(document.links).map(link => link.href).filter(link => link.startsWith('http'));return links;}
使用场景： 快速收集网页上的所有链接，用于研究、内容策划或竞争分析。
5. 自动滚动暂停器
问题： 在不同标签中观看多个视频，它们同时播放，消耗您的流量并造成音频混乱。
解决方案：
function pauseVideoOnScroll() {window.addEventListener('scroll', () => {const videos = document.querySelectorAll('video');videos.forEach(video => {if (video.getBoundingClientRect().bottom < 0) {video.pause();}});});}
使用场景： 当视频滚动出视图时自动暂停，节省带宽并防止不必要的背景噪音。
6. 自动点击 Cookie 同意
问题： 那些烦人的 Cookie 同意弹窗每次都会打断您的浏览。点击、点击、点击——太累了！
解决方案：
function autoDismissCookies() {const cookieButtons = [\'accept all', 'agree', 'got it', 'close', 'continue'\];const buttons = Array.from(document.querySelectorAll('button')).filter(btn => cookieButtons.some(text =>btn.textContent.toLowerCase().includes(text)));buttons[0]?.click();}
使用场景： 自动关闭 Cookie 同意弹窗，简化您的浏览体验。
7. 强制黑暗模式
问题： 深夜浏览时，明亮的白色网站让您的眼睛感到不适。并非所有网站都有黑暗模式，您的眼睛正在受苦。
解决方案：
function enableDarkMode() {document.body.classList.add('dark-mode');document.querySelectorAll('*').forEach(el => {el.style.backgroundColor = '#121212';el.style.color = '#ffffff';});}
使用场景： 强制在原生不支持黑暗模式的网站上启用黑暗模式，保护您的眼睛在深夜浏览。
8. 阅读时间估算器
问题： 您打开了一篇文章，但不确定是否有足够的时间完整阅读。是否应该将其加入书签以便稍后阅读？
解决方案：
function estimateReadingTime() {const text = document.body.innerText;const wordCount = text.trim().split(/\s+/).length;const readingTime = Math.ceil(wordCount / 200);console.log(`预计阅读时间：${readingTime} 分钟`);}
使用场景： 快速估算任何文章的阅读时间，帮助您更好地管理时间。
9. 自动翻译
问题： 找到一篇有趣的外语文章，但翻译应用笨拙且需要切换多个平台。
解决方案：
function translatePage(targetLanguage) {const googleTranslateScript = document.createElement('script');googleTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';document.body.appendChild(googleTranslateScript);window.googleTranslateElementInit = function() {new google.translate.TranslateElement({pageLanguage: 'auto',includedLanguages: targetLanguage});};}
使用场景： 无需离开当前网站即可即时翻译整个网页。
10. 自动下载管理器
问题： 您在摄影网站或设计画廊上，想要下载多张图片。逐一下载太麻烦了。
解决方案：
function downloadAllImagesInView() {const images = Array.from(document.images).filter(img => img.complete && img.naturalWidth > 0);images.forEach((img, index) => {const link = document.createElement('a');link.href = img.src;link.download = `image_${index}.jpg`;link.click();});}
使用场景： 一键下载网页上的所有可见图片。
11. 禁用无限滚动
问题： 无限滚动的网站可能会让人感到不知所措。您不断滚动，却忘记了起点。
解决方案：
function disableInfiniteScroll() {window.addEventListener('scroll', (e) => {const scrollTriggers = document.querySelectorAll('.load-more');scrollTriggers.forEach(trigger => {trigger.style.display = 'none';});});}
使用场景： 防止网站在滚动时持续加载内容。
12. 自动登录脚本
问题： 经常使用相同凭据登录多个网站？反复输入密码既繁琐又耗时。
解决方案：
function autoLogin(username, password) {const usernameField = document.querySelector('input[name="username"]');const passwordField = document.querySelector('input[name="password"]');const loginButton = document.querySelector('button[type="submit"]');if (usernameField) usernameField.value = username;if (passwordField) passwordField.value = password;if (loginButton) loginButton.click();}
使用场景： 在熟悉的网站上自动化登录过程。
13. 广告拦截增强
问题： 网站上充斥着广告，拖慢了您的浏览速度，分散了您对内容的注意力。
解决方案：
function removeAds() {const adSelectors = [\'.ad', '.advertisement',\'[class*="ad-"]', '[id*="ad-"]'\];adSelectors.forEach(selector => {document.querySelectorAll(selector).forEach(el => el.remove());});}
使用场景： 动态移除网页上的广告元素。
14. 文本转语音阅读器
问题： 想在做其他事情时消费内容？阅读可能会耗时，并非每个人都有时间坐下来阅读。
解决方案：
function readPageContent() {const speech = new SpeechSynthesisUtterance(document.body.innerText);window.speechSynthesis.speak(speech);}
使用场景： 将网页文本转换为语音，实现免提阅读。
15. 自动优惠券查找器
问题： 在线购物时，总是想知道是否有遗漏的优惠券代码。
解决方案：
function findCoupons() {const couponRegex = /\b(\d{2,3}%\s*off|\$\d+\s*off|promo)\b/gi;const pageText = document.body.innerText;const coupons = pageText.match(couponRegex) || [];console.log('潜在优惠券：', coupons);}
使用场景： 扫描网页以查找潜在的折扣代码和促销活动。
16. 配色方案分析器
问题： 对网站的设计和配色方案感到好奇？想了解其色彩心理学？
解决方案：
function analyzeColorScheme() {const styles = window.getComputedStyle(document.body);const backgroundColor = styles.backgroundColor;const textColor = styles.color;console.log('背景：', backgroundColor);console.log('文本颜色：', textColor);}
使用场景： 自动分析并记录网站的配色方案。
17. 断链检测器
问题： 点击链接却无法访问，这让人感到沮丧。如何快速识别哪些链接是断链？
解决方案：
function detectBrokenLinks() {const links = Array.from(document.links);links.forEach(link => {fetch(link.href).then(response => {if (!response.ok) {console.warn('断链：', link.href);}});});}
使用场景： 扫描并识别网页上的断链。
18. 自动笔记提取器
问题： 阅读文章时想保存重要片段，但复制粘贴很麻烦？
解决方案：
function extractHighlightedText() {const selection = window.getSelection();const highlightedText = selection.toString();if (highlightedText) {localStorage.setItem('webpage-notes', highlightedText);}}
使用场景： 自动将高亮文本保存到本地浏览器存储中。
19. 性能分析器
问题： 想知道为什么网站感觉很慢？想了解其性能表现？
解决方案：
function analyzeSitePerformance() {const loadTime = performance.now();const resourceCount = performance.getEntriesByType('resource').length;console.log('页面加载时间：', loadTime, 'ms');console.log('总资源数：', resourceCount);}
使用场景： 快速收集任何网页的性能指标。
20. 动态内容屏蔽器
问题： 有些网站的内容您不想看到——无论是特定主题、关键词还是分散注意力的元素。
解决方案：
function blockDynamicContent(keywords) {const elements = document.querySelectorAll('*');elements.forEach(el => {if (keywords.some(keyword =>el.textContent.toLowerCase().includes(keyword))) {el.style.display = 'none';}});}
使用场景： 动态隐藏包含特定关键词的内容。
有了这 20 个 JavaScript 脚本，您可以掌控浏览器中最重复的任务，并腾出时间专注于真正重要的事情。
如果您想提高生产力、简化工作流程，或者在更短的时间内完成更多工作，自动化可以带来巨大的改变。
