サイト内検索をするブックマークレット作成の覚え書き

特定のサイト内を検索するブックマークレットの覚え書きです。

Googleのサイト内検索コマンド、

site:検索対象のサイト 検索ワードを行うブックマークレット。

当初promptで作成。

(function () {
  const hostname = location.hostname;
  const text = window.prompt(hostname + "内を検索");
  const space = "\u00A0";
  const url =
    "https://www.google.com/search?hl=ja&q=site:" +
    hostname +
    space +
    encodeURIComponent(text);

  window.open(url, "_blank");
})();

open()が原因でブラウザのポップアップブロックが発生するためpromptでの作成を断念。

Window.open() - Web API | MDN

他にもユーザー入力には <dialog> 要素を使用することができます。

Window.prompt() - Web API | MDN

とのことなので、dialog要素で作成。

概要

テンプレートリテラルで記述した<style>や<dialog>をhtml変換してbodyに挿入する。

ブログカード（カード型リンク）を作成するブックマークレットでやった手法を踏襲した。

既知の不具合

ダイアログのデザインはサイトのCSSが継承されると崩れる。

不足しているセレクターを補うか、優先度を上げることで対応。

条件分岐

文字列を選択しているかどうかを判定。

選択していなければdialog();

選択していればselectionString();

if (window.getSelection().toString() == "") {
  dialog();
} else {
  selectionString();
}

検索を実行する関数

location.hostnameで現在開いているURLのホスト名を取得。

location.hostname - Web API | MDN

ホスト名と検索ワードは"+"で連結した。※

検索に支障のある特定の文字をencodeURIComponent()でエンコード

encodeURIComponent() - JavaScript | MDN

function search(text) {
  const hostname = location.hostname;
  const url =
    "https://www.google.com/search?hl=ja&q=site:" +
    hostname +
    "+" +
    encodeURIComponent(text);

  window.open(url, "_blank");
}

※半角スペースで連結する場合。

ブックマークレット作成サイトでは半角スペースが削除されるので、プログラム上で半角スペースを" "とできなかった。

ブックマークレットに変換したあとで修正することもできるが、面倒なので半角スペースのCode Point\u{0020}で半角スペースを明示した。

また、文字列リテラル中にはUnicodeエスケープシーケンスで、直接Code Pointを書くこともできます。 Code Pointは\u{Code Pointの16進数の値}のようにエスケープシーケンスとして記述できます。

文字列とUnicode · JavaScript Primer #jsprimer

JavaScript   なスペースのあるHTMLの扱い - かもメモ

半角スペースをつかったタイプは以下。

function search(text) {
  const hostname = location.hostname;
  const space = "\u{0020}";
  const url =
    "https://www.google.com/search?hl=ja&q=site:" +
    hostname +
    space +
    encodeURIComponent(text);

  window.open(url, "_blank");
}

選択文字列を取得する関数

選択文字列をwindow.getSelection()で取得

Javascript で選択されている文字列を取得するテスト。 getSelection メソッド使用。 – pulogu.net

forで繰り返し処理※、window.getSelection()の数はrangeCountで取得。

※Firefoxは複数の文字列を選択可能なのでand検索ができる。

最後の+記号をreplace(/\+$/, "")で削除。

引数を渡してsearch関数を実行。

function selectionString() {
  /** @type {string} */
  let text = "";
  /** @type {object} */
  const selectionString = window.getSelection();
  for (let index = 0; index < selectionString.rangeCount; index++) {
    text += selectionString.getRangeAt([index]).toString() + "+";
  }
  text = text.replace(/.$/, "");
  search(text);
}

選択文字列の連結に+をつかった。

Google search: 演算子によって検索結果が微妙に違ってくる。 - GGCS ごたごた気流調査所

選択文字列の連結に半角スペースをつかったタイプは以下。

trimEnd()で最後のスペース（\u{0020}）を削除。

function selectionString() {
  /** @type {string} */
  let text = "";
  const space = "\u{0020}";
  /** @type {object} */
  const selectionString = window.getSelection();
  for (let index = 0; index < selectionString.rangeCount; index++) {
    text += selectionString.getRangeAt([index]).toString() + space;
  }
  text = text.trimEnd();
  search(text);
}

ダイアログを表示する関数

検索ワードを入力後、OKボタンで検索を実行する方法の他に、

検索ワードを入力後、Enterキーを押しても検索を実行させたかったので、dialog要素とform要素を連携する。

HTMLでダイアログを表現する | 前編 dialog要素の基本

HTMLのdialog要素とフォーム機能 - Hatena Developer Blog

JavaScriptでEnterキーが入力された時にSubmitする方法と無効化する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

<dialog>: ダイアログ要素 - HTML: HyperText Markup Language | MDN

ダイアログを閉じるにはCancelボタンをクリック、またはダイアログにフォーカスがあればEscapeキー。（Escapeキーで閉じるのは仕様）

検索結果は別タブで開く。

window.open(url, "_blank");

HTMLの挿入位置を</body>の上にした。

/** ダイアログの要素をHTMLとしてbodyに挿入 */
document.body.insertAdjacentHTML("beforeend", dialogElm);

afterbegin、beforebeginでもいいと思う。

innerHTML より insertAdjacentHTML を使う - Qiita

input要素にautofocus属性を明示した。

<dialog>内でautofocus属性がほぼ必須になる話

input要素の履歴を表示しない。

HTML 属性: autocomplete - HTML: HyperText Markup Language | MDN

検索を実行、またはCancelボタンのクリックでaddEventListener()のcloseイベントを実行、dialog要素を削除。

dialog.addEventListener("close", function () {
  dialog.remove();
});

HTMLDialogElement: close イベント - Web API | MDN

style要素もdialog要素の中にあるので同時に削除される。

CSSはプロパティ値をブラウザの初期値（ユーザーエージェントStyleSheet）に戻す？revertを使用した。（理解不足）

CSS - revert - とほほのWWW入門

Windows版の

• Chrome 113.0.5672.127
• Firefox 113.0.1

で確認。