Taiki Sato

GoogleとScrapboxを同時検索するChrome拡張が壊れているので作りたい

#idea

開発メモ

2023-01-29 s 着手

要件整理:

  • Google検索の結果ページのサイドバーに、そのクエリをScrapboxに投げたときの検索結果も表示したい
    • 検索クエリを取得
    • 取得したクエリで設定したScrapboxプロジェクトを検索
      • API例: /scrapboxlab/api/pages/:projectname/search/query
    • 検索結果をGoogle検索結果のサイドバーに表示
    • スタイリング

実装ステップ (JavaScriptでstep-by-step実装):

  1. ✅ 検索クエリを取得
  2. 取得した検索クエリでScrapbox検索を実行

作りかけ（動作しないPrototype）

userscript.js サンプル

// ==UserScript==
// @name        Scrapbox Enhancer for Google Search
// @namespace   https://scrapbox.io
// @version     0.1
// @description Enhance your Google search results by seamlessly integrating relevant Scrapbox pages into your search results page.
// @author      satoooh
// @match       https://www.google.com/search?q=*
// @icon        https://www.google.com/s2/favicons?sz=64&domain=self-development.info
// @grant       none
// @license     MIT
// ==/UserScript==

(function () {
  "use strict";

  // 検索クエリを取得
  const searchQuery = new URL(window.location.href).searchParams.get("q");
  console.log("searchQuery =", searchQuery);

  // scrapbox 内を検索
  function searchScrapbox(query, projectName) {
    const url = `https://scrapbox.io/api/pages/${projectName}/search/query?q=${query}`;
    console.log("url =", url);
    const res = new Promise((resolve, reject) => {
      fetch(url)
        .then((response) => {
          if (!response.ok) {
            throw new Error(
              `Failed to search Scrapbox: ${response.statusText}`
            );
          }
          return response.json();
        })
        .then((json) => json.projects)
        .then(resolve)
        .catch(reject);
    });
    return res;
  }
  console.log(searchScrapbox(searchQuery, "satoooh"));
})();

2023-02-07

140 pages