ChatGPT实战100例 - (03) 网站用不惯？油猴子盘它
一、需求与思路
需求：网页太长，要回顶部慢慢拖？
No，没这个功能，分分钟盘它。
操作步骤：
- ChatGPT编写相关脚本
- 部署至浏览器，用起来
二、油猴子脚本
1.问题：
有的网页很长，我想点击按钮快速回到网页上方，写一个油猴子脚本实现它，要美观点
2.回答：
以下是一个简单的油猴脚本，可以在页面中添加一个漂亮的“回到顶部”按钮，并且在点击按钮时会平滑地滚动到页面顶部：
// ==UserScript==
// @name Back To Top Button
// @namespace your-namespace
// @version 1.0
// @description Add a back to top button to quickly scroll to the top of the page
// @match http://*/*
// @match https://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Create a button element
var backToTopButton = document.createElement('button');
backToTopButton.innerHTML = '↑';
backToTopButton.style.display = 'none';
backToTopButton.style.position = 'fixed';
backToTopButton.style.right = '20px';
backToTopButton.style.bottom = '20px';
backToTopButton.style.width = '50px';
backToTopButton.style.height = '50px';
backToTopButton.style.borderRadius = '50%';
backToTopButton.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
backToTopButton.style.color = '#fff';
backToTopButton.style.fontSize = '24px';
backToTopButton.style.lineHeight = '50px';
backToTopButton.style.textAlign = 'center';
backToTopButton.style.cursor = 'pointer';
// Add the button to the page
document.body.appendChild(backToTopButton);
// Show the button when the user scrolls down
window.addEventListener('scroll', function() {
if (document.documentElement.scrollTop > 0) {
backToTopButton.style.display = 'block';
} else {
backToTopButton.style.display = 'none';
}
});
// Scroll to the top of the page when the button is clicked
backToTopButton.addEventListener('click', function() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(scrollToTop);
}
});
// Function to smoothly scroll to the top of the page
function scrollToTop() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.scrollTo(0, currentScroll - (currentScroll / 5));
window.requestAnimationFrame(scrollToTop);
}
}
})();
你可以将此代码复制到油猴脚本编辑器中，保存后在浏览器上运行，就会在页面中添加一个美观的回到顶部按钮。
果真漂亮 ~ 么?
二、油猴子脚本部署
继续提问
问题：
如何部署油猴子脚本
回答：
油猴(Tampermonkey)是一款浏览器扩展,可以运行用户脚本来自定义网页功能。部署油猴脚本主要有以下步骤:
- 安装Tampermonkey浏览器扩展
首先你需要安装Tampermonkey浏览器扩展,它支持Chrome、Firefox、Safari等主流浏览器。安装对应浏览器的扩展。 - 获取用户脚本
你可以从以下 sources 获取用户脚本:
- OpenUserJS:开源的用户脚本站点,有许多可用脚本可供选择
- Github:也有许多开源的Tampermonkey脚本库
- 个人博客:一些网站也会发布自己开发的Tampermonkey脚本
- 自行开发:你也可以按照Tampermonkey的语法规则自己开发脚本
- 安装用户脚本
获取到用户脚本后,你需要将其安装到Tampermonkey中才能运行。
- 打开Tampermonkey管理面板,点击“添加新脚本”
- 将用户脚本的代码粘贴到编辑框中
- 设置脚本名称和可选的版本号、作者信息等
- 点击“保存”就完成安装
- 运行和管理用户脚本
安装完成后,用户脚本将自动运行。你可以在Tampermonkey管理面板中禁用、启用或删除用户脚本。
- 点击脚本旁的锁定图标可以启用或禁用用户脚本
- 选中脚本后点击“删除”可以删除用户脚本
- 你也可以编辑用户脚本,点击“保存”后新的代码将生效
这就是主要的油猴子脚本部署步骤,通过它你可以很方便的运行各种网页定制功能和功能增强脚本。请让我知道如果你有任何其他问题!
简单的说就是：下个插件，把脚本copy进去，启动这个脚本，就搞定了！