拡張機能の導入

このページの末尾にあるzipファイルをダウンロードし、展開する。chromeで「拡張機能を管理」を開き「パッケージ化されていない拡張機能を読み込む」をクリック。先ほど展開したフォルダの中のgptchanを選択。ウェブページを開くとずんだもんが表示されます。が、動きません。

APIキーの入手

コンソールを開くとinvalid_api_keyとか書いてます。APIキーが必要なのでopenaiのAPIキーのページを開き、Create new secret keyで出てきた秘密鍵をコピー。gptchanフォルダのcontent.jsを開き、167行目の<YOUR_API_KEY>をさっきコピーした秘密鍵で置き換えて保存。拡張機能を再読み込みし、ウェブページをリロードすると、しゃべりません。

CORSエラーを回避

コンソールを見ると「https://api.su-shiki.com...へのアクセスがブロックされたよ」みたいなエラーが書いてあります。これはこことかここに書いてあるように安全のために接続が制限されています。これを回避するためにgptchanフォルダの中をいじっていきます。

manifest.jsonに以下のように要素を追加します。

{
    ...,
    "background": {
        "service_worker":"background.js"
    }
}

background.jsを作成し、以下のように記述します。

chrome.runtime.onMessage.addListener((message,sender,sendResponse)=>{
  let key = "";
  fetch(
    `https://api.su-shiki.com/v2/voicevox/audio/?text=${message.answer}&key=${key}&speaker=1`,
  {
    method:"POST",
    headers:{
      "Content-Type":"application/json",
    }
  }).then(resp=>{
    return resp.arrayBuffer();
  }).then(ab=>{
    const dataString = JSON.stringify(Array.from(new Uint8Array(ab)));
    sendResponse(dataString);
  })
  return true;
})

content.jsのplayVoice()関数を以下のように変更します。

function playVoice(answer, funcAfterPlay) {
  chrome.runtime.sendMessage(
    {answer:answer},
    (dataString)=>{
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      audioContext.decodeAudioData(new Uint8Array(JSON.parse(dataString)).buffer, function (buffer) {
        let source = audioContext.createBufferSource();
        source.buffer = buffer;
        source.connect(audioContext.destination);
        source.start();
      });
    funcAfterPlay();
    }
  )
}

拡張機能を再読み込みしページをリロードすると、しゃべりません。

APIキーの入手（二回目）

voicevox apiを使うのにもAPIキーが必要です。にアクセスし、手順に従ってapiキーを生成してコピーします。background.jsの2行目の""の中にapiキーをペーストし保存します。拡張機能を再読み込みし、ページをリロード。しばらく待つとずんだもんがしゃべりだします。

それでもしゃべらなかったら

コンソールを開いて'The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.'とか出るならずんだもんの下の箱になんかいれればしゃべりだします。