JavaScript的Chrome擴展 - 創建新的標籤從彈出到內容

Question

在我的擴展popup.js後，我想創建一個新的選項卡併發送消息後發送消息。 content.js必須收聽消息並回答，但它不起作用！我嘗試了很多的解決方案，其他的問題，但沒有成功 在這裏我找到的文件：

{ 
    //Manifest.json 
    "name": "Stampa cedolini", 
    "description": "stampa automatica dei cedolini", 
    "version": "1.0", 
    "permissions": [ 
     "tabs", "http://*/*", "https://*/*" 
    ], 

    "content_scripts": [{ 
    "matches": [ "http://*/*", "https://*/*"], 
    "js": [ "jquery-2.1.3.min.js" ,"content.js"] 
    }], 

    "browser_action": { 
     "default_title": "Scegli la persona.", 
     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
    }, 
    "manifest_version": 2 
} 

popup.js：

function click(e) { 
    var link1 = "http://www.example1.it"; 

var link2 = "http://www.example2.com"; 
if (e.target.id === "pippo") { 
    chrome.tabs.create({ url: link1 }, function(tab) { 
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
      // your code ... 
      chrome.tabs.executeScript({code:"console.log('"+tabs[0].id+"')"}); 
      //chrome.tabs.executeScript({code:"alert("+tabs[0].id+");"}); 
      chrome.tabs.sendMessage(tabs[0].id, {persona: "pippo"}); 
     }); 
    }); 
} else { 
    chrome.tabs.create({ url: link2 }); 
} 
//window.close(); 
} 

document.addEventListener('DOMContentLoaded', function() { 
    var divs = document.querySelectorAll('div'); 
    for (var i = 0; i < divs.length; i++) { 
    divs[i].addEventListener('click', click); 
} 
}); 

和content.js：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    alert("from a content script:" + sender.tab.url); 
    if (request.persona == "pippo") { 
     sendResponse({risp: "ricevuto"}); 
    } 
}); 

控制檯.log（tab.id）在tabs.create回調被打印，但似乎失敗了發送消息 有人可以幫助我？ 謝謝

Answer 1

您裝載的內容腳本默認爲document_idle。

這意味着，當你發送消息時，它還沒有，並且沒有任何東西聽你的消息。

如果您要從代碼創建選項卡，最好以編程方式注入您的內容腳本，而不是依賴清單注入，並使用回調來確保它已完成執行。

chrome.tabs.create({ url: link1 }, function(tab) { 
    // Why do you query, when tab is already given? 
    chrome.tabs.executeScript(tab.id, {file:"jquery-2.1.3.min.js"}, function() { 
    // This executes only after jQuery has been injected and executed 
    chrome.tabs.executeScript(tab.id, {file:"jcontent.js"}, function() { 
     // This executes only after your content script executes 
     chrome.tabs.sendMessage(tab.id, {persona: "pippo"}); 
    }); 
    }); 
}); 

這就是說，你可能要考慮調用後臺腳本，而不是在彈出驗證碼。只要彈出窗口失去焦點，彈出頁面就開始卸載並且代碼可能無法完成執行。如果您向後臺腳本發送創建選項卡的請求，則會更好。