ChatGPT实战100例 - (03) 网站用不惯?油猴子盘它

news/2024/4/24 23:04:39/

文章目录

  • ChatGPT实战100例 - (03) 网站用不惯?油猴子盘它
    • 一、需求与思路
    • 二、油猴子脚本
    • 二、油猴子脚本部署

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 elementvar 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 pagedocument.body.appendChild(backToTopButton);// Show the button when the user scrolls downwindow.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 clickedbackToTopButton.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 pagefunction scrollToTop() {var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;if (currentScroll > 0) {window.scrollTo(0, currentScroll - (currentScroll / 5));window.requestAnimationFrame(scrollToTop);}}})();

你可以将此代码复制到油猴脚本编辑器中,保存后在浏览器上运行,就会在页面中添加一个美观的回到顶部按钮。

果真漂亮 ~ 么?

二、油猴子脚本部署

继续提问

问题:
如何部署油猴子脚本

回答:
油猴(Tampermonkey)是一款浏览器扩展,可以运行用户脚本来自定义网页功能。部署油猴脚本主要有以下步骤:

  1. 安装Tampermonkey浏览器扩展
    首先你需要安装Tampermonkey浏览器扩展,它支持Chrome、Firefox、Safari等主流浏览器。安装对应浏览器的扩展。
  2. 获取用户脚本
    你可以从以下 sources 获取用户脚本:
  • OpenUserJS:开源的用户脚本站点,有许多可用脚本可供选择
  • Github:也有许多开源的Tampermonkey脚本库
  • 个人博客:一些网站也会发布自己开发的Tampermonkey脚本
  • 自行开发:你也可以按照Tampermonkey的语法规则自己开发脚本
  1. 安装用户脚本
    获取到用户脚本后,你需要将其安装到Tampermonkey中才能运行。
  • 打开Tampermonkey管理面板,点击“添加新脚本”
  • 将用户脚本的代码粘贴到编辑框中
  • 设置脚本名称和可选的版本号、作者信息等
  • 点击“保存”就完成安装
  1. 运行和管理用户脚本
    安装完成后,用户脚本将自动运行。你可以在Tampermonkey管理面板中禁用、启用或删除用户脚本。
  • 点击脚本旁的锁定图标可以启用或禁用用户脚本
  • 选中脚本后点击“删除”可以删除用户脚本
  • 你也可以编辑用户脚本,点击“保存”后新的代码将生效
    这就是主要的油猴子脚本部署步骤,通过它你可以很方便的运行各种网页定制功能和功能增强脚本。请让我知道如果你有任何其他问题!

简单的说就是:下个插件,把脚本copy进去,启动这个脚本,就搞定了!


http://www.ppmy.cn/news/47553.html

相关文章

盖子的c++小课堂——第十七讲:递归

前言 通知一下,以后每周不定期更新,有可能是周六更新,也可能是周日吧,反正会更新的~~还有我新出的专栏《跟着盖子读论语》,记得订阅一下啊跟着盖子学《论语》_我叫盖子的盖鸭的博客-CSDN博客 三元表达式 三元表达式…

android studio 重装之老年人

原由:前一天估计未正确关机,导致第二天0004蓝屏开机,重装系统,装好androidstudio 以及jdk,adt (且adt要新否则连不上) a.出现adb device 未知最常见的方案就是先找到占用ADB的端口的程序,然后杀死重启服务…

【Python入门第五十二天】Python丨NumPy 数组过滤

数组过滤 从现有数组中取出一些元素并从中创建新数组称为过滤(filtering)。 在 NumPy 中,我们使用布尔索引列表来过滤数组。 布尔索引列表是与数组中的索引相对应的布尔值列表。 如果索引处的值为 True,则该元素包含在过滤后的…

分布式定时任务

本文引用了谷粒商城的课程 定时任务 定时任务是我们系统里面经常要用到的一些功能。如每天的支付订单要与支付宝进行对账操作、每个月定期进行财务汇总、在服务空闲时定时统计当天所有信息数据等。 定时任务有个非常流行的框架Quartz和Java原生API的Timer类。Spring框架也可以…

15-Django框架基础(3)

1 Django模板加载与响应 本节我们将重点讲解 Django 的模板语言。 Django 的模板系统将 Python 代码与 HTML 代码解耦,动态地生成 HTML 页面。Django 项目可以配置一个或多个模板引擎,但是通常使用 Django 的模板系统时,应该首先考虑其内置…

干货|手把手教你怎么做好一块PCB!保姆级教程

目录 一.明确设计目标 二.了解所用元器件的功能对布局布线的要求 三. 元器件布局的考虑 四.对布线的考虑 1.传输线 2.传输线的几种类型 3.端接传输线 4.非端接传输线 5.几种端接方式的比较 五.PCB 板的布线技术 一.明确设计目标 接受到一个设计任务,首先要明确其设计目标,是普通…

【vue2】使用elementUI进行表单验证实操(附源码)

🥳博 主:初映CY的前说(前端领域) 🌞个人信条:想要变成得到,中间还有做到! 🤘本文核心:vue使用elementUI进行表单验证实操(附源码) 【前言】我们在构建一…

