Chrome拡張機能から現在開いているページのdocumentを取得する方法

Question

実現したいこと

Chrome拡張機能のJavaScriptから、Chromeで開いているWebページの
document変数を取得する。

発生している問題・分からないこと

Chrome拡張機能で、JavaScriptが動くことは確認できました。
例として、下のコードを実行すると
拡張機能のpopup.htmlのタイトルが取得できます。
しかし、popup.htmlではなく、現在Chromeで開いているページのタイトルを
取得したいのです。
chrome.tab とか、ググったらありましたが、よくわかりませんでした。
どうすれば、拡張機能から現在開いているページのタイトルを取得できるのでしょうか？

該当のソースコード

const elmNote = document.getElementById("note");
const elmSave = document.getElementById("save");

elmSave.onclick = () => {
  'use strict'
  chrome.tabs.query({active: true, lastFocusedWindow: true},tabs => {
    //  拡張機能のHTMLが読み込まれる
    console.log(document.title);
  })
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

拡張機能に設定したHTMLのタイトルは取得できるが、
現在Chromeで開いているWebページのタイトルは取得できない。

補足

特になし

質問後調べました

https://qiita.com/plumfield56/items/99f5cfc1bf5fd03e8040
ここを参考にしました。

const elmNote = document.getElementById("note");
const elmSave = document.getElementById("save");

'use strict'

{
  chrome.tabs.query({}, tabs => {
    for(let i=0; i<tabs.length; i++){
      console.log(tabs[i].title);
    }
  });
}

調べた結果、上のようなソースコードになりました。
console.log でログにタイトルが出力されると思いましたが、
ログには undefined が表示されます。
tab にアクセスするために json に permission に tabs を追加しましたが、
それでもログには、undefined が表示されます。

どうすればいいタイトルが表示されるようになりますか？

Answer 1

タイトルだけなら、tabs[0].title で取得できると思います。

それ以外のタブの document に関わる情報を得るには、content script を用意して通信する必要があります。

Comments

[yukkuri_55]

elmSave.onclick = () => {
'use strict'
chrome.tabs.query({active: true, lastFocusedWindow: true},tabs => {
// 拡張機能のHTMLが読み込まれる
console.log(chrome.tabs.document.title);
})
}
を
console.log( chrome.tabs.title);
console.log( chrome.tabs[0].title );
console.log( tabs.title );
console.log( tabs[0].title );
console.log(chrome.tabs.document.title);
など複数試しましたが、うまくいきませんでした。

タイトルだけではなく、document を取得して、getElementByName()関数などを
使用したいと考えています。

取得するのはアクティブなタブひとつだけでいいです。

どのようなコードになるのか、全体図を教えていただけませんでしょうか？

[int32_t]

> 全体図を教えていただけませんでしょうか？

けっこうな手間なのでお断りします。
ChatGPT や Gemini にお願いしたら書いてくれるかもしれません。