Markdown Image Renderer for Google AI Studio
通称:スタ画、英名「MIR」
目的:AI Studioのプロンプト画面でMarkdown形式の画像リンクを実際の画像として表示します
使用手順:①Tampermonkeyのプラグインを インストール
②「MIRインストール」を押して、スクリプトインストールを行う(またはTampermonkeyで、以下のコードを保存)
③Google Studio AIを起動して画像出る系のプロンプトでプレイ
うまくいくと以下の様にでます

詳しくは下部
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | // ==UserScript==
// @name Markdown Image Renderer for Google AI Studio
// @namespace https://greasyfork.org/ja/scripts/553022
// @license MIT
// @version 4.5
// @description AI StudioでMarkdown画像が表示できるようになります
// @author ForeverPWA
// @match *://aistudio.google.com/*
// @grant GM_xmlhttpRequest
// @connect *
// ==/UserScript==
(function() {
'use strict';
const LOG_PREFIX = "🖼️ AI Studio Image Renderer:";
console.log(LOG_PREFIX, "Script v4.5 (Stable Re-rendering Fix) started.");
/**
* 指定されたURLから画像をBlobとして非同期に取得します。
*/
function fetchImageAsBlob(url, callback) {
if (url.startsWith(window.location.origin) || url.startsWith('/')) {
fetch(url)
.then(response => {
if (response.ok) return response.blob();
throw new Error(`HTTP Error ${response.status}`);
})
.then(callback)
.catch(error => {
console.error(LOG_PREFIX, `Fetch Error for: ${url}`, error);
callback(null);
});
return;
}
GM_xmlhttpRequest({
method: 'GET',
url: url,
responseType: 'blob',
onload: function(response) {
if (response.status >= 200 && response.status < 300) {
callback(response.response);
} else {
console.error(LOG_PREFIX, `HTTP Error ${response.status} for: ${url}`);
callback(null);
}
},
onerror: (error) => {
console.error(LOG_PREFIX, `Network Error for: ${url}`, error);
callback(null);
}
});
}
/**
* 見つかった<pre>要素を画像に置き換える関数
* @param {HTMLElement} preElement - 対象の<pre>要素
*/
function processPreElement(preElement) {
const text = preElement.textContent || '';
const markdownRegex = /!\[(.*?)\]\((.*?)\)/;
const match = text.match(markdownRegex);
if (!match) return;
const [fullMatch, altText, imageUrl] = match;
const nextElement = preElement.nextSibling;
// すぐ隣に、このURLから生成した画像が既にあるかチェック
if (nextElement && nextElement.tagName === 'IMG' && nextElement.dataset.sourceUrl === imageUrl) {
// 既にあれば、preタグが非表示になっていることを確認して終了
if (preElement.style.display !== 'none') {
preElement.style.display = 'none';
}
return; // これ以上何もしない
}
console.log(LOG_PREFIX, `Rendering image for: ${imageUrl}`);
const img = document.createElement('img');
img.alt = altText || 'Loading image...';
img.style.cssText = "max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: 8px; background-color: #f0f0f0; min-height: 50px; cursor: pointer;";
img.title = `Click to open image in new tab: ${imageUrl}`;
img.addEventListener('click', () => window.open(imageUrl, 'imagePreviewWindow'));
img.dataset.sourceUrl = imageUrl;
preElement.style.display = 'none';
const parent = preElement.parentNode;
if (parent) {
parent.insertBefore(img, preElement.nextSibling);
}
fetchImageAsBlob(imageUrl, (blob) => {
if (blob) {
try {
const objectURL = URL.createObjectURL(blob);
img.src = objectURL;
img.alt = altText;
img.onload = () => URL.revokeObjectURL(objectURL);
} catch(e) {
console.error(LOG_PREFIX, "Error creating object URL", e);
img.alt = `[Failed to load image] ${altText}`;
img.style.border = "2px dashed #d93025";
}
} else {
img.alt = `[Failed to load image] ${altText}`;
img.style.border = "2px dashed #d93025";
}
});
}
/**
* DOM内をスキャンして対象の<pre>要素を探すメイン関数
*/
function scanForMarkdownImages() {
// セレクタは元のシンプルなままでOK
const TARGET_SELECTOR = 'ms-chat-turn pre, .prompt-textarea pre';
const elements = document.querySelectorAll(TARGET_SELECTOR);
elements.forEach(processPreElement);
}
const observer = new MutationObserver(() => {
setTimeout(scanForMarkdownImages, 300);
});
console.log(LOG_PREFIX, "Observing DOM changes...");
observer.observe(document.body, {
childList: true,
subtree: true
});
window.addEventListener('load', () => {
setTimeout(scanForMarkdownImages, 1000);
});
})();
|
1. Tampermonkeyって何?
Tampermonkeyは、一言でいうと「Webサイトを自分好みに改造できるGoogle Chromeの拡張機能」です。
例えば、以下のようなことができます。
- 見た目を変更: 文字の大きさを変えたり、不要な広告を非表示にしたりできます。
- 機能を追加: YouTubeにダウンロードボタンを追加したり、SNSサイトに便利な機能を追加したりできます。
- 作業を自動化: 定型的なフォーム入力を自動化したりできます。
これらは「ユーザースクリプト」と呼ばれる小さなプログラムをTampermonkeyに追加することで実現します。自分でプログラムを書けなくても、他の人が作成して公開しているスクリプトをインストールするだけで、様々な恩恵を受けられます。
2. Tampermonkeyのインストール(超かんたん!)
まずは、TampermonkeyをGoogle Chromeに追加しましょう。
- Chromeウェブストアにアクセス: こちらのリンクからTampermonkeyのページを開きます。
- 「Chromeに追加」をクリック: 右上にある青い「Chromeに追加」ボタンをクリックします。
- 拡張機能を追加: 確認画面が表示されたら「拡張機能を追加」をクリックします。
これだけでインストールは完了です。 ブラウザの右上に、黒い四角に丸が2つ描かれたTampermonkeyのアイコンが表示されていれば成功です。
3. スクリプトを探してインストールしてみよう
Tampermonkeyの真価は、便利なユーザースクリプトを追加することにあります。スクリプトは、専門のサイトで探すのが一般的です。
- Greasy Fork (グリーシーフォーク): 最も有名で、たくさんのスクリプトが公開されているサイトです。
Greasy Forkでスクリプトをインストールする手順:
- サイトにアクセス: Greasy Forkにアクセスします。
- スクリプトを探す: サイト内検索で、自分が使っているWebサイト名(例:「YouTube」)や、やりたいこと(例:「広告非表示」)などで検索します。
- インストール: 気に入ったスクリプトが見つかったら、そのページを開き、「スクリプトをインストール」という緑色のボタンをクリックします。
- 確認画面: Tampermonkeyの画面に切り替わり、スクリプトの内容が表示されます。内容を確認し、左上にある「インストール」ボタンをクリックすれば完了です。
4. 開発者モードの使い方(自作・改造に挑戦!)
ここからは、自分でスクリプトを作成したり、既存のスクリプトを改造したりするための「開発者モード」の使い方です。
なぜ開発者モードが必要?
最近のChromeの仕様変更により、Tampermonkeyでスクリプトを動作させるには「開発者モード」を有効にすることが必須となりました。 これはセキュリティ上の理由によるものです。
開発者モードを有効にする手順
- 拡張機能の管理画面を開く:
- Chromeの右上にあるパズルのピースのような「拡張機能」アイコンをクリックします。
- メニューの下部にある「拡張機能を管理」を選択します。
- 開発者モードをONにする:
- 拡張機能一覧ページの右上にある「デベロッパー モード」(または「開発者モード」)のスイッチをクリックしてONにします。
- ユーザースクリプトをONにする:
- Tampermonkeyの詳細を押す

