シンプルなexecuteScriptのサンプルです。

# はじめに
executeScriptメソッドが非常にシンプルで、使いやすいため、ブログでyoutube動画を埋め込んだ時に利用しています。
このメソッドはChrome.scripting名前空間にあるexecuteScriptです。
ここでは、最もシンプルなコード例を記述しています。

# 実行例
以下の画面は、yahoo!JAPANページで、executeScriptSampleプラグインを実行した例です。画面中央に、console.log()で表示した文字列が表示されています。
右端には、「VM1149:34」とありますが、このファイルをクリックして表示してみます。

![executeScriptSample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/8fe8c552-4f11-f7c3-33fb-8fd9835110c5.png)

# VM1148の表示内容
切り張りをしているため、見ずらいですが、ご容赦ください。
![executeScriptSample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/9fa6c5f3-81e5-56ed-3309-cbe8a6a3df1f.png)
![executeScriptSample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/116b20e2-3497-b10a-d436-38125d50715f.png)
![executeScriptSample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/df23afca-69ac-d934-0e1d-15d767965937.png)
これは、デバッガーで表示したVM1149のスクリプトです。このコードがexecuteScriptコードです。コメントがほとんどですが、実行コードはconsole.log()です。
コメントに記述しましたが、見ずらいため、以下に示します。

``` background.js 
/******************************************************************************
 *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.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>"
  ]

}
```
# プラグインのダウンロード
[ダウンロード](https://favorite.tecoyan.net/slim/zip/executeScriptSample.zip)
ここで、パソコンのダウンロードフォルダー(任意)にダウンロードできます。
任意のフォルダーに解凍して、chromeブラウザーの拡張機能にインストールすると使用できます。なお、このプラグインは無料ですので、改変も自由です。




# あとがき
説明が大雑把ですが、追々、追加修正したいと思います。
非常にシンプルですが、executeScriptを実際に実行してみたいと思われた場合にご利用ください。