AI ChatGPT(2)Chrome拡張機能でもっと便利に

ChatGPT(2)Chrome拡張機能でもっと便利に

プロローグ

○プロローグ

Chrome拡張機能は、「chrome ウェブストア」から簡単にインストールできます。
※URL：https://chrome.google.com/webstore/category/extensions?hl=ja
Chrome拡張機能をインストールすると、ChatGPTが、とても便利になります。
以下の拡張機能を取り上げます：
・ページ翻訳ツール/・Talk-to-ChatGPT/・ChatGPT Writer
・ChatGPT for Google/・WebChatGPT/・ChatGPT Optimizer
・ChatGPT Prompt Genius/・YouTube Summary with ChatGPT

拡張機能名	機能概要	備考
ページ翻訳ツール	ページ全体を翻訳します。この機能は、拡張機能ではなく、Chrome基本機能です。	言語は何ケ語あるか、100ケ国語以上ありそうです。
Talk-to-ChatGPT	質問内容＆回答内容がテキストでなく、音声となります。音声で質問して、音声で回答してくれます。	主要な言語は全てあります
ChatGPT Writer	メール、メッセージの文面を自動生成してくれます。簡単なメッセージや電子メールを作成する際の補助として使用できます。	驚きでしょう、ここまで、気の利いた文章になります。 ※目上の人、会社の上司へのメールには、必需品でしょう
ChatGPT for Google	Google検索すると、検索結果の右側にChatGPTの回答も表示されます。	Googleで検索するだけで、ChatGPTの結果も一緒に表示してくれるChromeの拡張機能です。
WebChatGPT	不足した情報をGoogle検索で補えるのがWebChatGPTの強みです。	やはり参照元に情報は必要です ChatGPTの弱点を補ってくれます
ChatGPT Optimizer	保存機能・音声読み上げ機能・時短機能・デザイン機能・文字数カウント	保存機能と音声読み上げは、とても便利です
ChatGPT Prompt Genius	現状は、Share & Export と、Theme 機能があります。	Share & Export を押すと、ChatGPT の会話履歴を画像化したり PDF化したり、他の人と共有することができます！
YouTube Summary with ChatGPT	Youtube の内容をまとめてくれる Chrome 拡張。	動画の音声をテキスト化しているようです。

ページ翻訳ツール

※この機能は、厳密にはChrome拡張機能ではなく、Chromeの基本機能です。
※設定することで、機能を有効にすることができます。
任意の言語に翻訳してくれます。

Talk-to-ChatGPT

○「Talk-to-ChatGPT」拡張のインストール
これは便利です、音声入力して、結果も音声で出力してくれます。
※音声認識の精度も、まあまあ、ですね。

○「Talk-to-ChatGPT」拡張の使い方

○「Talk-to-ChatGPT」の設定

○「Talk-to-ChatGPT」拡張の説明ページ

ChatGPT Writer

この Google Chrome 用の ChatGPT 拡張機能を、簡単なメッセージや電子メールを作成する際の補助として使用できます。
ブラウザに追加して、メッセージのコンテキストを入力するだけで、ChatGPT が自動的にメッセージを生成します。

○「ChatGPT Writer」のインストール

○「ChatGPT Writer」の使用例
Gmailでのメール送信、返信で利用します。
※どうですか、驚きでしょう、ここまで、気の利いた文章になります。
※目上の人、会社の上司へのメールには、必需品でしょう。

ChatGPT for Google

Google検索をするとChatGPTの回答も表示してくれるブラウザ拡張機能です。
参照URL：https://productivity.rocks/tool/ai-optimizer/

○「ChatGPT for Google」のインストール

○「ChatGPT for Google」の使い方
※この機能拡張があれば、百人力ですね、個々の参照サイトが左側に表示され、
※右側には、ずばり回答(正解)が表示されます。
※ChatGPT検索して、その後、Google検索の手間が省けますね。

WebChatGPT

参照URLを：https://delaymania.com/202301/webservice/webchatgpt/

ChatGPTって独自のデータベースから情報を引っ張ってくるため、時事ネタに弱かったり、守備範囲外のことは謎の回答を繰り返したりするんですよね。その不足した情報をGoogle検索で補えるのがWebChatGPTの強みです。

こちらは通常の質問と回答。質問内容によってはこの使い方で問題ないですし、この回答を元に記事化もできそうなクオリティです。
○「WebChatGPT」のインストール