- 「ユーザースクリプトを許可する」をONにする

- 「URLのアクセスを許可する」をONにする→上部にあった「MIRインストール」が可能になります

- Tampermonkeyの詳細を押す
新しいスクリプトを作成する方法
- Tampermonkeyアイコンをクリック: ブラウザ右上のTampermonkeyアイコンをクリックします。
- 「新規スクリプトを追加」を選択: 表示されたメニューから「新規スクリプトを追加」をクリックします。
- エディタ画面が開く: 新しいタブで、スクリプトを編集するためのエディタ画面が開きます。
- コードを記述: 最初から入っているテンプレートに沿って、JavaScriptのコードを書いていきます。
// @name: スクリプトの名前// @match: スクリプトをどのWebサイトで実行するかを指定します。 例えば、https://www.google.com/*と書くと、Googleのページでのみ実行されます。// Your code here...の下に、実行したい処理をJavaScriptで記述します。
- 保存: コードを書き終えたら、エディタ画面の「ファイル」メニューから「保存」をクリックします。
これで、あなたの作成したスクリプトが有効になり、指定したサイトを開くと自動的に実行されるようになります。もしうまく動かない場合は、開発者ツールのコンソールでエラーを確認してみましょう。
5. 注意点
- AIにスクリプトの内容を確認する: コードをAIに聞いて安全か確認してみよう
- 信頼できるスクリプトを: スクリプトは便利な反面、悪意のあるコードが含まれている可能性もゼロではありません。出所が不明なスクリプトや、内容がよく分からないスクリプトのインストールは避けましょう。
- 定期的なアップデート: Tampermonkeyやインストールしたスクリプトは、自動で更新される設定にしておくと、セキュリティ面でも安心です。
Tampermonkeyを使いこなせば、普段のWebブラウジングが格段に快適になります。ぜひ、色々なスクリプトを試したり、簡単なスクリプトの自作に挑戦してみてください。
うまくいかない!
ブラウザの再起動か、「画像は()括弧でくくって」とチャットで打つと直る事もあり
その他のツール
URL自動デコーダー
通称:自デコ
https://rentry.co/3hb6piip
AI Studio以外のAIモデルでも画像出力したい!(Gemini, ChatGPT, Grok用)
Markdown Image Renderer for Gemini, ChatGPT, Grok
通常:MIRG
https://rentry.co/kuzpbema
AI Studioで自動音声読み上げ(VOICEVOX)が欲しい!
通称:スタ自ボ
https://rentry.co/x9fw82o3
Wikiのプロンプトまとめ等をみながら、プロンプトだけを即コピーしたい人用に作成しました
通称:即コピ
https://rentry.co/8772bcnh