Greasy Fork is available in English.

为 Eslint 在线运行添加修复按钮

为 ESLint 在线运行（中英文官网）添加修复按钮

// ==UserScript==
// @name         为 Eslint 在线运行添加修复按钮
// @license      GPL-3.0 License
// @namespace    https://github.com/QIUZAIYOU/AddFixButtonToESLintOnlinePlayground/tree/main
// @version      0.3
// @description  为 ESLint 在线运行（中英文官网）添加修复按钮
// @author       QIAN
// @match        https://eslint.nodejs.cn/play/
// @match        https://eslint.org/play/
// @icon         https://eslint.nodejs.cn/favicon.ico
// @grant        none
// ==/UserScript==

(function () {
  'use strict'
  const documentLangIsChinese = () => {
    const lang = document.documentElement.lang
    return lang === 'zh-CN'
  }
  const isChinese = documentLangIsChinese()
  const addButtonToConfigOptions = () => {
    const button = document.createElement('button')
    const cssCode = '#handleFixButton{width:calc(100% - 20px);height:60px;background:#4b32c3;color:#fff;margin:10px;box-sizing:border-box;border-radius:4px;font-size:20px;}#handleFixButton.disabled{opacity:0.6;cursor:not-allowed;}#problems{display:flex;gap:20px;align-items:center;justify-content:space-between;width:calc(100% - 20px);margin: 10px;box-sizing:border-box;border:1px solid #667085;padding:10px;color:#D0D5DD;border-radius:4px;}#problems>span{width:100%;text-align:center;}#problems>em{display:block;width:1px;height:20px;background:#667085;}'
    const styleElement = document.createElement('style')
    styleElement.textContent = cssCode
    button.textContent = isChinese ? '修复' : 'Fix'
    button.id = 'handleFixButton'
    const problems = document.createElement('div')
    problems.id = 'problems'
    problems.innerHTML = `<span id="total">${isChinese ? '待修复：' : 'issues: '}0</span><em></em><span id="solved">${isChinese ? '已修复：' : 'fixed: '}0</span>`
    const configOptions = document.querySelector('.playground__config-options__sections')
    if (configOptions.firstChild) {
      configOptions.insertBefore(button, configOptions.firstChild)
      configOptions.insertBefore(problems, configOptions.firstChild)
      configOptions.insertBefore(styleElement, configOptions.firstChild)
    } else {
      configOptions.appendChild(button)
      configOptions.appendChild(problems)
      configOptions.appendChild(styleElement)
    }
  }
  const handleFix = () => {
    let times = 0
    refreshProblemsData()
    handleFixButton.addEventListener('click', function () {
      const problemsTotal = refreshProblemsData()
      handleFixButton.disabled = true
      handleFixButton.classList.add('disabled')
      const setIntervalID = setInterval(function () {
        if (times < problemsTotal) {
          const fixButton = document.querySelector('button.alert__fix-btn')
          fixButton.click()
          times++
          document.querySelector('#solved').textContent = `${isChinese ? '已修复：' : 'fixed: '}${times}`
          console.log(isChinese ? '已修复' : 'fixed')
        } else {
          clearInterval(setIntervalID)
          alert(isChinese ? '修复完毕！' : 'complate!')
          handleFixButton.disabled = false
          handleFixButton.classList.remove('disabled')
        }
      }, 100)
    })
  }
  const refreshProblemsData = () => {
    const fixButtons = document.querySelectorAll('button.alert__fix-btn')
    document.querySelector('#total').textContent = `${isChinese ? '待修复：' : 'issues: '}${fixButtons.length}`
    return fixButtons.length
  }

  addButtonToConfigOptions()
  handleFix()
})()