GoogleとScrapboxを同時検索するChrome拡張が壊れているので作りたい
とりあえず要件を整理してみる
Google検索の結果ページサイドバーに、そのクエリをScrapboxに投げたときの検索結果も表示したい
検索クエリを取得
検索クエリで、設定した Scrapbox project を検索
検索結果をGoogle検索結果のサイドバーに表示
スタイリング
これを JavaScript で step-by-step で実装してみよう
✅ step1. 検索クエリを取得
code: content.js
const searchQuery = new URL(window.location.href).searchParams.get("q");
✅ step2. 取得した検索クエリで scrapbox 検索を実行
検索できないなと思ったら、Chrome拡張で google.com ドメインから検索しようとするとCORS引っかかるらしい ダメでした
JS側の解決策なさそう（わからない）のでpend
taikisato.icon わかった
background に隠せば cors は回避できるらしい（なんでかわからん）
これ参考にしたら取得できた
なんとかできた
所要時間10時間くらい
作りかけ（うごかない）
code: userscript.js
// ==UserScript==
// @name Scrapbox Enhancer for Google Search
// @version 0.1
// @description Enhance your Google search results by seamlessly integrating relevant Scrapbox pages into your search results page.
// @author satoooh
// @grant none
// @license MIT
// ==/UserScript==
(function () {
"use strict";
// Your code here...
// 検索クエリを取得
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
アドバイス助かる
2023/02/23