Markdown Image Renderer for Google AI Studio

通称:スタ画、英名「MIR」

目的:AI Studioのプロンプト画面でMarkdown形式の画像リンクを実際の画像として表示します

使用手順:①Tampermonkeyのプラグインを インストール
②「MIRインストール」を押して、スクリプトインストールを行う(またはTampermonkeyで、以下のコードを保存)
Google Studio AIを起動して画像出る系のプロンプトでプレイ

うまくいくと以下の様にでます
C

詳しくは下部

// ==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に追加しましょう。

  1. Chromeウェブストアにアクセス: こちらのリンクからTampermonkeyのページを開きます。
  2. 「Chromeに追加」をクリック: 右上にある青い「Chromeに追加」ボタンをクリックします。
  3. 拡張機能を追加: 確認画面が表示されたら「拡張機能を追加」をクリックします。

これだけでインストールは完了です。 ブラウザの右上に、黒い四角に丸が2つ描かれたTampermonkeyのアイコンが表示されていれば成功です。

3. スクリプトを探してインストールしてみよう

Tampermonkeyの真価は、便利なユーザースクリプトを追加することにあります。スクリプトは、専門のサイトで探すのが一般的です。

  • Greasy Fork (グリーシーフォーク): 最も有名で、たくさんのスクリプトが公開されているサイトです。

Greasy Forkでスクリプトをインストールする手順:

  1. サイトにアクセス: Greasy Forkにアクセスします。
  2. スクリプトを探す: サイト内検索で、自分が使っているWebサイト名(例:「YouTube」)や、やりたいこと(例:「広告非表示」)などで検索します。
  3. インストール: 気に入ったスクリプトが見つかったら、そのページを開き、「スクリプトをインストール」という緑色のボタンをクリックします。
  4. 確認画面: Tampermonkeyの画面に切り替わり、スクリプトの内容が表示されます。内容を確認し、左上にある「インストール」ボタンをクリックすれば完了です。

4. 開発者モードの使い方(自作・改造に挑戦!)

ここからは、自分でスクリプトを作成したり、既存のスクリプトを改造したりするための「開発者モード」の使い方です。

なぜ開発者モードが必要?

最近のChromeの仕様変更により、Tampermonkeyでスクリプトを動作させるには「開発者モード」を有効にすることが必須となりました。 これはセキュリティ上の理由によるものです。

開発者モードを有効にする手順

  1. 拡張機能の管理画面を開く:
    • Chromeの右上にあるパズルのピースのような「拡張機能」アイコンをクリックします。
    • メニューの下部にある「拡張機能を管理」を選択します。
  2. 開発者モードをONにする:
    • 拡張機能一覧ページの右上にある「デベロッパー モード」(または「開発者モード」)のスイッチをクリックしてONにします。
  3. ユーザースクリプトをONにする:
    • Tampermonkeyの詳細を押す
      C
    • 「ユーザースクリプトを許可する」をONにする
      C
    • 「URLのアクセスを許可する」をONにする→上部にあった「MIRインストール」が可能になります
      C

新しいスクリプトを作成する方法

  1. Tampermonkeyアイコンをクリック: ブラウザ右上のTampermonkeyアイコンをクリックします。
  2. 「新規スクリプトを追加」を選択: 表示されたメニューから「新規スクリプトを追加」をクリックします。
  3. エディタ画面が開く: 新しいタブで、スクリプトを編集するためのエディタ画面が開きます。
  4. コードを記述: 最初から入っているテンプレートに沿って、JavaScriptのコードを書いていきます。
    • // @name: スクリプトの名前
    • // @match: スクリプトをどのWebサイトで実行するかを指定します。 例えば、https://www.google.com/*と書くと、Googleのページでのみ実行されます。
    • // Your code here... の下に、実行したい処理をJavaScriptで記述します。
  5. 保存: コードを書き終えたら、エディタ画面の「ファイル」メニューから「保存」をクリックします。

これで、あなたの作成したスクリプトが有効になり、指定したサイトを開くと自動的に実行されるようになります。もしうまく動かない場合は、開発者ツールのコンソールでエラーを確認してみましょう。

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

Edit

Pub: 18 Oct 2025 18:23 UTC

Edit: 21 Dec 2025 14:12 UTC

Views: 1509