Qiitaのユーザーページにナビゲーションタブを追加するUserScript

script.js

// ==UserScript==
// @name         Qiita User Page Nav
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds an navigation tab on user pages
// @author       righteous
// @match        https://qiita.com/*
// @grant        none
// ==/UserScript==

!(function () {
  const targetClassPrefixes = [
    'UserMain__ContentsContainer',
    'UserLgtms__ContentsContainer',
    'UserFollowees__ContentsContainer',
    'UserComments__ContentsContainer',
    'UserEditRequests__ContentsContainer',
  ]

  const selector = targetClassPrefixes.map(c => `[class^="${c}"],[class*=" ${c}"]`).join(',')
  const containerDOM = document.querySelector(selector)
  if (!containerDOM) return

  const [username, curPage = ''] = window.location.pathname.split('/').filter(s => s)
  if (!username) return

  const pages = [
    { path: '', label: 'マイページ' },
    { path: 'lgtms', label: 'LGTM記事' },
    { path: 'following_users', label: 'フォロー' },
    { path: 'comments', label: 'コメント' },
    { path: 'edit_requests', label: '編集リク' },
  ]

  const nav = document.createElement('div')
  nav.classList.add('qiita-user-page-nav')

  for (const page of pages) {
    const linkDOM = document.createElement('a')
    linkDOM.classList.add('ol-ItemList_tabItem')
    if (curPage === page.path) {
      linkDOM.classList.add('is-active')
    }
    linkDOM.textContent = page.label
    linkDOM.href = `/${username}/${page.path}`
    nav.appendChild(linkDOM)
  }
  containerDOM.insertBefore(nav, containerDOM.firstChild)

  const styleDOM = document.createElement('style')
  styleDOM.textContent = `
  .qiita-user-page-nav {
    background-color: white;
    display: flex;
    padding-top: 15px;
    margin-bottom: 10px;
  }

  @media (max-width: 770px) {
    .qiita-user-page-nav .ol-ItemList_tabItem {
      font-size: 8px;
    }
  }
  `
  document.head.appendChild(styleDOM)
})()