Telegram Web 使用快捷键 J & K 浏览频道中的消息

tgmsg-nav.user.js

// ==UserScript==
// @name         Telegram Channel Message Navigation
// @namespace    https://anl.gg/
// @version      0.1
// @description  Navigate next/prev message by pressing j & k
// @author       greatghoul
// @match        https://web.telegram.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=telegram.org
// ==/UserScript==

(function() {
  'use strict';

  var message = null;

  document.addEventListener("keydown", function(event) {
    if (!hasInputText()) {
      if (event.code == "KeyJ") {
        activeNextMessage(1);
      } else if (event.code == "KeyK") {
        activeNextMessage(-1);
      }
    }
  });

  function hasInputText() {
    return document.querySelector("#message-input-text");
  }

  function activeNextMessage(offset) {
    if (message) {
      message = findNextMessage(message, offset);
    } else {
      message = findFirstVisibleMessage();
    }

    message && activeMessage(message);
  }

  function activeMessage(message) {
    message.scrollIntoView({behavior: "smooth"});
  }

  function findNextMessage(currentMessage, offset) {
    const messages = document.querySelectorAll('.message-list-item');
    const currentIndex = Array.from(messages).indexOf(currentMessage);
    if (currentIndex == -1) {
      message = findFirstVisibleMessage();
      return findNextMessage(message, offset);
    }

    const nextIndex = currentIndex + offset;
    if (nextIndex >= 0 && nextIndex < messages.length) {
      return messages[nextIndex];;
    } else {
      return null;
    }
  }

  function findFirstVisibleMessage() {
    var messageList = document.querySelector(".MessageList");
    var messages = document.querySelectorAll(".message-list-item");

    for (var i = 0; i < messages.length; i++) {
      var message = messages[i];
      var rect = message.getBoundingClientRect();
      if (rect.top >= 0 && rect.top < messageList.clientHeight) {
        return message;
      }
    }
    return null;
  }

})();

消息class 改名字了,需要修改脚本如下:
var messageList = document.querySelector(".bubbles-group");
var messages = document.querySelectorAll(".bubble-content-wrapper");

1.追加 滚轮滑动后 在 执行 j/k 操作 更新最新的位置
2. 修复最新的 message class 类型

// ==UserScript==
// @name         Telegram Channel Message Navigation
// @namespace    https://anl.gg/
// @version      0.1.1
// @description  Navigate next/prev message by pressing j & k
// @author       greatghoul
// @match        https://web.telegram.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=telegram.org
// ==/UserScript==

(function() {
  'use strict';

  var message = null;

  document.addEventListener("keydown", function(event) {
    if (!hasInputText()) {
      if (event.code == "KeyJ") {
        activeNextMessage(1);
      } else if (event.code == "KeyK") {
        activeNextMessage(-1);
      }
    }
  });

  document.addEventListener("scroll", (event) => {
      message = findFirstVisibleMessage();
  });

  function hasInputText() {
    return document.querySelector("#message-input-text");
  }

  function activeNextMessage(offset) {
    if (message) {
      message = findNextMessage(message, offset);
    } else {
      message = findFirstVisibleMessage();
    }

    message && activeMessage(message);
  }

  function activeMessage(message) {
    message.scrollIntoView({behavior: "instant"});
  }

  function findNextMessage(currentMessage, offset) {
    const messages = document.querySelectorAll('.bubble-content-wrapper');
    const currentIndex = Array.from(messages).indexOf(currentMessage);
    if (currentIndex == -1) {
      message = findFirstVisibleMessage();
      return findNextMessage(message, offset);
    }

    const nextIndex = currentIndex + offset;
    if (nextIndex >= 0 && nextIndex < messages.length) {
      return messages[nextIndex];;
    } else {
      return null;
    }
  }

  function findFirstVisibleMessage() {
    var messageList = document.querySelector(".bubbles-group");
    var messages = document.querySelectorAll(".bubble-content-wrapper");

    for (var i = 0; i < messages.length; i++) {
      var message = messages[i];
      var rect = message.getBoundingClientRect();
      if (rect.top >= 0 && rect.top < messageList.clientHeight) {
        return message;
      }
    }
    return null;
  }

})();```