从零写一个基于油猴脚本的 Google 辅助插件(文末附完整代码)

简介: 这是一个关于如何使用JavaScript和油猴脚本为Google搜索结果添加快捷键的功能介绍。作者首先阐述了想通过快捷键选择搜索结果的需求,然后选择了油猴插件作为开发平台。实现步骤包括:获取搜索结果列表、在结果前添加序号以及监听键盘事件触发点击。最后,作者还扩展了通过快捷键平滑滚动页面的功能,并分享了完整代码的GitHub链接。

前言

大家好,我是松柏!
不知道大家平时开发的时候喜不喜欢用快捷键呢?我本人是一个重度快捷键用户,在使用 Google 的时候发现,只能点击而不能通过快捷键选中搜索结果。
比如这里我想看第二个搜索结果,那只能通过点击的方式,于是我就在想能不能通过一个简单的脚本给这些搜索结果绑定上快捷键呢?
1 示例图.png

效果展示

首先给大家看一下最终的效果:
image.png
我这里通过 command + option + 序号就能进入特定的搜索结果,比拿起鼠标去点要快多了。
长期累积下来不知道省了多少时间,这些时间拿来学习(摸鱼)不香吗?

实现流程

选择平台(框架)

因为我平时基本都是用 Chrome 浏览器,所以我首先想到的是写一个 Chrome 浏览器插件来实现。但是稍微了解一下之后发现需要注册开发者账号,而且开发成本有点高,跟我的需求不匹配,所以放弃了这个想法。
然后撇到了浏览器上的油猴插件:
3 插件图.png

突然就觉得或许基于油猴实现会很不错,因为油猴脚本是用 JavaScript 写的,而且之前或多或少接触过,不像 Chrome 插件开发一样没怎么了解过。

实现思路

首先再明确下需求,就是给搜索结果绑定快捷键。
那么可以这样做:

  1. 获取搜索结果列表
  2. 在每个搜索结果前放一个序号
  3. 通过特定按键+序号触发点击事件,点击对应的搜索结果

编码实现

让我们按照上述实现思路来一步步实现。
1)打开 F12 ,可以发现所有的搜索结果带有特定的 class 属性LC20lb MBeuO DKV0Md。那我们就可以通过这个属性很轻易的获取到搜索结果。

let className = 'LC20lb MBeuO DKV0Md'
document.getElementsByClassName(className)

但这个时候获取到的并不是数组结构,而是 HTMLCollection对象(本文不深究这个对象,感兴趣可参考文档了解)。
我们可以通过Array.from将其转为标准的数组对象。
还有一个问题,就是我们其实没有必要获取所有的搜索结果,比如我往下滑了几屏的高度,其实只需要获取到在当前屏幕内的就可以了。
所以我们完善一下这段代码:

// 类名
let className = 'LC20lb MBeuO DKV0Md';
const result = Array.from(document.getElementsByClassName(className)).filter(node => node.getBoundingClientRect().top > 0);

2)接下来通过操作DOM节点的方式在每个搜索结果前加上一个序号

for (let i = 0; i < result.length; i++) {
   
   
    const node = result[i];
    let newSpan = node.parentNode.getElementsByClassName("p_no")[0];
    if (newSpan) {
   
   
        newSpan.remove();
    }
    // 创建一个新的 span 元素
    newSpan = document.createElement("span");
    newSpan.style = 'font-size: 30px;color: skyblue'
    newSpan.className = 'p_no'
    newSpan.innerHTML = i + 1;
    node.parentNode.insertBefore(newSpan, node);// 设置 span 元素的内容
}

3)然后监听键盘的输入事件,并触发相应的click事件

//获取被按下的键值
let keyNum = window.event ? e.keyCode : e.which;
// 打开页面
if (e.metaKey && e.altKey) {
   
   
    if (keyNum >= one && keyNum <= nine) {
   
   
        // 类名
        let className = 'LC20lb MBeuO DKV0Md';

        const result = Array.from(document.getElementsByClassName(className)).filter(node => node.getBoundingClientRect().top > 0);
        result[keyNum - 49].click()
    }
}

