Chrome 拡張機能でモールス符号を再生する（２）

Chrome 拡張機能を使ってウェブページのテキストをモールス符号に変換して、その場で再生できるか試しています。前回までの記事でモールス符号を再生できることまで確認しました。

ji1jdi.hatenablog.com

この時点ではまだ自分でテキストを入力するか、ページからコピー&ペーストするしかないので面倒です。たとえば、選択された範囲のテキストがそのまま拡張機能に取り込まれるようにすると楽になりそうです。今回はこれにチャレンジしてみます。

Chrome 拡張機能については次のドキュメントが公開されています。

developer.chrome.com

選択された範囲はdocument.getSelection()で取得できますが、これは文字列を選択しているページのdocumentではありません。ポップアップ画面からは現在表示されているページを直接操作できないため、メッセージングを用いてページとやり取りします。

ポップアップ画面からは次のように現在アクティブなタブを取得します。このタブにメッセージを送信して選択されたテキストを返すように依頼します。

  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })

  chrome.tabs.sendMessage(tab.id, { type: "GET_SELECTED_TEXT" })
    .then(res => {
      text.value = res.value
    })
    .catch(e => {
      console.log(e)
    })

メッセージを受け取ったページの方は次のようにして選択されたテキストを返します。

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GET_SELECTED_TEXT") {
    sendResponse({
      value: document.getSelection().toString()
    })
  }

  return true
})

これをcontent.jsというファイルに保存し、ページが表示されたときにインジェクトされるようにします。manifest.json のcontent_scriptsに次のように設定します。

  "content_scripts": [
    {
      "js": ["assets/scripts/content.js"],
      "matches": [
        "https://*/*",
        "http://*/*"
      ]
    }
  ]