chrome.scripting.executeScript 関数で実行した関数の結果が undefined になってしまう

前提

Chrome Extention（拡張機能）で chrome.scripting.executeScript 関数で実行した関数の結果が undefined になってしまう。

実現したいこと

chrome.scripting.executeScript 関数で別の関数からの戻り値を取得したい。

※ 最終的な目的として、chromeのアクティブなタブ内の、動的に変化する要素をjavascriptでクリックするなどの操作を自動化したいと考えています。
executeScript 関数でなくても上記の目的を実現できるものがあれば、何を使えばいいかだけでも良いのでご教示いただきたいです。

発生している問題・エラーメッセージ

background.js:28 Cannot read properties of undefined (reading '0')

background.js:25行目の console.log で例外が発生しています。
res[0].result は myFunction の戻り値「1234」が入る認識なのですが、実動作は「undefined」となっているようです。

該当のソースコード

background.js

javascript
1console.log('background.js');
2excute_script_test()
3///////////////////////////////////////////////////
4function myFunction() {
5    console.log('myFunction')
6    return 1234;
7}
8
9function excute_script_test(){
10    try{
11        console.log('excute_script_back1 begin')
12        chrome.tabs.query({ active: true }, function (tabs) {
13            let tab = tabs[0];
14            console.log('tab.id = ' + tab.id);
15            try{
16                chrome.scripting.executeScript(
17                    {
18                        target: { tabId: tab.id },
19                        function: myFunction
20                    },
21                    (res) => {
22                        try{
23                            console.log('excute_script_back1 result');
24                            console.log(res[0].result)
25                        } catch(e){
26                            console.log('result ERROR:')
27                            console.log(e.message);
28                        }
29                });
30            } catch(e){
31                console.log('chrome.tabs.query ERROR:')
32                console.log(e.message);
33            }
34        });
35    } catch(e){
36        console.log('excute_script_back1 ERROR:');
37        console.log(e);
38    }
39    console.log('excute_script_back1 end');
40}

popup.html

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Link Maker</title>
6  </head>
7  <body>
8    <script src="js/lib/jquery-3.6.0.min.js"></script>
9    <div id="main_contents">
10      <p>test_popup</p>
11    </div>
12  </body>
13</html>

manifest.json

json
1{
2    "name": "excute scripting test",  
3    "version": "0.0.1",
4    "description": "excute scripting test.",
5    "action": {
6      "default_icon": {"16" : "icon_16x16.png"},
7      "default_title": "excute scripting test",  
8      "default_popup": "popup.html"
9    },
10    "icons": {
11      "16" : "icon_16x16.png",
12      "48" : "icon_48x48.png",
13      "128": "icon_128x128.png"
14    },  
15    "permissions": ["activeTab","tabs","storage","unlimitedStorage","scripting"],
16    "author": "watashi", 
17    "manifest_version":3  ,
18    "background": {
19      "service_worker": "background.js"
20    },
21    "content_scripts": [
22      {
23        "matches": ["<all_urls>"],
24        "js": ["js/popup.js"]
25      }
26    ]
27}

実行結果（DevToolsメッセージ）

background.js:1
1background.js:12 excute_script_back1 begin
2background.js:40 excute_script_back1 end
3background.js:15 tab.id = 1381359488
4background.js:24 excute_script_back1 result
5background.js:27 result ERROR:
6background.js:28 Cannot read properties of undefined (reading '0')

試したこと

パッケージの削除→インストールを行いましたが、うまくいきませんでした。
検索して色々なサイトを拝見したのですが、自己解決できず、、、すみませんがよろしくお願いします。

補足情報（FW/ツールのバージョンなど）

Windows10
Chrome Extention（拡張機能）
Google Chrome バージョン: 105.0.5195.102（Official Build）（64 ビット）

　Chromeのバージョンは１つまえのもの（104.0.5112.102）でもNGでした。

itagagaki

2022/09/05 23:51

まず function: myFunction これ合ってますか？ func: myFunction ではないでしょうか？

guigui55

2022/09/06 22:19

コメントありがとうございます。ご指摘の通り「func:myFunction」でした（API Reference に記載がありました）。上記の修正をしましたが、結果は変わらずでした。 API Reference https://developer.chrome.com/docs/extensions/reference/scripting/

