Chrome 拡張機能で”executeScript”で実行した “content.js” がDevToolsに表示されない原因

Google Chromeの拡張機能で “executeScript” で指定したファイルの”debugger” などが機能しないことや、開発者ツールに表示されない場合の対処法について備忘録的に投稿しておきます。

“executeScript” でファイルを実行

例えば、こんな感じで background.js から別のファイルを呼び出します。

await chrome.scripting.executeScript({
  target: { tabId: tab.id },
  files: ["content.js"]
});
  

実行すると、指定した .js 内のスクリプトが ServiceWorker 外で実行されます。

実際、コンテンツ側にスクリプトを注入できるので便利ですが、このままでは開発者ツールに表示されません。

manifest.json にも追加

実際に動作するので、開発者ツールを使ってデバッグ作業をしてみると［Sources］タブに表示されません。

結論を先に書くと、manifest.json に “content_script” の追加が必要になります。

"content_scripts": [
    {
        "matches": [
            "<all_urls>"
        ],
        "js": [
            "content.js"
        ],
        "run_at": "document_start",
        "all_frames": true
    }
],

manifest.json で実行する・しないを設定するものだと考えていましたが、開発者ツールへの表示にも影響があるようです。

開発者ツールに “executeScript” で指定したスクリプトファイルが表示されない場合には manifest.json にヒントが隠されているかもしれません。

まとめ

今回は、Google Chromeの拡張機能で “executeScript” で指定したファイルの”debugger” などが機能しないことや、開発者ツールに表示されない場合の対処法について書きました。

“executeScript” を使うと別のスクリプトファイルを指定して実行させることが可能ですが、開発者ツールで表示するには “manifest.json” への追加が必要です。

Google Chromeの拡張機能で 開発者ツールに “executeScript” で指定したファイルが表示されない人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。