chrome.scripting.executeScriptのコールバックとパラメータの整理

Chromeの拡張機能っていいよね。

これまで便利な拡張機能をインストールして使っていたけど、意外と簡単に作れることを知りました。

自分だけが必要な拡張機能をhtmlとjsで実装できるのがとても良く、何個か作りました。

ただネットにはまだあまり有益な開発情報が出回っておらず、公式のドキュメントをみつつ動作確認したところをまとめておく。

今回は、chrome.scripting.executeScriptについて。

私が作った拡張機能はGithubでOSSとして公開しているからソースコードみたほうが早いかも。

WordPress更新してからCodeブロックがひどい事になっているので特にです。

chrome.scripting.executeScriptとchrome.scripting API

chrome.scripting.executeScriptは任意の関数をWebサイト上で実行させる関数です。

chrome.scripting APIから呼び出せます。

chrome.scripting APIは、Web サイトに JavaScript と CSS を注入することができます。

chrome.scripting API を使用することで、拡張機能が実行時に判断することができます。

scripting APIを使用するには権限を付与する必要があります。

具体的には、マニフェストファイルに "manifest_version" を 3 以降で指定し、"scripting" 権限を含める必要があります。 version3である点に注意してください。まあ今から作る人はmanifest_versionは必ず3にするべきです。

manifest.jsonのpermissionで下記のようにscriptingを追加します。

{
  "name": "VolaStocker",
  "manifest_version": 3,
  "permissions": &#91;
    "scripting"
  ],
  ...
}

{

"name": "VolaStocker",

"manifest_version": 3,

"permissions": [

"scripting"

...

}

chrome.scripting.executeScriptの実行例

まず公式のドキュメントでは関数は下記のように記載されています。

chrome.scripting.executeScript(
  injection: ScriptInjection,
  callback?: function,
)

chrome.scripting.executeScript(

injection: ScriptInjection,

callback?: function,

)

記載はこれだけで、公式にも実行例はあるんだけど、callbackのサンプルがなかっり動作させるまで意外と大変。

なので実際に動作するソースコードを出します。

下記です。

    const tab = await getCurrentTab();
    await chrome.scripting.executeScript(
        {
          target: { tabId: tab.id },
          func: parseHtml,
          args: [item ]
        },
        buildElement
    )

const tab = await getCurrentTab();

await chrome.scripting.executeScript(

{

target: { tabId: tab.id },

func: parseHtml,

args: [item ]

buildElement

)

getCurrentTabは拡張機能ボタンを押した際に開いているタブのidを取得する関数です。

parseHtmlはHTMLを処理する関数で、戻り値があります。

buildElementはその結果からオブジェクトを生成する関数です。

ここからわかると思うけど、executeScriptは第一引数にオブジェクト形式の実行情報を渡し、第二引数にコールバックを渡します。第一引数の実行は関数だけでなくファイルを指定することもできます。

executeScriptのコールバックについて

executeScriptのコールバックについて公式ではinjectionResultが返ると記載されています。

(results: InjectionResult&#91;]) =&gt; void

1	(results: InjectionResult[]) => void

コールバックに渡ってくるのは配列ですが実行しないと全くわからん。

parseHtml関数の戻り値は、buildElementで受け取ることができます。配列のインデックス0に格納されています。

そのまま戻り値が入っているわけではなく、要素のなかのresultプロパティに入っているので実際に取得するためには注意が必要です。

コードだとこんな感じ。

function buildElement(result) {
    let item = result&#91;0].result; // &lt;= ここ
    pushStack(JSON.parse(item));
    rebuildItems();
}

function buildElement(result) {

let item = result[0].result; // <= ここ

pushStack(JSON.parse(item));

rebuildItems();

}

コールバックのところは公式にも見つからなかったので書き溜め。

じゃあね〜〜〜。