Qiitaの左側メニューにリンクを追加するユーザースクリプト

13150 ワード
userscript JavaScript tampermonkey Qiita Qiita テキストリンク

スクリーンショット

ちょっとスカスカな気がしたので

詰め込んでみた。

結果、ものすごくダサくなった。
3つの方がイケテル感はあるなあと悪くしてから思った。

動作環境

  • Firefox 59
  • Tampermonkey v4.6

Chromeでも使えるようにTampermonkeyを導入してみたが、タグフォロワーはGreasemonkeyの方が多いんですよね。
誤差程度だけど。

コード

qiita-add-links.user.js
// ==UserScript==
// @name     Qiita add links
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description 左側の空きスペースによく使うリンクを追加する
// @author       khsk
// @include     https://qiita.com/
// @include     https://qiita.com/trend
// @include     https://qiita.com/timeline
// @include     https://qiita.com/tag-feed
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const DEFAULT_MENU_NUMBER = 3; /* メニュー数が増減したら修正 */

    // iconはfont awesomeのクラス名
    const links = [
        {
            label: '自分の投稿',
            url:'https://qiita.com/search?q=user%3Akhsk&sort=created',
            icon:'user',
        },
        {
            label: '下書き',
            url:'https://qiita.com/drafts/',
            icon:'edit',
        },
        {
            label: '通知一覧を見る',
            url:'https://qiita.com/notifications',
            icon:'bell', /* 実際の新規通知数を設定できればいいのに */
        },
        {
            label: 'Qaleidospace',
            url:'http://qaleido.space/',
            icon:'line-chart',
        },
        {
            label: 'デイリーストックランキング',
            url:'https://qiita.com/takeharu/items/bb154a4bc198fb102ff3',
            icon:'line-chart',
        },
        {
            label: 'Qiitadon',
            url:'https://qiitadon.com/about',
            icon:'comments',
        },
        {
            label: '話題のツイート',
            url:'https://twitter.com/search?l=&q=Qiita&src=typd&lang=ja',
            icon:'twitter',
        },
        {
            label: '全ての投稿', /* フッターにあるけどいつも忘れるので */
            url:'https://qiita.com/items',
            icon:'list',
        },
    ];

    const addLink = ({label, url, icon = null}, menu) => {
        const newLink = template.cloneNode(true);
        newLink.lastChild.textContent = label;
        newLink.firstChild.className = icon ? 'fa fa-fw fa-' + icon + ' mr-1of2' : newLink.firstChild.className;
        newLink.href = url;
        // 新規タブで開くほうがいいかも
        menu.appendChild(newLink);
    };

    // 初回表示適用
    const menu = document.querySelector('div.p-home_container > div.p-home_menu');
    const template = menu.querySelector('a:not(.p-home_menuItem-active)');
    if (menu.children.length == DEFAULT_MENU_NUMBER) {
        links.forEach( link => addLink(link, menu));
    }

    const mo = new MutationObserver(() => {
        const menu = document.querySelector('div.p-home_container > div.p-home_menu');
        if (menu.children.length == DEFAULT_MENU_NUMBER) {
            links.forEach( link => addLink(link, menu));
        }
    });

    const root = document.querySelector('div');
    const options = {childList: true, subtree:true};
    mo.observe(root, options);
})();

主目的は自分の投稿検索と下書きへのアクセスが悪かったのを改善したかった。
ついでにあれこれ便利そうなものも追加した。

雑記

QiitaのHTML構造変わりすぎて辛い。
ちょっと前まで監視するDOMは#appRootで良かったのに、気づいたら変わっててだんだん何が起きているのかわからなくなってきた。
そのうち監視対象をhtmlにするぐらい投げ出すかも知れない。

でも、こうやって変化を見ていると影でちゃんと働いているんだなあと気づくこともできる。(失礼)