2012-03-02 2 views
9

popup.html (또는 popup.js)과 백그라운드 스크립트간에 정보를 전달할 수있는 방법이 있습니까?팝업에서 background.js와 상호 작용하는 방법은 무엇입니까?

사용자 계정의 정보를 표시하거나 로그인 할 수 있지만 background.js가 인증 및 기타 논리를 처리하도록하려면 팝업을 원합니다. 내가 명시한 배경이 있습니다 .js는 매니페스트에 선언되어 있지만, 전혀 사용되지 않았다는 표시가없는 것 같습니다.

편집 :이 모든 잘못에 대해 생각하고 있다면이 방법을 사용하는 것이 좋습니다. 너무 좋습니다.

+0

관련 : [배경 맥락에서 스크립트 (배경 스크립트, 브라우저 액션, 페이지 액션, 옵션 페이지 등) 사이에 통신] (//stackoverflow.com/q/41420528) – Makyen

+0

[chrome 확장 기능에서 popup.js와 background.js를 통신하는 방법] (https://stackoverflow.com/questions/13546778/how-to-communicate)의 복제본이있을 수 있습니다. -inter-pop-js-and-background-js-in-chrome-extension) – JerryGoyal

답변

9

chrome.extension API을 사용하십시오.

요청을주고 받고 계속 통신하기 위해 포트를 더 잘 사용할 수 있습니다.

내가 제공하는 예는 팝업이 열렸을 때 연결되는 팝업과 백그라운드 페이지 사이에 양방향 통신을 생성합니다.

백그라운드 페이지와 팝업 페이지에 모두 포함되어있는 socket.js 파일을 만드십시오. 그런 다음 각에 당신은 단지 선언 할 수

다음
new Socket(); 

는 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. 
      } 
     }); 
    }); 
}; 

당신이 일반적인 방법은 당신을위한 메시지 리스너 작업에 통화를 할 수 있는지 확인합니다. 나는 위에 주어진 형식을 좋아합니다. 매우 강력합니다. 앞뒤로 메시지를 보내려면 바로 소켓에 게시를 :

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

이이 팝업 페이지에서 실행 된 그렇다면 그 배경 페이지를 부를 것이다 : 나 여기에

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

이 아주 좋은 재사용 가능한 자바 스크립트 객체. 당신이 좋아하면 당신은 특정 프로토 타입 기능을 추가 할 수 있습니다 -이 방법은 보내 더 쉽게 메시지 :

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

이제 말을 모두가 :

socket.sendOneTwo(); 
27

참고 배경 페이지와 popup은 동일한 프로세스 (확장 프로세스)에서 실행되므로 한 페이지가 다른 페이지의 DOM 윈도우를 가져 와서 함수를 호출하거나 변수를 직접 설정할 수 있습니다. 예를 들어, chrome.extension.getBackgroundPage를 호출 할 수있는 팝업 배경 수정 :

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

및 배경 페이지가 팝업 얻을 chrome.extension.getViews를 호출 할 수 있습니다 : 기존의 DOM을 사용하여

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

공유 변수를 설정하는 또 다른 방법을 API는 각 확장 프로그램이 가짜 원본을 가져 오기 때문에 (예 : "eakjnniffhfegdpfehmnpcmjiameincp"). 따라서 localStorage, document.cookie 또는 IndexedDB를 백그라운드로 수정하면 팝업에서 다시 읽을 수 있습니다.

그렇다면 확장 프로세스의 페이지에서도 메시지 전달 API를 사용하는 것이 좋습니다. 코드가 더 균일해질 수 있기 때문입니다. 메시지 전달 만 콘텐츠 스크립트와 통신 할 수있는 유일한 방법입니다.단지 디버깅 목적

3

나는 팝업 JS에서이 꽤 알아두면 편리 :

console = chrome.extension.getBackgroundPage().console 
관련 문제