Python无框架分布式爬虫,爬取范例:拼多多商品详情数据,拼多多商品列表数据

拼多多是中国领先的社交电商平台之一,是一家以“团购折扣”为主要运营模式的电商平台。该平台上有海量的商品,对于商家和消费者来说都具有非常大的价值,因此,拼多多商品数据的采集技术非常重要。本文将介绍拼多多商品数据的采集技…

SAM(Segment Anything Model)让CV走到尽头?学CV的研究生还能正常毕业吗?怎么使用SAM?

SAM(Segment Anything Model)让CV走到尽头?学CV的研究生还能正常毕业吗?怎么使用SAM? 1. 引言 最近无论是在B站、知乎还是论坛、微博,都看了一些有关SAM的讨论。这个号称“CV界ChatGPT”的模型从出生起就…

藏经阁(七)有源蜂鸣器和无源蜂鸣器 解析

文章目录 特征区别场景选型实战应用 特征 有源蜂鸣器特征: 又被称为直流蜂鸣器包含了一个多谐振荡器只要额定直流电压可以在两端发出声音具有驱动控制简单价格略高 无源蜂鸣器特征: 又被称为交流蜂鸣器内部没有振荡器需要在两端施加特定频率的方波电…

mysql-!=,<>,=,<=>,is区别及使用推荐

!和<> 相同点&#xff1a;两个比较符作用相同 不同点&#xff1a;!是ANSI标准中的一部分&#xff0c;因此也可以用在其他数据库中。而<>只能在mysql中使用。 建议&#xff1a;如果可以都用!&#xff0c;这样可以减少必要的迁移成本&#xff0c;如mysql的sql迁移到…

MVC、MVP、MVVM:谁才是Android开发的终极之选?

概述 MVC、MVP、MVVM 都是在 Android 开发中经常用到的架构思想&#xff0c;它们都是为了更好地分离代码、提高代码可复用性、方便维护等目的而设计的。下面对这三种架构思想进行简单的介绍和比较。 MVC MVC 架构是最早被使用的一种架构&#xff0c;它把程序分成了三个部分&…

windows下Tomcat安装

目录 1.安装java环境 2.配置Tomcat环境变量 3.安装服务 4.启动前修改配置文件 &#xff08;1&#xff09;设置tomcat端口 &#xff08;2&#xff09;设置临时日志等文件夹的位置 5.放入应用 6.启动Tomcat服务 1.安装java环境 安装tomcat版本对应的JDK 比如&#xff1a;…

初始单片机.md

1.如何将HEX文件烧录到单片机 STC-ISP STC-ISP是一款单片机下载编程烧录软件&#xff0c;是针对STC系列单片机而设计的&#xff0c;可下载STC89系列、12C2052系列和12C5410等系列的STC单片机&#xff0c;使用简便。 思路&#xff1a;将电脑磁盘上已存在的文件通过串口的方式下…

Linux文件系统 文件恢复

inode和block block 用于存储文件数据。 文件是存储在硬盘上的&#xff0c;硬盘的最小存储单位叫做“扇区”&#xff08;sector&#xff09;&#xff0c;每个扇区存储512字节。连续八个扇区组成一个"块"&#xff08;block&#xff09;&#xff0c;一个块是4K大小&…

Zookeeper实战之客户端Curator vs zkClient

1. zookeeper应用开发 Zookeeper应用开发&#xff0c;需要使用Zookeeper的java 客户端API &#xff0c;去连接和操作Zookeeper 集群。 可以供选择的java 客户端API 有&#xff1a;Zookeeper 官方的 java客户端API&#xff0c;第三方的java客户端API。 Zookeeper官方的客户端…

PAM AppArmor非默认目录构建和安装

在AppArmor零知识学习十二、源码构建&#xff08;9&#xff09;中&#xff0c;详细介绍了PAM AppArmor的构建步骤&#xff0c;但那完全使用的是官网给出的默认参数。如果需要将目标文件生成到指定目录而非默认的/usr&#xff0c;则需要进行一些修改&#xff0c;本文就来详述如何…

驼峰式匹配

问题&#xff1a; 如果我们可以将小写字母插入模式串 pattern 得到待查询项 query&#xff0c;那么待查询项与给定模式串匹配。&#xff08;我们可以在任何位置插入每个字符&#xff0c;也可以插入 0 个字符。&#xff09; 给定待查询列表 queries&#xff0c;和模式串 patte…

浅析linux驱动中uImage,zImage,bootz,bootm

1 uImage和zImage uImage和zImage都是Linux内核启动时可能使用到的镜像格式 1.1 uImage uImage是一种包含压缩和非压缩内核镜像的格式&#xff0c;它能够根据实际情况选择合适的解压缩方式。它通常用于在嵌入式系统中&#xff0c;通过bootloader从存储介质中加载内核镜像。 …

自适应模糊PID控制算法

一、自适应模糊PID控制 自适应模糊PID控制将模糊控制与传统PID控制相结合&#xff0c;将两种控制方式进行结合&#xff0c;取长补短&#xff0c;对传统的算法进行优化&#xff0c;形成一种新的控制算法&#xff0c;自适应模糊PID控制可以用于很多场景&#xff0c;比如温度控制&…