○「WebChatGPT」の使い方
WebChatGPTをインストールすると、ChatGPTのチャット入力欄下部にボタンとプルダウンメニューがいくつか追加されます。

検索用のオプション設定ができます、最初の「Web access」は便利です。
・ChatGPTの弱点、参照元を示さない、をカバーしてくれます。

・「Web access」を有効にしておくと、関連のリンクが設定されます。
・これは便利です、ChatGPTは参照元の情報を教えてくれませんので。
・また、ChatGPTの回答に先立って、WEB検索結果も表示されます。

ChatGPT Optimizer

参照URL：https://productivity.rocks/tool/ai-optimizer/
参照URLを：https://www.google.com/search?q=ChatGPT+Optimizer%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9&rlz=1C1QABZ_jaJP1027JP1027&oq=ChatGPT+Optimizer%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9&aqs=chrome..69i57j0i546l3.17511j0j15&sourceid=chrome&ie=UTF-8#fpstate=ive&vld=cid:2b85aff6,vid:3IMS_tjPe9s,st:0

○機能について
多機能です、以下の機能があります：

・保存機能
・音声読み上げ機能
・時短機能
・デザイン機能
・文字数カウント

○「ChatGPT for Google」のインストール

○「ChatGPT for Google」の使い方

○保存機能

○音声読み上げ機能

○時短機能

○デザイン機能

ChatGPT Prompt Genius

https://chatgpt-lab.com/n/n4cdaf52cb538#dfe84a93-2764-46e1-af98-700b8e8b4f37
ChatGPT Prompt Genius は、特にお勧めの拡張機能です！ChatGPT の左下のメニューが、通常の内容に追加したメニューになります。
現状は、Share & Export と、Theme 機能があります。
Share & Export を押すと、ChatGPT の会話履歴を画像化したりPDF化したり、他の人と共有することができます！Theme は ChatGPT の画面をハッカー風にしたり色んなテーマにしたりできる機能です。

○「ChatGPT Prompt Genius」のインストール

○「ChatGPT Prompt Genius」の使い方

左ペインに「Share & Export」メニューが追加されます。
それをクリックすると、以下のサブメニューが表示されます。
    Download PDF
    Download PNG
    Export md
    Share Link

○「Download PDF」：ChatGPT画面をPDFドキュメントとして保存します。

○「Download PNG」：ChatGPT画面を画像として保存します。

○「Export md」：ChatGPT画面をテキスト文書として保存します。

○拡張子「MD」について

○「Share Link」：共有可能なWEBページとして保存します。
これも凄いですね、WEBページが用意されていました。

YouTube Summary with ChatGPT

YouTube Summary with ChatGPT は Youtube の動画内容を文章(テキスト)でまとめてくれる Chrome 拡張です。
まあ便利なこと、この上なしです。
こちらの拡張機能を入れると Youtube ビデオの右上に Translate & Summary というボタンが表示されるようになり、
こちらをクリックすると ChatGPT へ Youtube の字幕をまとめるように指示を出すリンクが出てきます。

○「YouTube Summary with ChatGPT」のインストール

○「YouTube Summary with ChatGPT」の使い方

Youtube動画に「Transcript & Summary」ボタンを追加します。動画の要約を作成します。
設定すれば、Youtube動画の「字幕」にリアルタイムに要約を表示してくれます。
また、要約内容を、ChatGPT画面に表示することもできます。

・まず、「言語の設定」を行います。

※注意書きにもあるように、日本語を指定すると、時間がかかるという問題があるようです。
※１度、英語に翻訳して「DeepL」/「Google翻訳」で日本にしたほうがいいようです。
しかし、手間なので、私は直接、日本語を指定しました、そんなに抵抗はありませんでした(^_^;)。

・言語設定が済んだら、「Transcript & Summary」ボタンを押下します。

深津式汎用プロンプト

・これは、Chrome拡張機能ではありません、「コツ」です。
・ChatGPTの使い方の「コツ」です。
・同じ質問をするにも、やはり、それなりの質問の仕方があるようです。

１番目の画像は、「普通に」質問した結果です。
２番目の画像は、「深津式」質問した結果です。
    　#命令書：
    　#制約条件：
    　#入力文：
確かに、深津式の方が、回答が判りやすいですね。
※やはり、新しいものを使いこなすには、「コツ」が必要ですね。

Chrome拡張機能の開発方法

