vim keybindings to navigate social media (currently 9gag, new reddit). j to go down, k to go up, l to like, d to downvote.

vim-social-media.js

// ==UserScript==
// @name         Post Navigation with J, K, L, and D (Reddit & 9GAG)
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Use J and K keys to navigate, L to like, and D to downvote posts on Reddit (new layout) and 9GAG
// @match        https://www.reddit.com/*
// @match        https://9gag.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let currentIndex = 0;

    // Helper function to get all posts on the page depending on the site
    function getPosts() {
        if (window.location.hostname.includes("reddit.com")) {
            return document.querySelectorAll('shreddit-post');
        } else if (window.location.hostname.includes("9gag.com")) {
            return document.querySelectorAll('article');
        }
        return [];
    }

    // Function to scroll to a specific post
    function scrollToPost(index) {
        const posts = getPosts();

        // Make sure the index is within bounds
        if (index >= 0 && index < posts.length) {
            currentIndex = index;
            posts[currentIndex].scrollIntoView({ behavior: "smooth", block: "center" });

            // Optional: add a highlight effect to the selected post
            posts.forEach((post, i) => post.style.border = i === currentIndex ? "2px solid #FF4500" : "none");
        }
    }

    // Function to like the current post
    function likePost() {
        const posts = getPosts();
        const post = posts[currentIndex];
        if (post) {
            if (window.location.hostname.includes("9gag.com")) {
                const likeButton = post.querySelector('.upvote');
                if (likeButton) {
                    likeButton.click();
                }
            } else if (window.location.hostname.includes("reddit.com")) {
                // Modified selector to target the specific button structure for upvoting
                const upvoteButton = post.shadowRoot.querySelector('button[upvote]');
                if (upvoteButton) {
                    upvoteButton.click();
                }
            }
        }
    }

    // Function to downvote the current post
    function downvotePost() {
        const posts = getPosts();
        const post = posts[currentIndex];
        if (post) {
            if (window.location.hostname.includes("9gag.com")) {
                const downvoteButton = post.querySelector('.downvote');
                if (downvoteButton) {
                    downvoteButton.click();
                }
            } else if (window.location.hostname.includes("reddit.com")) {
                // Find the downvote button within the Reddit post
                const downvoteButton = post.shadowRoot.querySelector('button[downvote]');
                if (downvoteButton) {
                    downvoteButton.click();
                }
            }
        }
    }

    // Event listener for keydown
    document.addEventListener('keydown', (event) => {
        const posts = getPosts();

        if (event.key === 'j' || event.key === 'J') {
            // Move to the next post
            if (currentIndex < posts.length - 1) {
                scrollToPost(currentIndex + 1);
            }
        } else if (event.key === 'k' || event.key === 'K') {
            // Move to the previous post
            if (currentIndex > 0) {
                scrollToPost(currentIndex - 1);
            }
        } else if (event.key === 'l' || event.key === 'L') {
            // Like the current post
            likePost();
        } else if (event.key === 'd' || event.key === 'D') {
            // Downvote the current post
            downvotePost();
        }
    });

    // Initial scroll to the first post
    scrollToPost(currentIndex);
})();