web関連

【google拡張機能】拡張機能を作る時の値の受け渡しについて

2021/01/29

プログラミング

google関連

サイトタイトルとサイトurlを取得するgoogleの拡張機能を作ったときに値の受け渡し方法がよくわからなくて悩んだので備忘録

ファイルの説明

今回の拡張機能を使う上で必要な機能としてざっくりと下記のファイルがある

src/
　├ manifest.json(設定ファイル)
　├ content_script.js
　├ background.js
　├ popup.html
　├ popup.js
　└ jquery-3.5.1.min.js

manifest.json…設定ファイルでここでそれぞれのファイルの役割を決める
content_script.js…開いているwebページに対するjsを書くところ
background.js…content_script.jsで取得した値をpopup系のファイルに受け渡すための記述を書くところ
popup.html/js…拡張機能のポップアップ周りについて書くところ

設定ファイルmanifest.jsonについて

{
  "name": "拡張機能のタイトル",
  "description": "拡張機能の説明文",
  "version": "1.0.0",
  "manifest_version": 2,
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["jquery-3.5.1.min.js","content_script.js"]
  }],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "",
    "default_popup": "popup.html"
  }
}

重要なのはbackground、browser_action、content_scriptsでこれらの意味はさっき説明したファイルの通り

manifest_versionは少し前の記事を参考に作ったので「２」になっているけど、現在はManifest V3があるっぽい
出たばっかりだから今回はバージョン「2」で書く

manifest.jsonについては以下のサイトが参考になった

Link：Chrome 拡張機能のマニフェストファイルの書き方 - Qiita

google拡張機能を作るうえでの値の受け渡しについて

今回の目的なんだけど、値の受け渡しができることを確認するための備忘録なので

開いているwebサイトのtitleタグとURLの取得
拡張機能のポップアップのinput要素にテキストを入力し送信したら開いているwebサイトにアラートを出す

の二つの機能を実装するためにコードを書いてみようと思う

content_script.js

主に表示されているwebサイトに挿入するjs

// titleタグとURLを取得してbackground.jsに送る
chrome.runtime.sendMessage({
    title: document.title,
    url: location.href
});

// popup.htmlのinput要素に書いたテキストを取得
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  alert(msg.send);//送られたテキストをアラートで表示
});

使えるAPIが限られているみたいで、popup.jsで使っているchrome.tabs.queryなどは使えないみたい

Link：コンテンツスクリプト - Mozilla | MDN

Memo：使えるAPIが書いてある

background.js

Chromeを起動している間ずっと動いてるスクリプトらしい

var textTitle = '';
var textUrl = '';
// content_script.jsで取得したtitleタグとURLを取得して変数に代入
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        textTitle = request.title;
        textUrl = request.url;
    }
);

manifest.jsonに"persistent": falseと記述することで「バックグラウンドページ」から「イベントページ」と呼び名が変わる

詳しい説明は以下のサイトに書いてあった

Link：Chrome Extension の作り方 (その4: Event Page / Background Page)

Memo：右クリックででてくるメニューとかに機能を追加できたりするみたい

chromeの裏で動くからここにconsole.logを書いても確認できない
確認方法は「chrome://extensions/」で拡張機能をインストールして「バックグラウンドページ」というリンクの先

content_script.jsで制限されている制約されているAPIを使う時などに重宝するみたい

popup.html

拡張機能を押した時のポップアップの表示

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <script src="jquery-3.5.1.min.js"></script>
    <style>
      body {
        width: 200px;
      }
      .box{
        border: solid 1px #ccc;
        padding: 10px;
        word-wrap: break-word;
      }
      .box+.box{
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="textView" class="box"></div>
    <div id="textUrl" class="box"></div>
    <input id="input" type="text" value="送信する文字">
    <button id="submit">送信</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

拡張機能を押した時のポップアップの表示周りのjs

// background.jsからtitleタグとURLを取得
var textTitle = chrome.extension.getBackgroundPage().textTitle;
var textUrl = chrome.extension.getBackgroundPage().textUrl;
// 取得した値をpopup.htmlの該当箇所に挿入
var titleElm = document.getElementById('textView');
var urlElm = document.getElementById('textUrl');
// 取得した値をpopup.htmlの該当箇所に挿入
titleElm.textContent = textTitle;
urlElm.textContent = textUrl;


function submit() {
  var submitText = document.getElementById("input").value;// 入力したテキストを取得
  // 取得した値をcontent_script.jsで受けれるように送信
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {
      send: submitText
    });
  });
}
document.getElementById("submit").addEventListener("click", submit);

popup.htmlのjsファイル
ここにjavascriptの記述を書いてもポップアップのみに反映されるため、content_script.jsに値を渡す必要がある

ポップアップを右クリックして「検証」を押すとデバックできる

終わりに

とりあえずは動くことは確認できてる
ただ、TitleタグとURLの取得がタブを切り替えても変わらず、最後に読み込んだタブの値を取得した状態で、ページを読み込み直す必要性があるのは改善点かな

jquery-3.5.1.min.jsファイル用意したんだけど使わなかった