Fediverse Hashflags

X(Twitter)のHashflags(Hashmojis)をMisskey, Mastodon, Bluesky, TOKIMEKIで表示

// ==UserScript==
// @name         Fediverse Hashflags
// @namespace    https://midra.me/
// @version      2.1.1
// @description  X(Twitter)のHashflags(Hashmojis)をMisskey, Mastodon, Bluesky, TOKIMEKIで表示
// @author       Midra
// @license      MIT
// @match        https://*/*
// @icon         https://hashmojis.com/favicon.ico
// @run-at       document-end
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

// @ts-check

/**
 * @typedef TwitterHashflag
 * @property {string}  hashtag
 * @property {string}  asset_url
 * @property {number}  starting_timestamp_ms
 * @property {number}  ending_timestamp_ms
 * @property {boolean} is_hashfetti_enabled
 */

void (async () => {
  'use strict'

  const HASHFLAGS_UPDATE_INTERVAL = 2 * 60 * 60 * 1000

  const service = {
    twitter:
      location.href.startsWith('https://twitter.com/') ||
      location.href.startsWith('https://x.com/'),
    misskey:
      document
        .querySelector('meta[name="application-name"]')
        ?.getAttribute('content') === 'Misskey',
    mastodon:
      document.querySelector(
        '#mastodon, #mastodon-svg-logo, #mastodon-svg-logo-full'
      ) !== null,
    // bluesky: location.href.startsWith('https://bsky.app/'),
    tokimeki:
      location.href.startsWith('https://tokimeki.blue/') ||
      location.href.startsWith('https://tokimekibluesky.vercel.app/'),
  }

  if (!Object.values(service).some((v) => v)) return

  /** @type {TwitterHashflag[]} */
  const hashflags = GM_getValue('hashflags', [])
  /** @type {TwitterHashflag[]} */
  const activeHashflags = hashflags
    .filter((v) => Date.now() < v.ending_timestamp_ms)
    .map((v) => ((v.hashtag = v.hashtag.toLowerCase()), v))
  const activeHashtags = activeHashflags.map((v) => v.hashtag)

  /**
   * @param {string} [hashtag]
   * @returns {TwitterHashflag | undefined}
   */
  const getHashflag = (hashtag) => {
    if (!hashtag) return

    const hashflag =
      activeHashflags[activeHashtags.indexOf(hashtag.toLowerCase())]

    if (
      hashflag &&
      hashflag.starting_timestamp_ms <= Date.now() &&
      Date.now() < hashflag.ending_timestamp_ms
    ) {
      return hashflag
    }
  }

  /**
   * @param {Element} target
   */
  const addHashflags = (target) => {
    if (activeHashflags.length === 0) return

    /** @type {NodeListOf<HTMLAnchorElement>} */
    const hashtags = target.querySelectorAll(
      'a[href*="/tags/"], a[href^="/search?q="]'
    )

    for (const tag of hashtags) {
      const tagUrl = new URL(tag.href)

      if (
        !tag.classList.contains('twitter-hashflag-wrap') &&
        ((service.tokimeki && tagUrl.pathname === '/search') ||
          tagUrl.pathname.startsWith('/tags/'))
      ) {
        const text = tag.textContent
        if (!text?.startsWith('#')) continue

        const hashflag = getHashflag(text.substring(1))
        if (hashflag) {
          const img = document.createElement('img')
          img.classList.add('twitter-hashflag')
          img.src = hashflag.asset_url
          tag.appendChild(img)
          tag.classList.add('twitter-hashflag-wrap')
        }
      }
    }
  }

  // /**
  //  * @param {Element} target
  //  */
  // const removeHashflags = (target) => {
  //   for (const elm of target.getElementsByClassName('twitter-hashflag')) {
  //     elm.remove()
  //   }
  //   for (const elm of target.getElementsByClassName('twitter-hashflag-wrap')) {
  //     elm.classList.remove('twitter-hashflag-wrap')
  //   }
  // }

  // Twitter (Hashflagsの取得・保存)
  if (service.twitter) {
    console.log('[Fediverse Hashflags] Twitter')

    const lastUpdated = GM_getValue('hashflags_lastupdated', 0)
    if (HASHFLAGS_UPDATE_INTERVAL < Date.now() - lastUpdated) {
      try {
        const res = await fetch('https://twitter.com/i/api/1.1/hashflags.json')
        /** @type {TwitterHashflag[]} */
        const json = await res.json()

        if (json && 0 < json.length) {
          GM_setValue('hashflags', json)
          GM_setValue('hashflags_lastupdated', Date.now())

          console.log('[Fediverse Hashflags] Hashflagsを保存しました')
        }
      } catch (e) {
        console.error('[Fediverse Hashflags]', e)
      }
    }
  } else {
    if (service.misskey) console.log('[Fediverse Hashflags] Misskey')
    if (service.mastodon) console.log('[Fediverse Hashflags] Mastodon')
    // if (service.bluesky) console.log('[Fediverse Hashflags] Bluesky')
    if (service.tokimeki)
      console.log('[Fediverse Hashflags] TOKIMEKI (Bluesky)')

    addHashflags(document.body)

    /** @type {MutationObserverInit} */
    const obs_options = {
      childList: true,
      subtree: true,
    }
    const obs = new MutationObserver((mutations) => {
      obs.disconnect()

      for (const mutation of mutations) {
        if (!(mutation.target instanceof HTMLElement)) continue

        if (0 < mutation.addedNodes.length) {
          addHashflags(mutation.target)
        }
      }

      obs.observe(document.body, obs_options)
    })

    obs.observe(document.body, obs_options)

    // style
    GM_addStyle(`
    .twitter-hashflag-wrap {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.2em;
    }
    .twitter-hashflag {
      height: 1.2em;
    }
    `)
  }
})()