Claudeに定型文挿入ボタンを追加するユーザースクリプトを公開しました
Claude本家サイトのChatに定型文挿入のボタンを追加するユーザースクリプトを公開しました。基本はClaude3-Opusに作成してもらって、動作しなかったので私が適宜修正しました。
使用方法
アドオンとしてまず、TamperMonkeyやGreasemonkeyなど、ユーザースクリプトを使用できるアドオンが必要となります。
このコードには問題ないことは確認していますが、セキュリティ上の問題を発生させることも出来るアドオンですので、自己責任でご利用ください。
TamperMonkeyのダッシュボードを開き、
右上にある+ボタン(新規スクリプトを作成)を押してください。
すると、エディターが開くので、下のコードをコピペして保存すれば使用できます。
コード
// ==UserScript==
// @name Claude.ai Prefill Button
// @namespace http://tampermonkey.net/
// @version 1.5
// @description Displays a button to prefill the chat box on Claude.ai with a predefined text
// @author will&Claude3-Opus
// @match https://claude.ai/chat/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 文字入力欄に挿入する定型文
const prefillText = "ここに定型文を入力してください。";
function addButton() {
// 既存のボタンを削除
const existingButton = document.querySelector('#prefillButton');
if (existingButton) {
existingButton.remove();
}
// ボタンを作成
const button = document.createElement('button');
button.id = 'prefillButton';
button.textContent = '定型文を挿入';
button.setAttribute("title", "定型文を挿入");
button.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
padding: 10px 20px;
background-color: #dc951b;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
`;
button.onmouseover = function() {
this.style.backgroundColor = '#f88e099';
}
button.onmouseout = function() {
this.style.backgroundColor = '#dc951b';
}
// ボタンクリック時の処理
button.addEventListener('click', function() {
// 文字入力欄の要素を取得
const chatBox = document.querySelector('div.ProseMirror[contenteditable="true"]');
if (chatBox) {
// 文字入力欄にフォーカスを設定
chatBox.focus();
// 現在の選択範囲を保存
const selection = window.getSelection();
const range = selection.getRangeAt(0);
// 定型文を挿入
document.execCommand('insertText', false, prefillText);
// 挿入後の選択範囲を復元
selection.removeAllRanges();
selection.addRange(range);
// 文字入力欄の内容が変更されたことを通知するために input イベントをディスパッチ
chatBox.dispatchEvent(new Event('input', { bubbles: true }));
}
});
// ボタンを body 要素に追加
document.body.appendChild(button);
}
// ページ読み込み時にボタンを追加
window.addEventListener('load', function() {
addButton();
});
// DOMの変更を監視し、ボタンが失われた場合に再度追加
const observer = new MutationObserver(function(mutations) {
if (!document.querySelector('#prefillButton')) {
addButton();
}
});
observer.observe(document.body, {childList: true, subtree: true});
})();導入に成功すると、
この画像のように右下に定型文を挿入ボタンが出ます。
ボタンを押すとこの用に入力ボックスに反映されます。
カスタマイズ
入力内容がこれでは使い物にならないので、コードの
// 文字入力欄に挿入する定型文
const prefillText = "ここに定型文を入力してください。";"ここに定型文を入力してください。"の部分を好きな文字列に変更してください。""は残す必要がありますのでご注意ください。
// ボタンを作成
const button = document.createElement('button');
button.id = 'prefillButton';
button.textContent = '定型文を挿入';ボタンの名前は'定型文を挿入'の部分を好きな文字列に変更してください。''は残す必要がありますのでご注意ください。
button.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
padding: 10px 20px;
background-color: #dc951b;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
`;ボタンのサイズやカラーはこのCSS部分を変えれば好きに変更できます。
再配布、コードの改変は自由に行ってもらって構いませんが、オリジナルがここにあることを記載してください。
改変してもっと良いのが出来たら、ツイッターやディスコ(@willlion)で連絡いただければ拝見させていただきます。
表紙画像はStableCascadeで「A user script to add a canned text insert button to Claude has been released, masterpiece, best quality」という、表題英訳をそのまま突っ込んでできた画像です。誰この人…
コメント