コードブロックのネスト対応Bookmarklet

このBookmarkletは、LLMが途中で忘れがちな「コードブロックの入れ子ルール」を、必要なタイミングで再注入するためのものです。前の記事「LLM出力でMarkdownの入れ子コードブロックが崩れる問題と、インデント方式＋ブックマークレットによる安定化」で紹介したBookmarkletの、ワンライナー化する前のJavaScriptのソースコードを以下に示します。BookmarkletはURLとして登録する必要があるため、最終的にワンライナー化して使用する必要がありますが、可読性が悪いので、変換前のものを載せました。日本語版と英語版を載せていますが、異なるのは注入するルール(プロンプト)の部分だけです。

javascript:(function(){
  const p = document.querySelector("#prompt-textarea p");
  if (!p) return;

  const rule =
    "## 入れ子になったコードブロックに関する規則\n" +
    "フェンスドコードブロック内では、インデント式でコードを表示すること。\n\n";

  p.textContent = rule + p.textContent;
  p.dispatchEvent(new InputEvent("input", { bubbles: true }));
})();

Bookmarkletの元となったワンライナー化前のソースコード(日本語版)

javascript:(function(){
  const p = document.querySelector("#prompt-textarea p");
  if (!p) return;

  const rule =
    "## Rules for nested code blocks\n" +
    "Inside a fenced code block, display any inner code using the indented style (4 spaces). " +
    "Do not use fenced code blocks inside another fenced code block.\n\n";

  p.textContent = rule + p.textContent;
  p.dispatchEvent(new InputEvent("input", { bubbles: true }));
})();

JS source code of the bookmarklet before making it a one-liner.

Bookmarkletが行っていることは、ChatGPTのインプット欄を探して既存のプロンプトの前側に、コードブロックがネストしたときには、内側ではインデント方式を使うように指示しているだけです。

テキスト入力欄 p を探す　　const p = document.querySelector("#prompt-textarea p");
p が見つからなければ終了　　if (!p) return;
rule に文字列としてルールを格納する　　const rule =......
p の中のテキストの前に rule を付けて再代入　　p.textContent = rule + p.textContent;
ブラウザに p の内容が変更されたことを通知　　p.dispatchEvent(new InputEvent("input", { bubbles: true }));

ユーザーが、入力欄のプロンプトを目視確認してから送信する運用を想定しているため、自動送信機能は付けていません。

ワンライナー化するときには、筆者は Bookmarklet Maker のサイトをよく利用しています。

Bookmarkリンク: 日本語版:4spCB_ja
ワンライナーのコードは下記

javascript:(function()%7Bjavascript%3A(function()%7B%0A  const p %3D document.querySelector("%23prompt-textarea p")%3B%0A  if (!p) return%3B%0A%0A  const rule %3D%0A    "%23%23 入れ子になったコードブロックに関する規則%5Cn" %2B%0A    "フェンスドコードブロック内では、インデント式でコードを表示すること。%5Cn%5Cn"%3B%0A%0A  p.textContent %3D rule %2B p.textContent%3B%0A  p.dispatchEvent(new InputEvent("input"%2C %7B bubbles%3A true %7D))%3B%0A%7D)()%3B%7D)()%3B

【注意】

このBookmarkletによるいかなる損害の発生にも補償は致しませんので、自己責任でご使用願います。
環境依存のものなどもありますので、Bookmarkletの動作は無保証です。
Web UIの仕様が変わった場合は、pを選択する部分、その他に変更が生じる可能性があります。
ご自由に改変して使っていただいて結構ですが、再配布などされるなら、当サイトも紹介してくれると嬉しく思います。
自動送信が付けたい方は、 document.querySelector('[data-testid="send-button"]') を見つけてからclickイベントを発生させれば送信は可能です。
尚、テキストエリアが空のときには、送信ボタンは現れません。ご興味のある方は、規約等をご確認の上、自己責任でお試しください。

関連投稿

コメントする 返信をキャンセル

コメントする返信をキャンセル