行動規範の内容に同意します

回答1件

ベストアンサー

tab = tabs[0];というのがおそらく原因です。tabs[0]だけだとChromeExtensionからの参照であることを指定できていません。
調べたところtab = chrome.tabs[0];でいけそうです。

申し訳ありません。勘違いでした。コールバック関数の引数であるresにmyFunctionの戻り値が代入されていないようです。

投稿2022/09/06 10:46

編集2022/09/07 18:47

退会済みユーザー

総合スコア0

guigui55

2022/09/07 15:42

ご回答ありがとうございます。 let tab = chrome.tabs[0]; と置き換えてみましたが、以下のようなエラーとなってしましました。エラー： Error handling response: TypeError: Cannot read properties of undefined (reading 'id') background.js:15:43 以下のコードを上記と同じブロック内で実行してみましたが、 chrome.tabsは何かのオブジェクトとして取得できていますが、chrome.tabs[0] は undefined となっているようです。 console.log(typeof chrome.tabs) // object console.log(typeof chrome.tabs[0]) // undefined こちらでも調べてみますが、何か情報がありましたら、お手数ですが引き続きよろしくお願いします。

退会済みユーザー

2022/09/07 18:44 編集

申し訳ありません。エラー箇所を勘違いしてました。恐縮なのですが、変更前の状態に修正していただけると幸甚です。

退会済みユーザー

2022/09/07 18:05

本当に申し訳ありませんでした。一応エラーについて調べてみます。

guigui55

2022/09/08 22:12

いえいえ、とんでもありません、ご対応ありがとうございます！「resにmyFunctionの戻り値が代入されていない」とのことですが、以下のように確認してみるとおっしゃる通りでした。　　console.log(res) //undefined 　　console.log(typeof res) //undefined 恐縮ですが、どのようにしたらmyFunctionの戻り値を取得できますでしょうか？

guigui55

2022/09/09 22:36

以下の修正(改善)をすることで chrome.scripting.executeScript が動作することを確認しました。 1. chrome.scripting.executeScript が実行されるときの URL を変更拡張機能の管理画面と新しいタブを開いたときのGoogleトップページで本件のコードbackground.jsを実行すると、「Unchecked runtime.lastError: Cannot access a chrome:// URL」が発生していました。本件のコードでは拡張機能でパッケージの更新ボタンを押したときに1度だけ実行するものでしたが、このままだと上記のエラーとなってそれ以降は実行されません。「chrome:// URL」以外なら何でもよいと思うのですが、以下のようにページが読み込まれたときに実行するようにしました。 chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) { console.log("tabs.onUpdated.addListener"); try{ excute_script_test(); return; } catch(e){ console.log(e.message) } }) 2. manifest.jsonに下記の値を追加する。 "host_permissions": ["http://*/*", "https://*/*"] 上記修正 1 のままだとアクセスエラーとなってしまうので、上記を追記します。 Unchecked runtime.lastError: Cannot access contents of url "https://www.youtube.com/". Extension manifest must request permission to access this host. 3. 上記修正に合わせて実行手順の変更以下の★を手順に追加しました。（今までは chrome:// URL の中でしか実行していませんでした。）　[手順] ・拡張機能のパッケージ更新ボタンをクリック　・右上対象の機能をクリックしてpopup.htmlを表示＞右クリックコンテキストメニュー「検証」をクリック→DevToolsが表示される　・任意のURLへ移動★ 　・コンソールタブ > メッセージで実行結果を確認実行結果 tabs.onUpdated.addListener background.js:11 excute_script_back1 begin background.js:41 excute_script_back1 end background.js:14 tab.id = 1381362366 background.js:23 excute_script_back1 result background.js:26 1234 新しいタブを開いたときのGoogleトップページが「chrome:// URL」ではないと思い込んでおりました。また、表示されていたエラーについて関連がないと思い、記載していなかったため適切な回答が得られなかったかもしれません。今後質問するときは注意しようと思います。ご協力くださった方々ありがとうございました。

退会済みユーザー

2022/09/10 06:29

解決されたんですね！おめでとうございます！今回私はお役に立てなかったので、次はお役に立てるよう頑張ります！

行動規範の内容に同意します