Selection Search のメニューから、ワンクリックで文字数カウントを実行できるようにする方法を紹介します。
やることは拡張機能の設定画面に1行コピペするだけ。
https://rnrx8.github.io/textcountwithrightclick/count.html?q={%(RAW)s}Selection Searchプラグインの設定画面の「Add New Serch Engine」クリック→上記を貼り付けで完了します。
完成イメージは下記。カウントしたい文字を選択するだけでメニューが表示（拡張機能の設定に依存）。文字数カウントをクリックすれば文字数が表示されます。
自分で作ったりカスタムしたい方向けに今回作成した手順も合わせて解説します。
背景：右クリック検索の手数を減らしたかった
もともと私は、ブラウザでなにか調べ物をしているときに、【選択 → 右クリック → Google検索】という動作をかなりの頻度で繰り返していました。
その手数を減らしたくて出会ったのが、文字を選択するだけで複数の検索先を選べる拡張機能「Selection Search」。
しかし、これを有効にするにはかんたん文字数カウントプラグインの選択時自動カウントを無効にする必要がありました（自動文字数カウントをONにするとSearch enginesのメニューが表示されない）。
「じゃあもう、Selection Search のメニューの中に文字数カウントを入れてしまえばいいのでは？」
という発想で作ったのが今回の方法です。
Selection Search は
“選択したテキストを URL に埋め込んで開く”
のが得意なので、そこに
- 自前の「文字数カウントページ」を用意して
- 選択したテキストをクエリとして渡す
という仕組みを組み合わせています。
実装手順
大まかな手順は以下の通り。
- GitHub Pages で「文字数カウンター」のページを1枚だけ用意
- Selection Search のカスタム検索としてそのページを登録
- 選択 → メニューから「文字数カウント」を押すと 新しいタブで文字数が表示される
手順①：GitHub Pages で文字数カウンターのページを用意する
まずは、Selection Search から呼び出す用の「文字数カウンターページ」を1枚だけ作ります。
1-1. リポジトリを作る
- GitHub で新しいリポジトリを作成
- 例：textcountwithrightclick
- Public のままでOK、README はあってもなくてもOK
1-2. count.html を追加する
- リポジトリトップで 「Add file → Create new file」 を押す
- ファイル名を count.html にする
- 下記のコードをそのまま貼り付けて、Commit する
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字数カウンター</title>
<style>
body {
font-family: system-ui, sans-serif;
padding: 16px;
}
textarea {
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<h1>文字数カウンター</h1>
<p>文字数: <span id="len">0</span></p>
<textarea id="text"></textarea>
<script>
const params = new URLSearchParams(location.search);
const text = params.get("q") ?? "";
const textarea = document.getElementById("text");
const lenEl = document.getElementById("len");
textarea.value = text;
lenEl.textContent = [...text].length;
textarea.addEventListener("input", () => {
lenEl.textContent = [...textarea.value].length;
});
</script>
</body>
</html>渡された文字列をテキストエリアに入れ、上に「文字数」を表示するだけのシンプルなページができあがります。
1-3. GitHub Pages を有効にする
1. リポジトリの 「Settings」 タブを開く
2. 左メニューから 「Pages」 を選択
3. 「Build and deployment」で
• Source: Deploy from a branch
• Branch: main
• フォルダ: / (root)
にして Save
少し待つと、同じページの上部に
Your site is live at
https://yourname.github.io/textcountwithrightclick/
のような表示が出ます。そうなったらhttps://yourname.github.io/textcountwithrightclick/count.htmlにアクセスして、文字数カウンターのページが表示されれば準備完了です。
手順②：Selection Search に文字数カウンターを登録する
次に、このページを Selection Search のメニューに追加します。
2-1. Selection Search のオプションを開く
- Chrome のツールバーから Selection Search のアイコンを右クリック
- 「Options」（オプション）を開く
2-2. 新しい検索エンジンを追加
- オプション画面で「Search engines（検索エンジン）」の一覧から、 「Add」や「＋」ボタンで新しいエントリを作成
- 各項目を次のように設定
- Name： 文字数カウント
- Search url：
https://yourname.github.io/textcountwithrightclick/count.html?q={%(RAW)s}-
- yourname と textcountwithrightclick は自分の環境に置き換え
- {%(RAW)s} が、Selection Search で選択したテキストそのものに置き換わる部分
- アイコンはお好みで設定（なくてもOK）
設定を保存すれば、Selection Search のメニューに「文字数カウント」 が追加されます。
手順③：実際の使い方
あとはいつも通り使うだけです。
- ページ上で文字数を知りたいテキストをドラッグで選択
- Selection Search のメニュー（右クリック or ショートカット）が表示
- さきほど追加した 「文字数カウント」 をクリック
- 新しいタブで count.html が開き、 テキストエリアに選択した文字列が入り、 ページ上部に 文字数が表示される
テキストエリアの中身を編集すれば、文字数表示もリアルタイムで更新されるので、原稿調整のときにもそのまま使えます。
なお、ブラウザ上で文字選択しただけでSearch enginesのメニューを表示したい場合は拡張機能の設定のMenu関連を下記のようにしてください（右クリックやキーボードショートカットと合わせたりもできます）。
まとめ
- 右クリックメニューが拡張機能だらけになる問題を避けつつ、
- Selection Search にまとめて操作を集約したくて、
- GitHub Pages + Selection Search のカスタム検索を組み合わせて 「メニューから呼び出せる文字数カウンター」を作りました。
ブラウザで文章を書くことが多い人や、
文字数制限のある原稿を扱うことが多い人にはかなり便利なので、
自分用にカスタマイズしつつ使ってみてください。
コメントしてねっ