Risposta non definita dallo script di contenuto nell'estensione di cromo

Non riesco a ottenere una risposta dal mio script di contenuto per visualizzare nel mio popup.html. Quando viene eseguito questo codice e viene fatto clic sul pulsante Trova, "Ciao dalla risposta!" stampa, ma la risposta variabile viene stampata come indefinita. L'obiettivo finale è quello di ottenere il DOM della scheda corrente nel mio file di script in modo che io possa analizzarlo. Sto utilizzando un singolo messaggio per uno script di contenuto per ottenere il DOM, ma non viene restituito e viene visualizzato come non definito. Sto cercando qualsiasi aiuto possibile. Grazie.Risposta non definita dallo script di contenuto nell'estensione di cromo

popup.html:

<!DOCTYPE html> 
<html> 
    <body> 
     <head> 
     <script src="script.js"></script> 
     </head> 

     <form > 
      Find: <input id="find" type="text"> </input> 
     </form> 
     <button id="find_button"> Find </button> 
    </body> 
</html>

manifest.json:

{ 
    "name": "Enhanced Find", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Ctrl+F, but better", 
    "browser_action": { 
     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
    }, 
    "permissions": [ 
     "tabs", 
     "*://*/*" 
    ], 

    "background":{ 
     "scripts": ["script.js"], 
     "persistent": true 
    }, 

    "content_scripts":[ 
     { 
      "matches": ["http://*/*", "https://*/*"], 
      "js": ["content_script.js"], 
      "run_at": "document_end" 
     } 
    ] 
}

script.js:

var bkg = chrome.extension.getBackgroundPage(); 


function eventHandler(){ 
    var input = document.getElementById("find"); 
    var text = input.value; 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 
     var tab = tabs[0]; 
     var url = tab.url; 
     chrome.tabs.sendMessage(tab.id, {method: "getDocuments"}, function(response){ 
      bkg.console.log("Hello from response!"); 
      bkg.console.log(response); 
     }); 

    }); 
}

content_script.js:

var bkg = chrome.extension.getBackgroundPage(); 

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){ 
    if(request.method == "getDOM"){ 
     sendResponse({data : bkg.document}); 
    }else{ 
     sendResponse({}); 
    } 
});

fonte

2013-10-28 user2929018

alcune osservazioni per i principianti: 1. Si sta inviando il messaggio '{ metodo: "getDocuments"} ', ma ascolta' {method: "getDOM"} '. 2. Anche se i messaggi corrispondessero, si restituirebbe il documento della pagina di sfondo. 3. Stai eseguendo due istanze separate di 'script.js': una nella tua pagina di sfondo e una nel tuo popup. 4. Sembra che tu abbia bisogno di ottenere alcuni termini (come la pagina di sfondo, i popup, lo script dei contenuti) dritti. 5. Stai utilizzando una pagina di sfondo persistente, quando una pagina di eventi (pagina di background non persistente) sarebbe ugualmente efficace, ma significativamente più "a misura di risorse". – gkalpak

(Detto questo, sì, proverò a fornire una risposta effettiva a breve :)) – gkalpak

Hai provato la mia soluzione proposta di seguito? Ha funzionato per te ? – gkalpak

Ci sono alcuni problemi con il tuo codice (vedi il mio commento sopra).

alcuni suggerimenti/considerazioni prime:

Non iniettare lo script contenuto in tutti pagine web. Inject programmatically e solo quando l'utente desidera effettuare la ricerca.
Potrebbe essere un'idea migliore eseguire la "ricerca" direttamente nello script di contenuto, in cui si ha accesso diretto al DOM e può manipolarlo (ad esempio, evidenziare i risultati di ricerca ecc.). Potrebbe essere necessario modificare le autorizzazioni se si sceglie questo approccio, ma cercare sempre di mantenerle al minimo (ad esempio non utilizzare tabs dove activeTab è sufficiente, ecc.).
Ricordare che, quando il popup è chiuso/nascosto (ad esempio una scheda riceve lo stato attivo), tutto il JS in esecuzione nel contesto del popup viene interrotto.
Se si desidera una sorta di persistenza (anche temporanea), ad es. ricordando i risultati recenti o l'ultimo termine di ricerca, è possibile utilizzare qualcosa come chrome.storage o localStorage.

Infine, codice di esempio dalla mia versione demo del proprio interno:

file Extension organizzazione:

  extension-root-directory/ 
      | 
      |_____fg/ 
      |  |_____content.js 
      | 
      |_____popup/ 
      |  |_____popup.html 
      |  |_____popup.js 
      | 
      |_____manifest.json

manifest.json:

{ 
    "manifest_version": 2, 
    "name": "Test Extension", 
    "version": "0.0", 
    "offline_enabled": true, 

    "content_scripts": [ 
     { 
      "matches": [ 
       "http://*/*", 
       "https://*/*" 
      ], 
      "js":  ["fg/content.js"], 
      "run_at": "document_end", 
     } 
    ], 

    "browser_action": { 
     "default_title": "Test Extension", 
     "default_popup": "popup/popup.html" 
    } 
}

contenuto.JS:

// Listen for message... 
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
    // If the request asks for the DOM content... 
    if (request.method && (request.method === "getDOM")) { 
     // ...send back the content of the <html> element 
     // (Note: You can't send back the current '#document', 
     // because it is recognised as a circular object and 
     // cannot be converted to a JSON string.) 
     var html = document.all[0]; 
     sendResponse({ "htmlContent": html.innerHTML }); 
    } 
});

popup.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="popup.js"></script> 
    </head> 
    <body> 
     Search: 
     <input type="text" id="search" /> 
     <input type="button" id="searchBtn" value=" Find " 
       style="width:100%;" /> 
    </body> 
</html>

popup.js:

window.addEventListener("DOMContentLoaded", function() { 
    var inp = document.getElementById("search"); 
    var btn = document.getElementById("searchBtn"); 

    btn.addEventListener("click", function() { 
     var searchTerm = inp.value; 
     if (!inp.value) { 
      alert("Please, enter a term to search for !"); 
     } else { 
      // Get the active tab 
      chrome.tabs.query({ 
       active: true, 
       currentWindow: true 
      }, function(tabs) { 
       // If there is an active tab... 
       if (tabs.length > 0) { 
        // ...send a message requesting the DOM... 
        chrome.tabs.sendMessage(tabs[0].id, { 
         method: "getDOM" 
        }, function(response) { 
         if (chrome.runtime.lastError) { 
          // An error occurred :(
          console.log("ERROR: ", chrome.runtime.lastError); 
         } else { 
          // Do something useful with the HTML content 
          console.log([ 
           "<html>", 
           response.htmlContent, 
           "</html>" 
          ].join("\n")); 
         } 
        }); 
       } 
      }); 
     } 
    }); 
});

fonte

2013-10-28 20:33:49 gkalpak

Tante buone informazioni in questa risposta, vorrei poter invocare due volte. Una grande risorsa è extensionizr.com che costruirà una struttura di estensione correttamente progettata. – TrophyGeek

Ehi, qual è il downvote per ??? – gkalpak

Ummm ... io? Ho votato in su. – TrophyGeek

Risposta non definita dallo script di contenuto nell'estensione di cromo

risposta

Problemi correlati