ポップアップメニューを開いて現在表示中のWebページを操作する方法を
ご紹介します。
ツールバーのアイコンをクリックしてポップアップメニューを表示する方法は、
[Chrome拡張] ポップアップメニューを表示する方法をご覧ください。
新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
こちらがそのChrome拡張の記事です。ご興味があれば
用意するファイル
root/
├ manifest.json
├ popup.html
├ js/
│ ├ popup.js
│ └ jquery-3.5.1.min.js
└ img/
├ icon32.png
└ icon48.png
popup.html
ポップアップメニューのソースです。
ボタンだけ配置しています。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popup.js"></script>
</head>
<body>
<button id="btn" style="min-width: 160px;">ボタン</button>
</body>
</html>
popup.js
popup.htmlのbutton#btnを押したときに実行する処理を記述します。
1.chrome.tabs.query
現在のウィンドウ(currentWindow:true)で表示中のタブ(active:true)を取得します。
2.chrome.scripting.executeScript
そのタブに対して処理を実行します。
function()は対象タブ(Webページ)内で実行されますので、
ここではdomで要素を操作しています。
jQueryなどのライブラリを使いたい場合は別の方法で行います。
$(function(){
$(document).on("click","#btn",function(){
chrome.tabs.query({ active: true, currentWindow: true },function(tab){
chrome.scripting.executeScript({
target:{tabId: tab[0].id},
function: function(){
//Qiita記事の背景色を変えています
document.querySelector("div.style-yhx9lg").style.backgroundColor="#fbb";
}
});
});
});
});
参考までに。。。
上記コードと同じ処理になりますが、非同期関数を使用すると以下のようになります。
ボタンを押して呼ばれる関数をasyncの非同期関数宣言をして、
awaitキーワードをつけたchrome.tabs.queryが値を返してくるまで待っています。
ChromeDeveopersのドキュメントはasyncの利用を前提に書いてありますがお好きな方で。
$(function(){
$(document).on("click","#btn",async function(){
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: {tabId: tab.id},
function: function(){
document.querySelector("div.style-yhx9lg").style.backgroundColor="#fbb";
}
});
});
});
manifest.json
permissions
activeTab：アクティブなタブへのアクセス権限
scripting：JavaScript、CSSをWebページに挿入する権限
action
chrome拡張のアイコンをクリックした際に呼び出すHTMLを指定します。
{
"name": "Webページ操作テスト",
"version": "1.00",
"description": "Webページ操作テスト",
"permissions": ["activeTab","scripting"],
"action": {
"default_icon": {
"32": "images/icon32.png"
},
"default_popup": "popup.html"
},
"icons": {
"48": "images/icon48.png"
},
"manifest_version": 3
}
実行結果
1.Qiitaの記事を開いて、Chrome拡張のポップアップメニューを開く
2.ボタンを押すと。。。色が変わった！
おしまい。。
その他のChrome拡張の実装方法
以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[Chrome拡張] ツールバーのアイコンをクリックしてHTMLページを表示する方法
[Chrome拡張] Chrome拡張メニューからページを操作する方法
[Chrome拡張] Webページ(content scripts)からChrome拡張画面へメッセージを送る方法
[Chrome拡張] Chrome拡張画面でタイマー(定期実行処理)を使用する方法
[Chrome拡張] Content Scriptsでタイマー(定期実行処理)を使用する方法
[Chrome拡張] Chrome拡張メニューからWebページを操作する方法
[Chrome拡張] Chrome拡張メニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張] Chrome拡張メニューとWebページでやりとりする方法
[Chrome拡張] Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)
[Chrome拡張] Chrome拡張メニューから開いていないWebページの情報を取得する方法
[Chrome拡張] ポップアップメニューを表示する方法
[Chrome拡張] ポップアップメニューからWebページを操作する方法
[Chrome拡張] ポップアップメニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張] ポップアップメニューからWebページを操作する方法(スタイル変更)
[Chrome拡張] ストレージ(chrome.storage.local)を利用する方法
[Chrome拡張] オプションページを表示する方法