Jak interakcję z background.js z popup?

Question

Czy istnieje sposób przekazywania informacji między popup.html (lub popup.js) a skryptem tła?

Chciałbym, aby wyskakujące okienko wyświetlało informacje z konta użytkownika lub pozwalało im się logować, ale sprawi, że background.js zajmie się uwierzytelnianiem i inną logiką. Mam manifest background.js w manifeście, ale wydaje się, że nic nie wskazuje na to, że jest on w ogóle używany.

Edycja: Jeśli mam zamiar to wszystko źle i istnieje lepszy sposób, aby to zrobić, to byłoby również świetne.

Answer 1

Użyj chrome.extension API.

Możesz wysyłać żądania do iz powrotem lub jeszcze lepiej korzystać z portu do ciągłej komunikacji.

Podany przeze mnie przykład utworzy dwukierunkową komunikację między wyskakującym okienkiem a stroną w tle, które łączą się, gdy popup zostanie otwarty.

Wystarczy utworzyć plik socket.js, który jest zawarty zarówno na stronie w tle, jak i na stronie podręcznej. Następnie na każdej można po prostu zadeklarować:

new Socket(); 

Oto realizacja socket.js:

var Socket = function() { 
    window.socket = this; 

    this.port = chrome.extension.connect({name:"popupToBackground"}); 

    chrome.extension.onConnect.addListener(function(port) { 
     if(port.name == "backgroundToPopup") {} 
      else if(port.name == "popupToBackground") { 
      window.socket.port = chrome.extension.connect({name:"backgroundToPopup"}); 
     } 
     else { 
      return; 
     } 

     port.onMessage.addListener(function(msg) { 
      try { 
       window[msg.namespace][msg.literal][msg.method].apply(this, msg.args); 
      } 
      catch(error) { 
       // your failed action goes here. 
      } 
     }); 
    }); 
}; 

Upewnij się uczynić metoda rodzajowa wzywa w pracach wiadomość słuchacza dla Ciebie. Podoba mi się format, który podałem powyżej - jest bardzo solidny. Aby wysyłać wiadomości iz powrotem po prostu dodawać je do gniazda:

socket.post({ namespace: "myNamespace", 
       literal: "myLiteral", 
       method: "myMethod", 
       args: ["argOne", "argTwo"] 
      }); 
}); 

Więc jeśli to były wykonywane od strony podręcznego wówczas strona tło nazwałbym:

window.myNamespace.myLiteral.myMethod(argOne, argTwo); 

Dla mnie jest to bardzo miłe obiekt javascript wielokrotnego użytku. Można nawet dodać specyficzne funkcje prototypów, jeśli chcesz - w ten sposób jej jeszcze łatwiej wysyłać wiadomości:

Socket.prototype = { 
    sendOneTwo: function() { 
     socket.post({ namespace: "myNamespace", 
         literal: "myLiteral", 
         method: "myMethod", 
         args: ["argOne", "argTwo"] 
    }); 
}; 

Teraz wszystko co mam do powiedzenia to:

socket.sendOneTwo(); 

Answer 2

Zauważ, że strona tło i popup na żywo w tym samym procesie (proces rozszerzenia), więc jedna strona może uzyskać okno DOM drugiego, a następnie wywołać funkcje lub ustawić zmienne bezpośrednio. Na przykład listy może wywołać chrome.extension.getBackgroundPage modyfikować tła:

chrome.extension.getBackgroundPage().variable = 42; 

a strona tła można nazwać chrome.extension.getViews aby uzyskać okienko:

var popups = chrome.extension.getViews({type: "popup"}); 
if (0 < popups.length) 
    popups[0].variable = 42; 

inny sposób ustawić współdzielonych zmiennych za pomocą tradycyjnego DOM Interfejsy API, ponieważ każde rozszerzenie otrzymuje fałszywe źródło (na przykład "eakjnniffhfegdpfehmnpcmjiameincp"). Więc kiedy modyfikujesz localStorage, document.cookie lub IndexedDB na tle, można go odczytać w wyskakującym okienku.

Mimo to możesz nadal używać wiadomości przekazujących interfejsy API nawet na stronach w procesie rozszerzenia, ponieważ może to poprawić kod. Przekazywanie wiadomości jest jedynym sposobem komunikowania się ze skryptami treści.

Answer 3

Dla celów debugowania tylko znajdę to bardzo przydatny w podręcznym JS:

console = chrome.extension.getBackgroundPage().console