参考URL：https://yuki.world/how-to-develop-chrome-extension-basics/
※説明が実に丁寧です、とても判りやすかったです。

簡単な拡張機能を作成して、インストールしてみます。

以下の２つの機能を持っています。
    ・ChatGPTページを開いたときに、起動されると、ChatGPTページの内容を取得して、表示します。
    ※この機能は、「虫ピン」で拡張機能に常に固定表示します。
    ・またGoogleカレンダーを表示します。これは単なるオマケ機能です。

フォルダー構成：
   03.ChatGPT\popフォルダーを作成します。
   ※拡張機能取り込み時に指定するフォルダーです。
作成したフォルダー配下に、以下の４つファイルを作成します：
   ・manifest.json：全体を制御するコントロールファイル
   ・content.js：イベントリスナーを登録して、メッセージ送信します。
   ・popup.html：この機能のWEBページです。
   ・popup.js：ボタン押下時のJavascriptです。

○「manifest.json」の内容

{
    "name": "HELLO WORLD",
    "description": "chrome拡張機能の基礎",
    "version": "1.0",
    "manifest_version": 3,
    "action": {
        "default_popup": "popup.html"
    },
    "content_scripts": [
        {
          "js": ["content.js"],
          "matches": ["https://chat.openai.com/chat/*"]
        }
    ]
}

○「content.js」の内容

let body = document.querySelector('body');
let addElement = document.createElement('h1');
addElement.textContent = 'HELLO WORLD';
body.prepend(addElement);

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    let title = document.querySelector('.w-full').textContent

    sendResponse(title);
});

○「popup.html」の内容

 








HELLO WORLD








    
    
   
    

YAHOO!!!


GOOGLE!!!

○「popup.js」の内容

document.getElementById('btn_get').addEventListener('click', () => {
    chrome.tabs.query( {active:true, currentWindow:true}, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, {message: 'getname'}, (content) => {
            if(!content){
                alert('Cannot Get! Try Reload First!');
                return;
            }
            document.getElementById('title').value = content
        });
    });
});

○作成した拡張機能のインストール

○作成した拡張機能の動作確認

○作成したChrome拡張機能を公開するには

【ChatGPTへの質問内容】
作成したChrome拡張機能を公開する方法を教えて。
【ChatGPTの回答内容】

Chrome拡張機能を公開するには、以下の手順に従ってください。

1. Chromeウェブストアにアクセスして、Googleアカウントでログインします。

2. 左側のメニューから「デベロッパーダッシュボード」を選択します。

3.「アイテムを追加」をクリックして、新しい拡張機能を追加します。

4. 拡張機能の情報を入力します。タイトル、説明、カテゴリ、アイコン、スクリーンショットなどが必要です。

5.拡張機能のファイルをアップロードします。
アップロードするファイルは、拡張機能のmanifest.jsonファイルと、必要に応じて画像やスクリプトファイルなどが含まれます。

6. アップロードが完了したら、Chromeウェブストアに公開するか、審査のために送信するかを選択します。

7. 公開された拡張機能は、Chromeウェブストアで検索してダウンロードすることができます。

ただし、公開する前には、Chromeウェブストアのポリシーに従って、
拡張機能の機能、セキュリティ、プライバシーなどをチェックしておくことが重要です。
また、拡張機能のアップデートや審査についても注意が必要です。

【ChatGPTへの質問内容】※追加質問です※
申込んでから、承認されるまでの期間は。
【ChatGPTの回答内容】

Chromeウェブストアで拡張機能を公開する場合、審査期間は通常数時間から
数日程度となっていますが、多くの場合、1週間程度かかることもあります。

また、承認されるまでの期間は、拡張機能の内容やセキュリティ上のリスク
などによって異なります。
例えば、広告ブロッカーなどのセキュリティに関わる機能を持つ拡張機能は、
より厳密な審査を受ける場合があります。

したがって、拡張機能を公開する前に、Chromeウェブストアのポリシーや要件
を確認し、不備や問題点を修正することをお勧めします。
これにより、審査期間が短縮され、スムーズな公開が可能になるでしょう。

エピローグ

今回は、ChatGPTに関連した、Chrome拡張機能を紹介しました、どうでしたか？
次回は、ChatGPTの大規模言語学習モデル「GPT3.5」のAPIをGASで利用してみます。
また、直接、GPT3.5のAPIも叩いてみるつもりです。

著者：志村佳昭（株式会社トリニタス　技術顧問）

BLOG