前言

以前，我总在浏览器上花大量时间处理重复性任务——填写表单、管理标签页、浏览无尽的页面。我感觉一定有更聪明的方法来处理这一切。

所以，我转向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('Text copied to clipboard!');
}

使用场景： 一键提取并复制网页上的所有可读文本。

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(`Estimated reading time: ${readingTime} minutes`);
}

使用场景： 快速估算任何文章的阅读时间，帮助你更好地管理时间。

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('Potential Coupons:', coupons);
}

使用场景： 扫描网页，查找潜在的折扣码和促销活动。

16. 配色方案分析器

问题： 好奇网站的设计和配色方案？想了解它的色彩心理学？
解决方案：

function analyzeColorScheme() {
  const styles = window.getComputedStyle(document.body);
  const backgroundColor = styles.backgroundColor;
  const textColor = styles.color;

  console.log('Background:', backgroundColor);
  console.log('Text Color:', textColor);
}

使用场景： 自动分析并记录网站的配色方案。

17. 坏链接检测器

问题： 点击链接却无法跳转，令人沮丧。如何快速识别哪些链接已损坏？
解决方案：

function detectBrokenLinks() {
  const links = Array.from(document.links);
  links.forEach(link => {
    fetch(link.href)
      .then(response => {
        if (!response.ok) {
          console.warn('Broken Link:', 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('Page Load Time:', loadTime, 'ms');
  console.log('Total Resources:', 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脚本，你就可以掌控浏览器中最重复的任务，从而腾出时间去做真正重要的事情。
如果你想提高工作效率、简化工作流程或在更短的时间内完成更多工作，自动化可以带来很大的帮助。
免责声明： 一些脚本可能需要额外的库或浏览器权限。请务必在受控环境中测试脚本，并获得必要的授权。