Ich versuche, eine einfache Chrome-Erweiterung zu machen. Ich würde mich freuen, wenn jemand helfen kann.sendMessage funktioniert nicht in der Chrome-Erweiterung

Ziel: Wenn Sie auf die Schaltfläche im Erweiterungspopup (popup.html) klicken, wird der Titel der aktuellen Webseite in div angezeigt (mit der ID 'div1').

Problem: Ich habe Internet gesucht, um dies zu tun und festgestellt, dass die Weitergabe der Nachricht verwendet werden kann, um das gleiche zu erreichen. Also habe ich meine Hände darauf versucht. Aber es funktioniert nicht. Ich möchte wissen, was schief gelaufen ist.

Status:

= Die Erweiterung wird erfolgreich in Chrom importiert.

= Wenn das Erweiterungssymbol angeklickt wird, wird das richtige Popup angezeigt.

= wenn die Schaltfläche angeklickt wird, passiert nichts.

= Entwicklerkonsole zeigt keinen Fehler an.

Dateien:

=====================================

//manifest.json 
    { 
     "manifest_version": 2, 
     "name": "some_name_extension", 
     "version": "0.0.1", 
     "content_scripts": [ 
     { 
      "matches": [ 
      "<all_urls>" 
      ], 
      "js": ["jquery-3.2.1.js", "content_script.js"] 
     } 
     ], 
     "browser_action": { 
     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
     } 
    }

<!-- popup.html --> 
<! doctype html> 
<html> 
<head> 
    <title> 
    </title> 
    <script type="text/javascript" src="popup.js"> 
    </script> 
    <style> 
     html 
     { 
      height: 200; 
      width: 200; 
     } 
    </style> 
</head> 
<body> 
    <button id="btn1"> 
     click me! 
    </button> 
    <div id="div1"> 
     (title will be displayed here) 
    </div> 
</body> 
</html>

=================================

//content_script.js 
document.addEventListener('DOMContentLoaded', function() { 
var title1=document.getElementsByTagName("title")[0].innerHTML; 

chrome.extension.onMessage.addListener(

function(msg, sender, sendResponse) { 
    if(sender=="popup") 
    { 
     chrome.extension.sendMessage(title1,"content","1"); 
    } 
    }); 
});

=====================================

//popup.js 
document.addEventListener('DOMContentLoaded', function() { 
    var mainBtn = document.getElementById('btn1'); 
    mainBtn.addEventListener('click', function() { 
     chrome.extension.sendMessage("button_clicked","popup","1"); 
    }); 

    chrome.extension.onMessage.addListener(

    function(msg, sender, sendResponse) { 
     if(sender=="content") 
     { 
      document.getElementById("div1").innerHTML=msg; 
     } 
    } 
    ); 
});

=== ==================================

Link zu jquery Skript-Datei: https://code.jquery.com/jquery-3.2.1.js

Quelle

2017-06-02 N_X41

Es ist 'getElementsByTagName' (Plural) nicht' getElementByTagName' – Andreas

Dank @Andreas! Ich habe die Korrektur vorgenommen. Aber es löst nicht mein Problem :( –

sender ist ein Objekt, das vom Browser automatisch eingestellt wird, keine Zeichenfolge, die Sie selbst übergeben können. Verwenden Sie den Debugger von Devtools, um Ihren Code und Variablen zu überprüfen, indem Sie Haltepunkte in den Callbacks setzen, und schreiben Sie den Code nicht blind.
In diesem Fall muss die sender nicht überprüft werden, da Inhaltsskripts sich gegenseitig nicht melden können.

Die richtige Methode zur Herstellung eine Nachricht an einen Content-Skript aus der Popup-Senden ist chrome.tabs.sendMessage mit tabId als ersten Parameter:

chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => { 
    chrome.tabs.sendMessage(tab.id, { 
    action: 'setTitle', 
    title: title1, 
    }); 
});

viele Werte zu senden, auf einmal ein Objekt verwenden: {action: 'setTitle', title: title1} oder {action: 'buttonClicked', data: 1} und so auf.
chrome.extension wird für Messaging veraltet, nicht chrome.runtime
Ihren Code verwenden jQuery nicht verwenden, so gibt es keine Notwendigkeit es in manifest zu injizieren.json

Quelle

2017-06-02 05:12:50 wOxxOm

Vielen Dank @wOxxOm! Allerdings musste ich eine Antwortfunktion verwenden, um die Antwort zu anderen Ende zu bekommen. Gibt es eine Möglichkeit, das ohne es zu tun? Mittel, wie bekomme ich die Nachricht auf anderem Ende unter Verwendung von chrome.tabs.query ({aktiv: true, currentWindow: true}, ([Tab]) => { chrome.tabs.sendMessage (tab.id, { Aktion: 'setTitle' , }:; }); –

@ N_X41, was ist eine "Antwortfunktion"? Warum ist es ein Problem? Webseite, da Inhaltsskripts beim erneuten Laden Ihrer Erweiterung nicht automatisch neu eingefügt werden . – wOxxOm

So bekomme ich eine Antwort zurück. chrome.tabs.query ({aktiv: true, currentWindow: true}, Funktion (Registerkarten) { chrome.tabs.sendMessage (Registerkarten [0] .id, {Aktion: 'setTitle', Titel: title1,}, Funktion (Antwort) { // Tun Sie etwas mit der Antwort }); }); . Es gibt kein Problem damit, wollte nur wissen, welchen Ansatz Sie vorgeschlagen haben. Wie auch immer, es funktioniert jetzt gut! Danke für das Zeigen in die richtige Richtung;) –

sendMessage funktioniert nicht in der Chrome-Erweiterung

=====================================

=== ==================================

Antwort

Verwandte Themen