我曾经在浏览器中花费了太多时间在重复的任务上——填写表单、管理标签和滚动无尽的页面。感觉必须有一种更聪明的方式来处理这一切。
于是，我转向了 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 脚本，您可以掌控浏览器中最重复的任务，并腾出时间专注于真正重要的事情。
如果您想提高生产力、简化工作流程，或者在更短的时间内完成更多工作，自动化可以带来巨大的改变。
