search_with_gyazo.user.js

// ==UserScript==
// @grant        GM_xmlhttpRequest
// @name         Search with Gyazo
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  try to take over the world!
// @author       You
// @match        https://scrapbox.io/*
// ==/UserScript==

const GM_get = (url)=>{
  return new Promise((r)=>{
    const method = "GET";
    const onload = (res)=> r(JSON.parse(res.responseText));
    GM_xmlhttpRequest({ method, url, onload });
  });
}

(function() {
  'use strict';

  const searchArticleAndAppend = async ({image_id, thumb_url}, urls)=>{
    const prj = location.pathname.split("/")[1];
    const url = `https://scrapbox.io/api/pages/${prj}/search/query?skip=0&sort=updated&limit=30&q=${image_id}`;
    const data = await (await fetch(url)).json();
    if(data.pages.length > 0){
      data.pages.forEach((page)=>{
        if(urls.indexOf(page.title) > -1) return true;
        urls.push(page.title)
        const li = jQuery(`
          <li class="page-list-item list-style-item">
            <a href="/${prj}/${encodeURIComponent(page.title)}" rel="route">
              <div class="icon">
                <img loading="lazy" src="${thumb_url}">
              </div>
              <div class="content">
                <div class="title-with-description">${page.title}</div>
                <div class="description"><span>${page.descriptions[0]}</span>
              </div>
              </div>
            </a>
          </li>
        `);
        jQuery('#searchWithGyazo').append(li);
      })
    }
  }

  const search = async ()=>{
    const query = decodeURIComponent(location.search.replace("?q=", ""))
    const url = `https://gyazo.com/api/internal/search_result?page=1&per=40&query=${encodeURIComponent(query)}`;
    const data = await GM_get(url);
    const urls = [];
    data.captures.forEach(cap => searchArticleAndAppend(cap, urls))
    jQuery('#gyazobutton').remove();
  }

  const main = ()=>{
    if(location.href.match(/search\/page/)){
      const element = jQuery('<div id="addiction" class="project-search">');
      element.append('<div class="project-search-count">Search with Gyazo</div>')
      const formDiv = jQuery('<div class="text-center"></div>')
      const button = jQuery('<button id="gyazobutton" type="submit" class="project-search-button btn btn-auto-block btn-default">Search with Gyazo</button>')
      button.click(search);
      formDiv.append(button)
      element.append(formDiv)
      element.append('<ul class="list" id="searchWithGyazo" style="padding-bottom: 15px"></ul>')
      jQuery('.project-search').before(element);
    }
  }

  // ページ遷移を雑にループで検知
  const loop = (href)=>{
    setTimeout(()=>{
      if(location.href !== href){ 
        document.querySelectorAll('#addiction').forEach(n => n.remove());
        initialize();
      }
      loop(location.href);
    }, 200);
  };
  loop(location.href);

  // 読み込み完了を待つ
  const initialize = ()=>{
    if(document.querySelector('.project-home')){
      main();
    } else {
      setTimeout(initialize, 500);
    }
  }
  initialize();
})();