Tampermonkey油猴脚本示例：不可移动的效果

Tampermonkey是一个流行的用户脚本管理器，它允许用户创建和执行自定义的JavaScript脚本，以扩展或修改网页的功能。今天，我们将利用Tampermonkey来实现一个简单的网页功能：一个不可移动到窗口外的聊天框。我们会用到HTML、CSS和JavaScript（特别是jQuery）。

脚本功能描述

我们的目标是创建一个简单的聊天框，并确保它无法被拖动到浏览器窗口之外。这对于某些应用场景来说是非常实用的，比如防止用户误操作或者保持UI的整洁性。

实现步骤

1. 创建Tampermonkey脚本
2. 设计聊天框的HTML结构
3. 使用CSS进行样式设计
4. 使用JavaScript和jQuery实现聊天框的拖动功能，同时确保其不会被拖出窗口

1. 创建Tampermonkey脚本

首先，在Tampermonkey中创建一个新的脚本。可以在浏览器扩展图标中找到Tampermonkey，然后选择“创建新脚本”。

2. 设计HTML结构

下面是聊天框的HTML结构：

<div id="chatBox" class="draggable">
    <header>聊天框</header>
    <div class="content">
        <p>欢迎来到聊天框！</p>
    </div>
    <footer>
        <input type="text" placeholder="输入你的消息…" />
        <button>发送</button>
    </footer>
</div>

3. 使用CSS进行样式设计

我们将使用CSS来为聊天框提供基本样式，使其看起来更加美观：

#chatBox {
    width: 300px;
    height: 400px;
    background: #ffffff;
    border: 1px solid #ccc;
    position: absolute;
    top: 100px;
    left: 100px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

header {
    background: #007bff;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.content {
    height: calc(100% - 80px);
    overflow-y: auto;
    padding: 10px;
}

footer {
    display: flex;
    padding: 10px;
}

4. 实现JavaScript和jQuery代码

接下来，我们将实现聊天框的拖动功能。以下是JavaScript和jQuery的实现代码：

// ==UserScript==
// @name         简单聊天框
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  一个不可移动到窗口外的聊天框
// @author       学习者
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 添加聊天框的HTML
    $('body').append(`
        <div id="chatBox" class="draggable">
            <header>聊天框</header>
            <div class="content">
                <p>欢迎来到聊天框！</p>
            </div>
            <footer>
                <input type="text" placeholder="输入你的消息…" />
                <button>发送</button>
            </footer>
        </div>
    `);

    // 拖动功能
    $('#chatBox').draggable({
        containment: "window", // 限制拖动范围为窗口范围内
        handle: "header" // 设定只能通过header部分来拖动
    });

    // 处理发送按钮的点击事件
    $('#chatBox button').click(function() {
        const message = $('#chatBox input').val();
        if (message) {
            $('#chatBox .content').append(`<p>${message}</p>`);
            $('#chatBox input').val(''); // 清空输入框
        }
    });
})();

总结

通过以上步骤，我们成功创建了一个简单的不可移动到窗口外的聊天框，并利用jQuery实现了拖动功能。这个示例不仅可以作为学习JavaScript的基础，也展示了Tampermonkey如何通过脚本改变网页的交互体验。记得在使用此脚本时，遵循相关网页的使用政策，确保脚本的合法性和合规性。

希望这个示例对你有所帮助，助于你更深入地了解Tampermonkey脚本编写的基础和应用！