Chrome拡張機能：新しいタブを作成する前に情報を収集していますか？

Question

私はブラウザアクションのヘッダとしてスクリプト（popup.js）を読み込むpopup.htmlを持っています。 これは、サイトへの呼び出しを行い、必要な情報を取得します。

XMLHTTPRequestsを使用して必要な情報をすべて取得し、popup.jsの変数に保存しました。

今、私は新しいタブを作成し、ウェブページを読み込み、保存した情報を使ってフォームに記入します。

chrome.tabs.create({ 'url': "https://site.html" }); 

この行はpopup.js

である。これは、すぐに所望の部位に私を取るが、私は以前に取得したすべての情報を削除するようです。タブを作る前に私が欲しい情報を私に告げることさえありません。特定のURLを持つタブを作成し、popup.jsの中にフォームを埋め込むために以前にpopup.jsで収集した情報を使用する方法私の論理に欠陥がありますか？何かアドバイスありがとうございました。

更新：これは理にかなっています。

これは、フォームがあるsite.html内部の私のpopup.js

function do(){ 
    var xhr = new XMLHttpRequest(); 
    xhr.open("Get", Url); 
    xhr.send(); 
    xhr.addEventListener("readystatechange", function() { 
     if (this.readyState === 4) { 
      var dogName = this.responseText; 
      alert(dogName) 
} 
do(); 
chrome.tabs.create({ 'url': "site.html" }); 

です。私はその形にこれをすることでした。

document.getElementById('form').getElementsByTagName('input')[0].value = dogName; 
document.getElementById("btnOK").click() 

しかしライン

chrome.tabs.create({ 'url': "https://site.html" }); 

はそれだけで何かを警告するdo()を実行してそのページに私を取るとしませんが、存在する場合、それは何かを文句を言いません。

作成行を削除することによって、拡張機能は私に必要な情報を通知します。

Answer 1

ポップアップの代わりにevent pageを使用する必要があります。イベントページは長時間実行されるスクリプトで、オンデマンドでデータを取得できます。開いているタブもコンテンツスクリプトを実行する必要があります。このコンテンツスクリプトは、イベントページにメッセージを送信してXHRデータの取得を取得し、フォームフィールドにデータを適用します。 Content scriptsは、injectedにすることができます。これは、manifest.jsonファイルを使用するか、2番目の引数として渡されるchrome.tabs.create関数で直接行います。

注：以下のコードは、ファイルや構造 はどうあるべきかの近い例です。これはテストされておらず、解決の一般的なアイデアは です。

manifest.jsonを

"content_scripts": [{ 
    "matches": ["*://eample.com/formpage.html"], 
    "js":   ["content.js"], 
    "run_at":  "document_idle" 
    }], 

OR

ポップアップ。JS

chrome.tabs.create({ 'url': "https://example.com/formpage.html" }, function(tab1) { 
    chrome.tabs.executeScript(tab1.id, {file: 'content.js', run_at}); 
}); 

---

content.js

chrome.runtime.sendMessage({data: "dogName"}, function(response) { 
    var dogName = response.data; 
    document.getElementById('form').getElementsByTagName('input')[0].value = dogName; 
}); 

---

event.js

function getDogName(callback){ 
    var xhr = new XMLHttpRequest(); 
    xhr.open("Get", Url); 
    xhr.send(); 
    xhr.addEventListener("readystatechange", function() { 
    if (this.readyState === 4) { 
     var = dogName = this.responseText; 
     callback({data: dogName}); 
    } 
    }); 
} 
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.data === "dogName") { 
     getDogName(sendResponse); 
     return true; 
    } 
}); 

あなたがここに拡張通信の詳細を見つけることができます：Message Passing。