Google 크롬 확장 프로그램 :: 백그라운드 페이지에서 console.log ()?

console.log('something');팝업 페이지 또는 호출 된 스크립트에서 호출하면 정상적으로 작동합니다.

그러나 백그라운드 페이지가 팝업 페이지에서 직접 실행되지 않으므로 콘솔에 포함되지 않습니다.

console.log()팝업 페이지의 콘솔에 배경 페이지를 표시 할 수있는 방법이 있습니까?

백그라운드 페이지에서 팝업 페이지의 함수를 호출하는 방법이 있습니까?

콘텐츠 스크립트를 제외한 모든 확장 페이지 는를 통해 백그라운드 페이지에 직접 액세스 할 수 chrome.extension.getBackgroundPage()있습니다.

즉, 팝업 페이지 내에서 다음을 수행 할 수 있습니다.

chrome.extension.getBackgroundPage().console.log('foo');

사용하기 쉽도록 :

var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

이제 컨텐츠 스크립트 내에서 동일한 작업을 수행 하려면 메시지 전달 을 사용해야합니다. 그 이유는 둘 다 서로 다른 도메인에 속하기 때문입니다. 메시지 전달 페이지 에는 많은 예가 있습니다 .

희망은 모든 것을 지 웁니다.

확장 프로그램 목록에서 "background.html"링크를 클릭하면 백그라운드 페이지 콘솔을 열 수 있습니다.

내선에 해당하는 배경 페이지에 액세스하려면 Settings / Extensions새 탭을 열거 나 열고을 입력하십시오 chrome://extensions. 이 스크린 샷과 같은 내용이 표시됩니다.

확장 프로그램 아래에서 링크를 클릭하십시오 background page. 새 창이 열립니다. 의 경우 상황에 맞는 메뉴 샘플 창 제목이 있습니다 _generated_background_page.html.

console.log("something")백그라운드에서 전화 를 하면 질문에 직접 대답하기 위해이 메시지가 백그라운드 페이지의 콘솔에 기록됩니다. 그것을 보려면 확장 프로그램 아래 로 이동하여 chrome://extensions/클릭하십시오 inspect view.

팝업을 클릭하면 현재 페이지로로드되므로 console.log는 현재 페이지에 로그 메시지를 표시해야합니다.

console.log ()를 계속 사용할 수 있지만 별도의 콘솔에 로그인됩니다. 이를 보려면 확장 프로그램 아이콘을 마우스 오른쪽 버튼으로 클릭하고 "팝업 검사"를 선택하십시오.

가장 간단한 해결책은 파일 맨 위에 다음 코드를 추가하는 것입니다. 그리고 평소처럼 전체 Chrome 콘솔 API 를 모두 사용할 수 있습니다 .

 console = chrome.extension.getBackgroundPage().console;
// for instance, console.assert(1!=1) will return assertion error
// console.log("msg") ==> prints msg
// etc

const log = chrome.extension.getBackgroundPage().console.log;
log('something')

열린 로그 :

• 열기 : chrome : // extensions /
• 세부 정보> 배경 페이지

활성 페이지의 콘솔에 로그인하려면 다음을 시도하십시오.

chrome.tabs.executeScript({
    code: 'console.log("addd")'
});

원래 질문과 관련하여 Mohamed Mansour가 받아 들인 대답 에이 작업을 다른 방식으로 수행 할 수있는 방법이 있음을 추가하고 싶습니다.

당신은에서 다른 확장 페이지 (예 : 옵션 페이지, 팝업 페이지)에 액세스 할 수 있습니다 배경 페이지 / 스크립트 내 에 chrome.extension.getViews()전화를. 여기에 설명 된대로 .

 // overwrite the console object with the right one.
var optionsPage = (  chrome.extension.getViews()  
                 &&  (chrome.extension.getViews().length > 1)  ) 
                ? chrome.extension.getViews()[1] : null;

 // safety precaution.
if (optionsPage) {
  var console = optionsPage.console;
}

그것은 이미 좋은 대답을 가진 오래된 게시물이지만 두 비트를 추가합니다. console.log를 사용하고 싶지 않고 콘솔에 로그하는 로거를 사용하거나 원하는 위치에 로그를 사용하므로 로그 기능을 정의하는 모듈이 있습니다.

function log(...args) {
  console.log(...args);
  chrome.extension.getBackgroundPage().console.log(...args);
}

log ( "this is my log")를 호출하면 팝업 콘솔과 백그라운드 콘솔 모두에 메시지가 작성됩니다.

장점은 코드를 변경하지 않고도 로그의 동작을 변경할 수 있다는 것입니다 (예 : 프로덕션을위한 로그 비활성화 등).

백그라운드 페이지에서 콘솔 로그를 가져 오려면 백그라운드 페이지 background.js에 다음 코드 스 니펫을 작성해야합니다.

chrome.extension.getBackgroundPage (). console.log ( 'hello');

그런 다음 확장 프로그램을로드하고 백그라운드 페이지를 검사하여 콘솔 로그를 확인하십시오.

어서!