油猴脚本：快速打开粘贴的多个网址

原创

喵喵侠

发布于 2024-08-04 14:07:57

55003

代码可运行

文章被收录于专栏：喵喵侠的社区活动征文喵喵侠的社区活动征文喵喵学前端

运行总次数：3

代码可运行

你好，我是喵喵侠。今天我将为你介绍一个非常实用的油猴脚本，可以帮助你快速打开多个粘贴的网址链接。在日常工作中，我们可能会遇到需要批量打开多个网页的情况，如果手动逐个打开，不仅耗时费力，而且容易出错。为了提高效率，我们可以利用油猴脚本来自动化这一过程。

什么是油猴脚本？

油猴脚本（Tampermonkey Script）是一种浏览器扩展，允许用户在浏览网页时运行自定义的JavaScript代码。通过油猴脚本，我们可以添加新功能、修改网页内容、自动化一些重复性操作，极大地提升浏览器的使用体验。

脚本功能简介

这个脚本的主要功能是：

提供一个输入框，用户可以粘贴多个网址（每行一个）。
点击按钮后，脚本会按照设定的时间间隔逐个打开这些网址。
用户可以设置时间间隔，防止浏览器一次性打开太多标签页导致崩溃。

脚本代码及优化

以下是这个油猴脚本的代码，我会在代码中逐步解释每个部分的功能。如果你有更好的代码写法或优化建议，欢迎提出。

// ==UserScript==
// @name         快速打开粘贴的多个网址
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  批量打开多个网址，支持设置时间间隔
// @author       喵喵侠
// @match        *://*/*
// @grant        none
// @run-at       context-menu
// ==/UserScript==

(function () {
    'use strict';

    // 创建主容器
    var div = document.createElement("div");
    div.style.cssText = "position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;z-index:99999;width:800px;height:600px;background:rgba(0,0,0,0.8);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;border-radius:10px;";

    // 创建文本框
    var textarea = document.createElement("textarea");
    textarea.style.cssText = "width:100%;height:300px;padding:10px;margin-bottom:10px;font-size:16px;border-radius:5px;border:1px solid #ccc;";

    // 创建打开按钮
    var btn = document.createElement("button");
    btn.innerHTML = "全部跳转！";
    btn.style.cssText = "padding:10px 20px;margin:5px;background-color:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;";

    // 创建关闭按钮
    var close_btn = document.createElement("button");
    close_btn.innerHTML = "关闭";
    close_btn.style.cssText = "padding:10px 20px;margin:5px;background-color:#f44336;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;";

    // 创建时间间隔输入框
    var time_input = document.createElement("input");
    time_input.type = "number";
    time_input.value = "500";
    time_input.style.cssText = "width:60px;padding:10px;margin:5px;font-size:16px;border-radius:5px;border:1px solid #ccc;text-align:center;";

    // 将元素添加到主容器
    div.appendChild(textarea);
    div.appendChild(btn);
    div.appendChild(close_btn);
    div.appendChild(time_input);

    // 将主容器添加到body
    document.body.appendChild(div);

    // 打开按钮点击事件
    btn.onclick = function () {
        var urls = textarea.value.split("\n").filter(url => url.trim() !== ""); // 过滤空行
        for (let i = 0; i < urls.length; i++) {
            setTimeout(() => {
                window.open(urls[i].trim());
            }, i * time_input.value); // 使用索引*i*时间间隔，避免一次性打开太多页面
        }
        document.body.removeChild(div);
    };

    // 关闭按钮点击事件
    close_btn.onclick = function () {
        document.body.removeChild(div);
    };
})();

如果你想直接安装使用，可以访问我的脚本地址：

快速打开粘贴的多个网址

代码解读

元数据块:

这一部分定义了脚本的基本信息，包括名称、版本、描述、作者以及匹配的URL模式。

// ==UserScript==
// @name         快速打开粘贴的多个网址
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  批量打开多个网址，支持设置时间间隔
// @author       喵喵侠
// @match        *://*/*
// @grant        none
// @run-at       context-menu
// ==/UserScript==

创建主容器

var div = document.createElement("div");
div.style.cssText = "position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;z-index:99999;width:800px;height:600px;background:rgba(0,0,0,0.8);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;border-radius:10px;";

创建文本框

var textarea = document.createElement("textarea");
textarea.style.cssText = "width:100%;height:300px;padding:10px;margin-bottom:10px;font-size:16px;border-radius:5px;border:1px solid #ccc;";

创建打开按钮和关闭按钮

var btn = document.createElement("button");
btn.innerHTML = "全部跳转！";
btn.style.cssText = "padding:10px 20px;margin:5px;background-color:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;";

var close_btn = document.createElement("button");
close_btn.innerHTML = "关闭";
close_btn.style.cssText = "padding:10px 20px;margin:5px;background-color:#f44336;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;";

创建时间间隔输入框

var time_input = document.createElement("input");
time_input.type = "number";
time_input.value = "500";
time_input.style.cssText = "width:60px;padding:10px;margin:5px;font-size:16px;border-radius:5px;border:1px solid #ccc;text-align:center;";

按钮点击事件

btn.onclick = function () {
    var urls = textarea.value.split("\n").filter(url => url.trim() !== ""); // 过滤空行
    for (let i = 0; i < urls.length; i++) {
        setTimeout(() => {
            window.open(urls[i].trim());
        }, i * time_input.value); // 使用索引*i*时间间隔，避免一次性打开太多页面
    }
    document.body.removeChild(div);
};

close_btn.onclick = function () {
    document.body.removeChild(div);
};