【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については以下のサイトが参考になった
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などは使えないみたい
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と記述することで「バックグラウンドページ」から「イベントページ」と呼び名が変わる
詳しい説明は以下のサイトに書いてあった
chromeの裏で動くからここにconsole.logを書いても確認できない
確認方法は「chrome://extensions/」で拡張機能をインストールして「バックグラウンド ページ」というリンクの先
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の取得がタブを切り替えても変わらず、最後に読み込んだタブの値を取得した状態で、ページを読み込み直す必要性があるのは改善点かな