現在のタブのURLを取得したい

Question

chrome拡張機能において、content scriptから現在のタブのURLを取得したいのですが、できませんでした。

以下に自分がやろうとした方法を載せるので、どこが間違っているのか教えて下さい。または、別のもっと簡単な方法があれば教えて下さい。

// content_script.js
function useURLFunc(){
    // sendMessageは非同期関数なので、awaitで実行終了を待つ。
    let sendMsgFunc = () => {
        return new Promise(resolve => {
            chrome.runtime.sendMessage({greeting: 'url'}, response => {
                resolve(response.farewell);
            });
        });
    };
    // SyntaxError: await is only valid in async function
    let url = await sendMsgFunc();
    
    // 以下、urlを使った処理 
}

useURLFunc();

// event.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.greeting=='url') {
        let queryinfo = {'active': true, 'currentWindow': true};
        chrome.tabs.query(queryinfo, function(tabs) {
            sendResponse({farewell: tabs[0].url});
        });
        return true;
    }
});

Comments

[gouf]

検索してみただけですが; 次のコードに差し替えた場合 何か変化は見られますか? : https://gist.github.com/javiersantos/c3e9ae2adba72e898f99

[matonrin]

現状、event.jsにおけるURLの取得は出来ていて、sendMessage側でもURLを受け取ることは出来ています。問題は、受け取ったURLが変数に入る前にURLを利用する処理に進んでしまうことだと考えています。

このコードについてですが、currentURLはcontent scriptから参照できないので、URLを取得できたか否かに関わらず、状況に変化はないと思います。

現状説明が不足していてすみません。

Answer 1

とりあえずフルで書きました。面倒なのでちゃんとマニフェストまで付けてください。
原因は拡張機能ページでエラー表示されてたと思いますが、await使ってるのにasyncが付いてないからです。
この実装はteratailのトップページだけで機能するマニフェストになってます。

content.js

// content_script.js
async function useURLFunc() {
    let sendMsgFunc = () => {
        return new Promise(resolve => {
            chrome.runtime.sendMessage({ greeting: 'url' }, response => {
                resolve(response.farewell);
            });
        });
    };
    let url = await sendMsgFunc();
    console.log(url + " from ほげ extention!");
}

(async () => {
    await useURLFunc();
})();

event.js

// event.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.greeting=='url') {
        let queryinfo = {'active': true, 'currentWindow': true};
        chrome.tabs.query(queryinfo, function(tabs) {
            sendResponse({farewell: tabs[0].url});
        });
        return true;
    }
});

manifest.json

{
  "manifest_version": 2,
  "name": "ほげ",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "https://teratail.com/"
      ],
      "js": [
        "content.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "event.js"
    ],
    "persistent": false
  },
  "permissions": [
    "tabs"
  ]
}

Comments

[matonrin]

回答ありがとうございます。
asyncは明示的に指定しなければならないんですね。

manifestファイルの内容を記載していなかったせいでお手間を取らせてしまい、すみませんでした。