chrome 拡張機能 新規作成されたタブの操作の仕方

Question

chrome拡張機能で新しい タブを 拡張機能のapi使って開かせるところまではできたのですがその新しく開かれたタブのwindowオブジェクトを操作できなくて困っております。

function searchBooks(info, tab) {
    console.log("AAA")
  
    var query = info.selectionText;
  
    chrome.tabs.create({
        selected: true,
        url: 'https://opac.jp/opac/opac_search.cgi?smode=1'
    });

    chrome.tabs.onUpdated.addListener(function addString(query) {
        console.log(window.document)
        document.getElementById("text_kywd1").innerText = "fuck"
        console.log(query, "am i called")
    })
}

chrome.tabs.onUpdated.addListenerでtabが開かれたあと呼ばれる関数を定義しました。
console.log(window.document)の出力結果を見てみると出力されたのは拡張機能自体のhtmlでした。

どのようにしたら新たに開かれたタブを操作できるのでしょうか。

manifesut.json
```

{
"update_url": "https://clients2.google.com/service/update2/crx",
"name": "Viewer",
"manifest_version": 2,
"description": "Search books throughipac.",
"version": "1.5.6",
"permissions": [
"contextMenus"
],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"background": {
"page": "rightClickSearch.html"
},
"browser_action": {
"default_icon": "icon16.png"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}

background.jsには何も書いておりませんでした。

Comments

[m.ts10806]

タイトルには要件を書いて下さい。 https://teratail.com/help/question-tips#questionTips3-1 タイトルから質問内容が想像できないもの、タイトルと質問内容が食い違っているものはスムーズな回答を得られなくなります。

[m.ts10806]

「質問タイトルには、要件をズバリと書きましょう。」と「質問するときのヒント」にありますが、概要過ぎても良くありません。

Answer 1

回答がつかないみたいなので、考え方だけ。

◇重要
chromeのAPIは引数にcallbackを取るものは非同期処理されます。
Chrome拡張 Overview

---

質問文のコードを踏襲するのでしたら、
1,ContentScript側にchrome.tabs.onUpdated.addListenerではなくchrome.tabs.onCreated.addListenerを書く
2,chrome.tabs.executeScriptを使う。
で出来そうな気がします。

---

個人的なお勧め方法
1,background script側ではchrome.tabs.createの第2引数のcallbackにて、chrome.tabs.sendMessageを呼び出す。

chrome.tabs.create({
    // selectedはDeprecated なので削除
    // https://developer.chrome.com/extensions/tabs#method-create
    url: 'https://opac.jp/opac/opac_search.cgi?smode=1'
},(tab) =>{
    const msg = {};
    chrome.tabs.sendMessage(tab.id, msg, ());
});

2,Content scripts側ではchrome.runtime.onMessage.addListenerchrイベントで
上記メッセージを受信したタイミングで、画面要素の変更を行う。

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log(window.document)
    document.getElementById("text_kywd1").innerText = "piyo";
    console.log("am i called");
    return true;
});

あと問題を再現するための最小限のソース(manifest.jsonやbackground script)を提示して頂けると助かります。

---

manifest.jsonを見ました。

1, chrome.tabsAPIを使うので、manifest.jsonの正しい定義は以下になります。宣言しなくてもAPIはほぼ使えますが、個人的には宣言することをお勧め致します。
manifest.json

    "permissions": [
        "contextMenus", "tabs"
    ],

2,background.js = background pageのJavaScript部分です。
質問文の場合だとrightClickSearch.htmlが該当します。

Comments

[Koyyyyyy]

アドバイスありがとうございます！
リソースが少なくて申し訳ないです。。。
試して見ます！