2013-05-01 7 views
10

Ich versuche, eine einfache Google-Chrome-Erweiterung zum Laufen zu bringen, wo eine Nachricht/Variable für jede der folgenden Schritte durchströmt ...Chrome Extension - Von dem DOM Popup.js Message Passing

  1. DOM-Gehalt (von spezifischen HTML-Tag)
  2. Contentscript.js
  3. Background.js
  4. Popup.js
  5. Popup.html

Ich habe herausgefunden, wie eine Nachricht senden/variable - Background.js und von in ihm eine Richtung (Background.js -> Popup.js oder Background.js -> Contentscript.js), aber es kann alles erfolgreich drei nicht durchkommen (Contentscript.js -> Background.js -> Popup.js). Hier sind die Dateien in meiner Demo.

Dom

<h1 class="name">Joe Blow</h1>

Content.js

fromDOM = $('h1.name').text(); 

chrome.runtime.sendMessage({contentscript: "from: contentscript.js", title: fromDOM}, function(b) { 
    console.log('on: contentscript.js === ' + b.background); 
}); 

Background.js

chrome.tabs.getSelected(null, function(tab) { 
    chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) { 

     sendResponse({background: "from: background.js"}); 
     console.log('on: background.js === ' + msg.title); 

    }); 
}); 

Popup.js

chrome.extension.sendMessage({pop: "from: popup.js"}, function(b){ 
    console.log('on: popup.js === ' + b.background); 

    $('.output').text(b.background); 
}); 

Popup.html

<html> 
<head> 
    <script src="jquery.js"></script> 
    <script src="popup.js"></script> 
</head> 
<body> 

<p class="output"></p> 

</body> 
</html> 

manifest.json

{ 
"name": "Hello World", 
"version": "1.0", 
"manifest_version": 2, 
"description": "My first Chrome extension.", 
"background" : { 
    "scripts": ["background.js"] 
}, 
"permissions": [ 
    "tabs" 
], 
"browser_action": {  
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
}, 
"content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "js": ["jquery.js","contentscript.js"], 
     "run_at": "document_end" 
    } 
] 

} 

ich das Gefühl habe, ich weiß, was die Reise-up , aber die Dokumentation fehlt stark für manifest_version: 2, dass es schwer zu entziffern ist. Ein einfaches, wiederverwendbares Beispiel wäre im Lernprozess sehr hilfreich, da ich sicher bin, dass dies ein häufiges Problem ist.

Antwort

16

In Ordnung, ein paar Dinge in Ihrem Code zu ändern sollte es funktionieren lassen, wie Sie wollen. Nicht alle Änderungen, die ich machen werde, sind notwendig, aber so könnte ich es machen.

Inhalt Script

var fromDOM = $('h1.name').text(); 
chrome.runtime.sendMessage({method:'setTitle',title:fromDOM}); 

Hintergrund

var title; 
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){ 
    if(message.method == 'setTitle') 
    title = message.title; 
    else if(message.method == 'getTitle') 
    sendResponse(title); 
}); 

Popup.js

chrome.runtime.sendMessage({method:'getTitle'}, function(response){ 
    $('.output').text(response); 
}); 
+0

Das ist genau das, was ich suchte. Sehr geschätzt! –

+0

Ich habe das versucht. Das Popup zeigt nichts.Ich änderte den 'fromDOM' Wert gemäß meiner Website, obwohl –

+0

@Venky Ihre eigene Frage mit Ihrem Code stellt, und ich kann Ihnen besser helfen. – BeardFist

Verwandte Themen