feat(mdn-web-docs): 跟随网页更新，新增语言切换按钮

Author: sakura-flutter

src/scripts-header/mdn-web-docs.js

@@ -1,7 +1,7 @@
 module.exports = isProd =>
 `// ==UserScript==
 // @name         MDN 文档辅助
-// @version      1.0.0
+// @version      1.1.0
 // @description  在提供切换中文语言的页面自动切换为中文
 // @author       sakura-flutter
 // @namespace    https://github.com/sakura-flutter/tampermonkey-scripts

src/scripts/mdn-web-docs/index.js

@@ -1,6 +1,11 @@
 import { $ } from '@/utils/selector'
 import { warn } from '@/utils/log'
 
+const docsLang = matchLang(location.pathname)
+const supports = getSupports()
+warn(docsLang)
+warn(supports)
+
 function main() {
   window.addEventListener('click', event => {
     // 标记是否自行切换语言
@@ -9,19 +14,52 @@ function main() {
     }
   }, true)
 
-  const docsLang = matchLang(location.pathname)
-  warn(docsLang)
+  changeLang()
+  addLangButton()
+}
+
+function changeLang() {
   if (isChinese(docsLang)) return
   // 是否自行切换过语言
   if (sessionStorage.getItem('hand-control-language') === 'true') return
 
-  const supports = getSupports()
-  warn(supports)
   for (const item of supports) {
     isChinese(matchLang(item)) && location.replace(item)
   }
 }
 
+function addLangButton() {
+  const values = [] // 中英 排序
+  for (const item of supports) {
+    const lang = matchLang(item)
+    if (isChinese(lang)) {
+      values[0] = item
+    } else if (isEnglish(lang)) {
+      values[1] = item
+    }
+  }
+  warn(values)
+  if (values.length < 2) return
+
+  const a = document.createElement('a')
+  a.innerText = '中-英'
+  a.href = isChinese(docsLang) ? values[1] : values[0]
+  a.classList.add('button')
+  a.style = [
+    'position: fixed',
+    'right: 0',
+    'bottom: 15vh',
+    'min-height: auto',
+    'padding: 0px 2px',
+    'font-size: 12px',
+    'letter-spacing: 2px',
+  ].join(';')
+  a.onclick = function() {
+    sessionStorage.setItem('hand-control-language', true)
+  }
+  document.body.append(a)
+}
+
 function matchLang(str) {
   // 匹配 pathname 或字符串
   // /en-US/docs/Web/API/ 或 en-us
@@ -32,8 +70,12 @@ function isChinese(lang) {
   return /zh-cn/i.test(lang)
 }
 
+function isEnglish(lang) {
+  return /en-US/i.test(lang)
+}
+
 function getSupports() {
-  return [...$('#select_language').options].map(opt => opt.value)
+  return [...$('#language-selector').options].map(opt => opt.value)
 }
 
 main()