20240427 redditの右側を隠す

redditの右側が邪魔

「改善前」の右側にある囲っている部分が邪魔なので、消すことにしました

改善前	改善後

TemperMonkeyを試す

TemperMonkeyというChrome拡張でなんとかなるんじゃないか、と思っていた
他の人も同じようなことを考えているはずなので、きっとすでにあるのでは？と探してみたけどreddit関連のスクリプトはものすごいたくさんあってここから目当てのものを探すのは無理と判断した

しかたない自分で書こう

右側の部分の要素はこれ

<div id="right-sidebar-container" data-scroll-restore="" class="right-sidebar w-full xs:w-[316px] xs:min-w-[316px] block styled-scrollbars xs:sticky xs:top-[56px] xs:max-h-[calc(100vh-var(--shreddit-header-height)-1px)] xs:overflow-y-auto xs:overflow-x-hidden">

左側はこれ

<main class="main w-full flex-grid--main-container-card right-sidebar-xs" id="main-content">

右側はstyle="display:none;"を追加、左側はclassに入っているright-sidebar-xsを消すといい感じになる

で、いちおうできたのがこれ ↓

クリックすると開く

// ==UserScript==
// @name         Delete Right-Sidebar and expand Main
// @namespace    http://tampermonkey.net/
// @version      2024-04-27
// @description  try to take over the world!
// @author       You
// @match        https://www.reddit.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// ==/UserScript==

const ON_GOING = 1;
const DONE = 0;
const WAIT = 1000;

function timer(ms) { return new Promise(res => setTimeout(res, ms)); }
const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );

let removeElementClass = async (selector, class_name) => {
    let obj = null;
    var counter = 0;
    while(!obj) {
        obj = await new Promise(resolve=>setTimeout(()=>resolve(document.querySelector(selector), 100)));
        counter++;
        if (1000 < counter) return DONE;
        if (obj) {
            obj.classList.remove(class_name);
            return DONE;
        }
    }

    return ON_GOING;
}

async function taskRemoveClass() {
  await timer(1000);
  return removeElementClass('main#main-content', 'right-sidebar-xs')
}

let hideElement = async (selector) => {
    let obj = null;
    var counter = 0;
    while(!obj) {
        obj = await new Promise(resolve=>setTimeout(()=>resolve(document.querySelector(selector), 100)));
        counter++;
        if (1000 < counter) return DONE;
        if (obj) {
            obj.style.display = 'none';
            return DONE;
        }
    }

    return ON_GOING;
}

async function taskHide() {
  await timer(1000);
  return hideElement('div#right-sidebar-container');
}

async function main() {
  console.log('main');
  while(true) {
      var ret = ON_GOING;
      while(ret == ON_GOING) {
          ret = await taskHide();
      }
      ret = ON_GOING;
      while(ret == ON_GOING) {
          ret = await taskRemoveClass();
      }
      await sleep(500);
  }
}

(function() {
  main();
})();

参考：

• 個人的GreaseMonkey頻用パタン #JavaScript - Qiita

なんか複雑になってしまったし無限ループがあるけど、これで動くことは動く
なんで無限ループしてるか、というと、redditは画面遷移が発生しない作りなのか、何かをクリックして違う画面に行っても、スクリプトが起動されない
なのでループを永遠に回している
とても悪い感じがする

Stylusを使う

調べていたらStylusというCSSを書き換えるのを見つけた
これだとたったこれだけです

main.right-sidebar-xs {
    max-width: 100% !important;
}

main.right-sidebar-s {
    max-width: 100% !important;
}

div#right-sidebar-container {
    display: none !important;
}