浏览器插件——一键滑动页面顶/底部

前言

仅提供思路和参考代码，代码的编写每个人的风格不一样。前半部分不涉及原理，只介绍操作步骤。原理在后记进行补充。本文开发的插件针对谷歌内核的浏览器，如chrome、edge、QQ浏览器等，不同浏览器的开发可能会有部分区别。

新建文件（夹）

新建一个文件夹，在文件夹里新建两个文件manifest.json、app.js。其中manifest.json配置文件名字不可更改，app.js文件名可自定义。

• 一键滑动页面插件（文件夹名字可自定义）
  • manifest.json
  • app.js（名字可自定义）

代码

manifest.json

{
    "manifest_version": 3,
    "name": "页面滚动底部顶部插件V2.0",
    "description": "右键一键滑动至页面顶/底部",
    "version": "2.0",
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["app.js"]
    }]
}

app.js

let x1;
let y1;
let x2;
let y2;

// 鼠标右键按下
document.addEventListener('mousedown', function(e) {
    // 记录移动起始坐标
    if (e.button == 2) {
        x1 = e.screenX;
        y1 = e.screenY;
    }
})

// 鼠标右键弹起
document.addEventListener('mouseup', function(e) {
    // 记录移动结束坐标
    if (e.button == 2) {
        x2 = e.screenX;
        y2 = e.screenY;
        let moveX = Math.abs(x2 - x1);
        let moveY = Math.abs(y2 - y1);
        
        // 鼠标左右移动距离小于50px，上下移动超过10px，视为用户想要滑动至页面顶/底部
        if (moveX < 50 && moveY > 10) {
            document.addEventListener('contextmenu', fn);
            y2 - y1 > 0 ? window.scrollTo(0, document.body.scrollHeight) : window.scrollTo(0, 0);
        }
        // 如果鼠标移动范围没超过，则不移动，默认显示右键菜单
        else{
            document.removeEventListener('contextmenu', fn);
        }
    }
})

// 阻止浏览器中默认事件的发生，本插件用于阻止右键菜单弹出
let fn = function(e) {
    e.preventDefault();
}

导入文件夹

chrome浏览器，在地址栏输入chrome://extensions/，勾选开发者模式，点击加载已解压的扩展程序，选择文件夹导入。

edge浏览器，在地址栏输入edge://extensions/，同理

后记

manifest.json

manifest.json 文件对于谷歌浏览器插件是必不可少的。manifest.json 文件是插件的配置文件，它必须位于插件的根目录，并且必须遵循特定的 JSON 格式，它告诉浏览器如何处理插件以及插件的行为。
manifest.json文件中有几个配置字段是必须提供的：

{
    "manifest_version": 3,
    "name": "你的插件的名字",
    "version": "x.x"
}

manifest_version通常为3，版本为2的逐渐被淘汰。
name是插件的名字，必须提供。
version是插件的版本号，格式通常为"主版本号.次版本号.修订版本号"。
此时若你的文件夹中只有一个manifest.json文件，且配置文件中已有这三个字段，则可以将该文件夹作为插件导入浏览器中，只不过此时插件无功能实现。

content_scripts

本插件需要实现特定功能，因此需要引入字段content_scripts，用于定义应该注入到网页中的js和css。这些脚本和样式表通常用于修改网页的行为、外观或添加特定功能。
“matches”: [“<all_urls>”]意思是匹配所有网页，对所有网页注入js或css。也可以改成特定的网站，或者用通配符匹配满足条件的网站。
“js”: [“app.js”]，本例中注入了一个app.js文件，可以在匹配的网页中实现自定义的功能。
“css”，注入样式表，改变网页的样式，这个我没有试过，插件主要用来实现功能，比较少用来改样式。

js代码

本插件是通过记录右键按下时的坐标和弹起时的坐标之间的变化情况，来判断用户是否想要滑动页面至顶/底部。逻辑简单，故而代码也简单。对于js代码部分不作解释，代码中有部分注释帮助理解。
相信你有一定的网页开发基础，代码会比我编写得更好。