Adds a custom icon button to click the Gemini new chat button, with precise sizing to prevent overflow.
目前為
// ==UserScript==
// @name Gemini New Chat QuickAccess
// @namespace kawaidainf.dev
// @version 0.5
// @description Adds a custom icon button to click the Gemini new chat button, with precise sizing to prevent overflow.
// @author kawaidainf
// @match https://gemini.google.com/app/*
// @grant none
// @license 3-clause BSD License
// ==/UserScript==
(function() {
'use strict';
// Google Symbolsフォントを明示的に読み込むためのスタイルを追加
// これにより、カスタムボタンでGoogle Symbolsのアイコンが確実に表示されるようにする
function loadGoogleSymbolsFont() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200';
document.head.appendChild(link);
}
// カスタムアイコンボタンを作成する関数
function createCustomIconButton() {
// 新しいボタン要素（アイコンボタン）を作成
const customIconButton = document.createElement('button');
// ボタンにスタイルを適用して、画面に固定表示する
customIconButton.style.position = 'fixed'; // 画面に固定表示
customIconButton.style.bottom = '20px'; // 画面下から20pxの位置
customIconButton.style.right = '20px'; // 画面右から20pxの位置
customIconButton.style.zIndex = '10000'; // 他の要素の上に表示
customIconButton.style.width = '48px'; // ボタンのサイズ (幅)
customIconButton.style.height = '48px'; // ボタンのサイズ (高さ)
customIconButton.style.borderRadius = '50%'; // 円形にする
customIconButton.style.backgroundColor = '#1a73e8'; // 背景色をGoogle Geminiのテーマカラーに近い青色に設定
customIconButton.style.border = 'none'; // 枠線をなくす
customIconButton.style.display = 'flex'; // アイコンを中央に配置するためにflexboxを使用
customIconButton.style.justifyContent = 'center'; // 水平方向の中央揃え
customIconButton.style.alignItems = 'center'; // 垂直方向の中央揃え
customIconButton.style.cursor = 'pointer'; // マウスカーソルをポインターにする
customIconButton.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)'; // 影をつけて立体的に見せる
customIconButton.style.transition = 'background-color 0.3s ease'; // ホバー時の色変化を滑らかにする
// マウスがボタンに乗ったときのスタイル
customIconButton.onmouseover = function() {
customIconButton.style.backgroundColor = '#155bb5'; // 少し濃い青色に変更
};
// マウスがボタンから離れたときのスタイル
customIconButton.onmouseout = function() {
customIconButton.style.backgroundColor = '#1a73e8'; // 元の色に戻す
};
// Google Symbolsフォントのアイコン要素を作成
const iconElement = document.createElement('span'); // span要素を使用
iconElement.className = 'material-symbols-outlined'; // Google Symbolsフォントのクラス名
iconElement.textContent = 'edit_square'; // アイコンの文字コード
iconElement.style.color = 'white'; // アイコンの色を白色に設定
iconElement.style.fontSize = '24px'; // アイコンのサイズ
iconElement.style.lineHeight = '1'; // 行の高さを1にすることで、余計な上下の余白を減らす
iconElement.style.userSelect = 'none'; // テキスト選択を無効にする
// アイコンをボタンに追加
customIconButton.appendChild(iconElement);
// ボタンがクリックされたときのイベントリスナーを設定
customIconButton.onclick = function() {
console.log('カスタムアイコンボタンがクリックされました。'); // コンソールにログを出力
// 指定された新規チャットボタン要素を検索
const newChatButton = document.querySelector('[data-test-id="new-chat-button"]');
// 新規チャットボタンが見つかった場合、クリックイベントを発生させる
if (newChatButton) {
console.log('Geminiの新規チャットボタンが見つかりました。クリックをシミュレートします。'); // コンソールにログを出力
newChatButton.click();
} else {
console.log('Geminiの新規チャットボタンが見つかりませんでした。'); // コンソールにログを出力
}
};
// 作成したカスタムボタンをページのbody要素に追加
document.body.appendChild(customIconButton);
}
// ページが完全に読み込まれる前にGoogle Symbolsフォントを読み込む
// これにより、カスタムボタンでGoogle Symbolsのアイコンが確実に表示されるようにする
loadGoogleSymbolsFont();
// ページが完全に読み込まれた後にカスタムボタンを作成するようにする
window.addEventListener('load', createCustomIconButton);
})();