google chrome 확장자 :: console.log()를 백그라운드페이지에서 사용하시겠습니까?

google chrome 확장자 :: console.log()를 백그라운드페이지에서 사용하시겠습니까?

가 ★★★★★★★★★★★★★★★★★★★★★★★★.console.log('something');정상적으로 동작하는 스크립트가 포함되어 있지 않은지 확인합니다.

그러나 배경 페이지는 팝업 페이지에서 직접 실행되지 않으므로 콘솔에 포함되지 않습니다.

가 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★console.log()는 팝업 페이지의 콘솔에 표시되도록 백그라운드페이지에 표시됩니까?

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

확장자 목록에서 "background.html" 링크를 클릭하면 배경 페이지의 콘솔을 열 수 있습니다.

, 「」를 엽니다.Settings / Extensions 새 " " " 를 입력합니다.chrome://extensions이런 스크린샷이 나옵니다.

에 있는 링크를 합니다.background page새 창이 열립니다.컨텍스트 메뉴 샘플의 경우 창의 제목은 다음과 같습니다._generated_background_page.html.

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

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

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

사용하기 쉽게 하기 위해:

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

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

이것으로 모든 것이 해결되었으면 좋겠다.

직접 하려면 , 「 」로 .console.log("something")이 메시지는 백그라운드에서 백그라운드 페이지의 콘솔에 기록됩니다. 낫다'로 가면 됩니다.chrome://extensions/ 그 '어느새'를 클릭해 주세요.inspect view신의의내내내내내

팝업을 클릭하면 팝업이 현재 페이지로 로드되므로 console.log에 현재 페이지에 로그 메시지가 표시됩니다.

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

가장 간단한 해결책은 파일 상단에 다음 코드를 추가하는 것입니다.또한 모든 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://확장/
• [ Details ]> [ Background ]페이지

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

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

원래의 질문에 대해서, 모하메드 만수르가 받아들인 회답에, 이것을 반대로 하는 방법도 있다고 덧붙이고 싶다.

다른 확장 페이지(옵션 페이지, 팝업 페이지 등)에 액세스 할 수 있습니다.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("이것은 내 로그")를 호출하면 팝업콘솔과 백그라운드콘솔에 모두 메시지가 기록됩니다.

장점은 코드를 변경하지 않고 로그 동작을 변경할 수 있다는 것입니다(실가동 시 로그 비활성화 등).

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

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

그런 다음 확장을 로드하고 배경 페이지를 검사하여 콘솔 로그를 확인합니다.

해봐!!

매니페스트 3과 서비스 직원과 함께라면Extensions Page / Details클릭하기만 하면 됩니다.Inspect Views / Service Worker.

크롬 확장을 디버깅하는 동안 콘솔을 표시하려면chrome.extension.getBackgroundPage();그 후 API를 사용할 수 있습니다.console.log()통상대로:

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

이것은 여러 시간을 사용할 때 좋기 때문에 커스텀 함수를 만듭니다.

  const console = {
    log: (info) => chrome.extension.getBackgroundPage().console.log(info),
  };
  console.log("foo");

사용만 합니다.console.log('learnin')온통.

chrome.extension.getBackgroundPage()나는 이해한다null

문서 작성,

MV3에서는 백그라운드페이지가 서비스 워커로 대체됩니다.

• 교체하다background.page또는background.scripts와 함께background.service_workerin manifest.json으로 지정합니다.service_worker 필드는 문자열 배열이 아닌 문자열을 사용합니다.

manifest.json

{
  "manifest_version": 3,
  "name": "",
  "version": "",
  "background": {
    "service_worker": "background.js"
  }
}

어쨌든, 나는 어떻게 사용하는지 모른다.getBackgroundPage하지만 다음과 같은 다른 해결책을 찾았습니다.

솔루션

크롬을 사용합니다.executeScript

임의의 스크립트 또는 파일을 삽입할 수 있습니다.검사(F12)를 직접 클릭하여 기능을 디버깅할 수 있습니다.

예를들면

chrome.commands.onCommand.addListener((cmdName) => {
    switch (cmdName) {
      case "show-alert":
        chrome.storage.sync.set({msg: cmdName}) // You can not get the context on the function, so using the Storage API to help you. // https://developer.chrome.com/docs/extensions/reference/storage/
        chrome.tabs.query({active: true, currentWindow: true}).then(([tab])=>{
          chrome.scripting.executeScript({
            target: {tabId: tab.id},
            function: () => {
              chrome.storage.sync.get(['msg'], ({msg})=> {
                console.log(`${msg}`)
                alert(`Command: ${msg}`)
              })
            }
          })
        })
        break
      default:
        alert(`Unknown Command: ${cmdName}`)
    }
  })

참조용으로 오픈 소스를 만듭니다.

언급URL : https://stackoverflow.com/questions/3829150/google-chrome-extension-console-log-from-background-page