Chrome擴展程序：在創建新選項卡之前推送收集的信息？

Question

所以我有一個popup.html加載一個腳本（popup.js）作爲瀏覽器動作的頭部。 然後這會調用一個站點來獲取必要的信息。

我得到了所有必要的信息使用的XMLHttpRequest，並將其保存到popup.js變量。

現在，我嘗試創建一個新的標籤，加載網頁，然後用我保存填寫表格的信息。

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

這條線路是在popup.js

這需要我迅速所需的網站，但似乎刪除所有我以前獲得的信息。即使我在製作標籤前詢問，它甚至不會提醒我想要的信息。我將如何去創建一個具有特定URL的選項卡，然後使用之前在popup.js中收集的信息填充表單，同時包含在popup.js中？我的邏輯是否有缺陷？非常感謝你的任何建議。

更新：生病編輯這個更有意義。

這是我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" }); 

內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文件或直接使用作爲第二個參數傳入的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。