はじめに
executeScriptメソッドが非常にシンプルで、使いやすいため、ブログでyoutube動画を埋め込んだ時に利用しています。
このメソッドはChrome.scripting名前空間にあるexecuteScriptです。
ここでは、最もシンプルなコード例を記述しています。
実行例
以下の画面は、yahoo!JAPANページで、executeScriptSampleプラグインを実行した例です。画面中央に、console.log()で表示した文字列が表示されています。
右端には、「VM1149:34」とありますが、このファイルをクリックして表示してみます。
VM1148の表示内容
切り張りをしているため、見ずらいですが、ご容赦ください。
これは、デバッガーで表示したVM1149のスクリプトです。このコードがexecuteScriptコードです。コメントがほとんどですが、実行コードはconsole.log()です。
コメントに記述しましたが、見ずらいため、以下に示します。
/******************************************************************************
*executeScriptSampleプラグイン
*sample_background.js
*
*
******************************************************************************/
//リスナーを登録すると、以後は、アクションがあるごとにこの処理を実行
//引数は、targetとfilesのオブジェクト
chrome.action.onClicked.addListener(
async (tab) => {
console.log("これは、executeScriptSampleプラグインです。");
//アクティブタブのすべてのframeに対して、スクリプトを実行
await chrome.scripting.executeScript({
target : {tabId : tab.id, allFrames : false},
args: [],
//実際に実行するexcuteScriptコード
//
func: () => {
/**********************************************************
//以下のコードは、ブラウザーのアドレスバーの右横にあるameblojimdo
//プラグインボタンをクリックすると実行するイベントリスナーです。
//ここで、アクティブタブでexecuteScript()を実行する関数を定義して
//います。定義している場所は、プラグインのbacjground.jsです。
//func: () => {...}部分が実際に実行するコードです。
chrome.action.onClicked.addListener(
async (tab) => {
console.log("これは、ameblojimdoプラグインです。");
//アクティブタブのすべてのframeに対して、executeTestスクリプトを実行
await chrome.scripting.executeScript({
target : {tabId : tab.id, allFrames : false},
args: [],
//実際に実行するexcuteScriptコード
//
func: () => {
//このコードはアクティブのタブのページタイトルを取得して、
//表示します。
//このページのドキュメント(DOM)にアクセスして、
//タイトルを取得
console.log("executeScript Test: "+document.title+" ");
}
});
}
);
*このコードはアクティブのタブのページタイトルを取得して、
*表示します。
*このページのドキュメント(DOM)にアクセスして、
*タイトルを取得
********************************************************/
console.log("executeScript Test: "+document.title+" ");
}
});
}
);
このコードについて
actionイベントリスナーの定義
executeScriptの定義
このメソッドは、いくつかの引数を持っています。
(1) target : {tabId : tab.id, allFrames : false},
この例では、tabIdとallFramesがありますが、今回は、フレームは使いませんので、falseにしています。tabIdはアクティブのタブのIdです。
(2) args:[],
今回は、引数は使いません。
(3) func:()=>{....}
これが、実際のインジェクションスクリプトです。
func: ()=>{..}コードについて
ここで、定義している実行コードは、console.log()だけです。
manifest.json
{
"manifest_version": 3,
"name": "executeScriptSampleプラグイン",
"version": "1.0",
"description": "executeScriptをテストするプラグインです。",
"background": {
"service_worker":"sample_background.js",
"type": "module"
},
"externally_connectable": {
"matches": ["https://*/*"
]
},
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; "
},
"content_scripts": [{
"matches": ["https://*/*"],
"js": ["jquery.js","jquery-ui.js","sample_content.js"],
"css": ["jquery-ui.css"]
}],
"permissions": [
"webNavigation",
"scripting",
"activeTab",
"tabs"
],
"action": {
"default_title": "executeScriptSampleプラグイン",
"default_icon":{
"19": "yy19plus.png",
"96": "jimdo96.png",
"128": "128jimdo_repeat.png"
}
},
"host_permissions": [
"<all_urls>"
]
}
プラグインのダウンロード
ダウンロード
ここで、パソコンのダウンロードフォルダー(任意)にダウンロードできます。
任意のフォルダーに解凍して、chromeブラウザーの拡張機能にインストールすると使用できます。なお、このプラグインは無料ですので、改変も自由です。
あとがき
説明が大雑把ですが、追々、追加修正したいと思います。
非常にシンプルですが、executeScriptを実際に実行してみたいと思われた場合にご利用ください。