Wikipedia Title with Chinese Translation

wikipedia-title-with-chinese-translation.user.js

// ==UserScript==
// @name         Wikipedia Title with Chinese Translation
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Wikipedia Title with Chinese Translation
// @author       ngseke
// @match        https://en.wikipedia.org/wiki/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=wikipedia.org
// @grant        none
// ==/UserScript==

(async () => {
  const rawDocument = new DOMParser()
    .parseFromString(document.documentElement.outerHTML, 'text/html')
  const $ = (...args) => rawDocument.querySelector(...args)

  const getChinesePage = () => {
    const element = $('.interlanguage-link-target[lang=zh]')
    if (!element) return null
    const { title, href } = element
    const name = title.replace('– Chinese', '').trim()
    return { name, href }
  }

  const renderChineseElement = (content, link) => {
    const a = document.createElement('a')
    a.innerText = content
    a.href = link
    Object.assign(a.style, {
      borderRadius: '8px',
      fontSize: '14px',
      marginLeft: '6px',
      padding: '3px 6px',
      opacity: 0.9,
      fontWeight: 600,
      fontFamily: 'sans-serif',
      color: '#1E1E1E',
      background: '#EBEBEB',
    })
    return a
  }

  const appendElementAfterHeading = (element) => {
    const heading = document.querySelector('#firstHeading')
    heading.appendChild(element)
  }

  const page = getChinesePage()
  if (page) {
    const element = renderChineseElement(page.name, page.href)
    appendElementAfterHeading(element)
  }
})()