扩展

我最初的想法是写到这里就可以了,但是发现一个很尴尬的点:如果我可以通过快捷键选择搜索内容,但还是需要鼠标来往下滑动网页,也太抽象了吧!
于是我又想补充一下通过快捷键使网页往下滑动的功能,实践之后发现window.scrollBy的下滑是跳跃式的,就是直接往下挪了一段距离,没有鼠标往下滑的顺滑感。更尴尬的是我不知道怎么描述我的问题,没法百度。这时候就轮到 AI 出场了,于是就有了下面这段代码:

// 实现滚动动画
function scrollWithAnimation(targetPosition) {
   
   
    const startPosition = getScrollPosition();
    // const distance = targetPosition - startPosition;
    const duration = 1500; // 动画持续时间,单位毫秒
    let startTime;

    function step(timestamp) {
   
   
        // startTime 开始时间
        // timestamp 当前时间
        if (!startTime) startTime = timestamp;
        // 已执行时间
        const progress = timestamp - startTime;
        // 当前进度, 0 - 1 之间
        const percentage = Math.min(progress / duration, 1);
        const easing = easeOutQuad(percentage);

        window.scrollBy(0, targetPosition * easing);

        if (progress < duration) {
   
   
            requestAnimationFrame(step);
        }
    }

    requestAnimationFrame(step);
}

// 线性插值函数
function easeOutQuad(t) {
   
   
    return -1 * t * t + 1;
}

其中值得一提的是,AI 给的代码问题很多(特别是线性插值函数,测试了半天才搞懂这个函数和滚动动画的关系),不能直接用。但其实已经给我提供了实现方案和思路,这也就够了,稍微改一下就能用了。

完整代码

Github:https://github.com/co-pine/google-search-helper
直接把index.js的代码复制下来放到油猴中就能直接用啦!
欢迎关注公众号co松柏交流!

目录
相关文章
|
14天前
|
人工智能 前端开发 API
【代码吸猫】使用 Google MLKit 进行图像识别
【代码吸猫】使用 Google MLKit 进行图像识别
99 0
|
14天前
|
传感器 编解码 数据处理
Open Google Earth Engine(OEEL)——哨兵1号数据的黑边去除功能附链接和代码
Open Google Earth Engine(OEEL)——哨兵1号数据的黑边去除功能附链接和代码
29 0
|
8月前
超越常规,轻松掌握灵感——FAST GPT:定制化Google插件震撼登场!
超越常规,轻松掌握灵感——FAST GPT:定制化Google插件震撼登场!
|
14天前
|
JavaScript 测试技术
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
|
14天前
|
JavaScript 前端开发 定位技术
Google Earth Engine谷歌地球引擎GEE中JavaScript脚本语言代码基础规则与函数语句
Google Earth Engine谷歌地球引擎GEE中JavaScript脚本语言代码基础规则与函数语句
|
14天前
|
存储 数据可视化 数据管理
Google Earth Engine谷歌地球引擎GEE外部栅格矢量数据导入管理与下载及数据与代码共享
Google Earth Engine谷歌地球引擎GEE外部栅格矢量数据导入管理与下载及数据与代码共享
|
14天前
|
存储 数据可视化 定位技术
Google Earth Engine谷歌地球引擎GEE栅格数据图层可视化设置代码嵌入
Google Earth Engine谷歌地球引擎GEE栅格数据图层可视化设置代码嵌入
|
5月前
|
Web App开发
GOOGLE chrome浏览器 非插件截图方法
emm...不知道大家知不知道,反正不管怎么样,我就拿来水一下 打开chrome 哦~ 右键审查元素 or F12 or ctrl+shit+i or 你自己设置的快捷键... 然后再ctrl+shit+p
131 0
|
8月前
|
人工智能 自然语言处理 程序员
编程不头秃,Google「AI程序员」来了,聊天就能敲代码
编程不头秃,Google「AI程序员」来了,聊天就能敲代码
104 0
|
9月前
|
JavaScript 程序员 API
Google浏览器插件之闪存过滤器
Google浏览器插件之闪存过滤器
52 0