Chrome 확장 프로그램 : 탭을 만든 다음 콘텐츠 스크립트 삽입하기

Question

콘텐츠 스크립트에서 메시지를 수신하면 새로운 탭을 만들고 동적으로 열리는 페이지를 채우고 싶습니다. 지금은 새로 만든 페이지를 돌리려고합니다. 빨간).

eventPage.js :

// ... code that injects another content script, works fine 

// Problem code... 
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) 
    { 
    chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")}, 
         turnTabRed);  
    }); 

function turnTabRed(tab) 
{ 
    chrome.tabs.executeScript(
    tab.id, 
    {code: 'document.body.style.backgroundColor="red"'} 
); 
} 

이 성공적으로 새 탭 (일부 텍스트 단지 HTML 페이지입니다)로드 blankpage.html 벌금을 만들지 만, 배경 색상을 빨간색으로 칠하는 데 실패합니다. 많은 곳에서 console.log() 문을 삽입하고 디버거를 속이고 난 후에 tab.id이 실제로 새로 생성 된 탭의 ID라는 것을 확인했습니다. 콘솔에서 document.body.style.backgroundColor="red"을 호출하면 새 탭의 배경이 빨간색으로 변합니다. . 내가 turnTabRed의 몸에

(*)

chrome.tabs.query(
    {}, function (tabArr) { for (var i = 0; tabArr[i]; i++)  
           console.log(tabArr[i].title); }); 

을 추가 한 경우 새 탭의 제목은 스크립트가 너무 일찍 주입되는 것을 제안 콘솔로 인쇄되지 않을 것입니다 것으로 나타났습니다 그래서 나는 setTimeout으로 주입을 지연 시도하고 실패 할 때, 나는 상태 완성 이벤트를 수신 시도 :

function turnTabRed(tab) 
{ 
    chrome.tabs.onUpdated.addListener(
    function(tabUpdatedId, changeInfo, tabUpdated) 
    { 
     if (tabUpdatedId == tab.id && changeInfo.status && 
            changeInfo.status == 'complete') 
     chrome.tabs.executeScript(
      tabUpdatedId, 
      {code: 'document.body.style.backgroundColor="red"'}); 
    }); 
} 

도 실패한다. setTimeout으로 대기 한 후 (*)를 호출하면 다른 탭과 함께 새 탭의 제목이 인쇄됩니다.

무엇이 잘못 되었나요? 새 탭을 만들고 HTML 페이지를로드 한 다음 배경을 빨간색으로 바꾸려면 어떻게합니까?

Answer 1

문제는 chrome-extension://* 페이지 (blankpage.html)에 스크립트를 삽입 할 수 없다는 것입니다.

예를 들어,

{url: chrome.extension.getURL("blankpage.html")} 

원래의 코드 블록에서

{url: "http://www.google.com"} 

에 변경하고 빨간색으로 배경을 변경합니다. 내가 아는 한 chrome-extension://* 페이지를 삽입 할 방법이 없습니다 (이 이유는 거대한 보안 우려 사항이라고 생각합니다). 귀하의 확장 기능이 무엇을하려고하는지 잘 모르겠지만 "라이브"페이지에 삽입하면 ... chrome.runtime.onMessage.addListener이 발생할 때마다 서버에 새로운 "빈 페이지"를 생성 할 수있는 API를 만들 수 있습니까?

편집

그래서 당신은 chrome-extension://* 페이지로 물건을 삽입하지 수 있습니다,하지만 당신은 그들에게 메시지를 전달하고 아래에 언급 한 바와 같이 그 새로운 페이지 내에서 크롬의 API의 일부 하위 집합을 사용할 수 있습니다. 따라서 메시지 전달을 사용하면 로터리 방식이기는하지만 원하는대로 정확하게 수행 할 수 있습니다 (새 페이지 수정).

eventPage.js :

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) 
    { 
    chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")}, turnTabRed);  
    }); 

function turnTabRed(tab) 
{ 
    chrome.tabs.sendMessage(tab.id, {"action" : "setBackground"}); 
} 

blankpage 여기에 나를 위해 작동 개념을 정말 간단 증거입니다.JS :

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if(request.action == "setBackground") document.body.style.background = "red"; 
    });