esa on Google

show esa search result on google search

Verzia zo dňa 21.02.2021. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name         esa on Google
// @namespace    https://github.com/matzkoh
// @version      1.0.2
// @description  show esa search result on google search
// @author       matzkoh
// @include      https://www.google.tld/search?*
// @grant        GM_xmlhttpRequest
// @grant        GM_getValue
// @grant        GM_setValue
// @connect      api.esa.io
// ==/UserScript==

;(function () {
  // ASSET: index.js
  var $Focm$exports = function () {
    var exports = this
    var module = {
      exports: this,
    }

    const queryString = new URL(location).searchParams.get('q')

    if (!queryString) {
      return module.exports
    }

    const container = document.querySelector('#rhs') ?? document.querySelector('#center_col')
    const content = document.createElement('div')
    content.className = container.id === 'rhs' ? '' : 'eog-floating-right'
    content.innerHTML = `
  <style>
    .eog-floating-right { position: absolute; left: 105%; top: 0; width: 400px; }
    .eog-mx-1 { margin-left: 0.5rem; margin-right: 0.5rem; }
    .eog-my-1 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .eog-mt-1 { margin-top: 0.5rem; }
    .eog-mb-2 { margin-bottom: 1rem; }
    .eog-mr-1 { margin-right: 0.5rem; }
    .eog-flex { display: flex; }
    .eog-row { flex-direction: row; }
    .eog-column { flex-direction: column; }
    .eog-spacer { flex-grow: 1; }
    .eog-pre { white-space: pre-wrap; }
    .eog-weak { opacity: 0.5; }
    .eog-hidden { display: none; }
    .eog-no-post:not(:only-child) { display: none; }
    .eog-post-author-icon { width: 3rem; height: 3rem; border-radius: 50%; }
    .eog-post-updater-icon { width: 1.5rem; height: 1.5rem; border-radius: 50%; align-self: flex-end; }
    .eog-post-wip, .eog-post-name { font-size: 1.25rem; }
    .eog-post-body { word-break: break-word; }
  </style>
  <div class="eog-posts">
    <div class="eog-no-post eog-my-1"></div>
  </div>
  <div class="eog-flex">
    <div class="eog-spacer"></div>
    <button class="eog-btn-token">esa トークン 登録/変更</button>
  </div>
`
    content.querySelector('.eog-no-post').textContent = `${queryString} にマッチする esa 記事は見つかりませんでした`
    content.querySelector('.eog-btn-token').addEventListener('click', () => {
      const token = prompt('/user/applications で発行した Personal access token', '')

      if (token?.length) {
        GM_setValue('esa_token', token)
        location.reload()
      }
    })
    container.appendChild(content)
    GM_xmlhttpRequest({
      method: 'get',
      url: `https://api.esa.io/v1/teams/opt-technologies/posts?sort=best_match&per_page=10&q=${queryString}`,
      headers: {
        Authorization: `Bearer ${GM_getValue('esa_token')}`,
      },
      responseType: 'json',
      onerror: renderError,

      onload(res) {
        if (200 <= res.status && res.status < 300) {
          renderContent(res.response)
        } else {
          renderError(res.response)
        }
      },
    })

    function renderError(error) {
      const el = document.createElement('div')
      el.className = 'eog-pre'
      el.textContent = `検索に失敗しました:\n${JSON.stringify(error, null, 2)}`
      content.appendChild(el)
    }

    function renderContent(data) {
      const postContainer = content.querySelector('.eog-posts')
      data.posts.forEach(post => {
        const el = document.createElement('div')
        el.className = 'eog-flex eog-post eog-mb-2'
        el.innerHTML = `
      <div class="eog-flex eog-column eog-mr-1">
        <a href="${new URL(`/members/${post.created_by.screen_name}`, post.url)}" class="eog-flex eog-column">
          <img class="eog-post-author-icon eog-flex">
        </a>
        <a href="${new URL(`/members/${post.updated_by.screen_name}`, post.url)}" class="eog-flex eog-column">
          <img class="eog-post-updater-icon eog-flex">
        </a>
      </div>
      <div class="eog-flex eog-column">
        <div class="eog-flex">
          <div class="eog-post-category eog-weak eog-mr-1"></div>
          <div class="eog-post-tags eog-weak"></div>
        </div>
        <div class="eog-my-1">
          <span class="eog-post-wip eog-weak mr-1">WIP</span>
          <a class="eog-post-name"></a>
        </div>
        <div class="eog-flex">
          <div>
            ⭐<span class="eog-post-stargazers-count"></span>
            <span class="eog-weak">/</span>
            👁<span class="eog-post-watchers-count"></span>
            <span class="eog-weak">/</span>
            💬<span class="eog-post-comments-count"></span>
          </div>
          <div class="eog-spacer"></div>
          <div class="eog-post-updated"></div>
        </div>
        <div class="eog-post-body eog-mt-1"></div>
      </div>
    `
        const date = new Date(1 < post.revision_number ? post.updated_at : post.created_at).toLocaleString()
        const isSameUpdater = post.created_by.screen_name === post.updated_by.screen_name
        el.querySelector('.eog-post-author-icon').src = post.created_by.icon
        el.querySelector('.eog-post-author-icon').title = `${post.created_by.screen_name}\n${post.created_by.name}`
        el.querySelector('.eog-post-updater-icon').src = post.updated_by.icon
        el.querySelector('.eog-post-updater-icon').title = `${post.updated_by.screen_name}\n${post.updated_by.name}`
        el.querySelector('.eog-post-updater-icon').classList.toggle('eog-hidden', isSameUpdater)
        el.querySelector('.eog-post-category').textContent = post.category?.replace(/\//g, ' $& ') || ''
        el.querySelector('.eog-post-tags').textContent = post.tags.map(t => `#${t}`).join(' ')
        el.querySelector('.eog-post-wip').classList.toggle('eog-hidden', !post.wip)
        el.querySelector('.eog-post-name').href = post.url
        el.querySelector('.eog-post-name').textContent = post.name
        el.querySelector('.eog-post-stargazers-count').textContent = post.stargazers_count
        el.querySelector('.eog-post-watchers-count').textContent = post.watchers_count
        el.querySelector('.eog-post-comments-count').textContent = post.comments_count
        el.querySelector('.eog-post-updated').textContent = `${1 < post.revision_number ? '更新' : '公開'}:${date}`
        el.querySelector('.eog-post-body').textContent = post.body_md.replace(/^#+\s*|```/gm, '').slice(0, 200)
        postContainer.appendChild(el)
      })
    }

    return module.exports
  }.call({})

  if (typeof exports === 'object' && typeof module !== 'undefined') {
    // CommonJS
    module.exports = $Focm$exports
  } else if (typeof define === 'function' && define.amd) {
    // RequireJS
    define(function () {
      return $Focm$exports
    })
  }
})()