chrome 확장 프로그램의 콘텐츠 스크립트가 google, youtube 페이지에서 작동하지 않습니다.

Question

크롬 확장 프로그램을 만들려고합니다. 사용자가 내 확장 프로그램의 아이콘 (browserAction)을 클릭하면 콘텐츠 스크립트가 열려있는 페이지의 본문 (현재 탭)에 추가 div를 추가합니다. 그것은 구글의 검색 페이지와 유튜브를 제외한 모든 사이트에서 잘 작동합니다. 나는 어떤 오류 메시지 나 아무것도 얻지 않고있다. 그것은 어떤 응답도주지 않을 것입니다. 내가 테스트 목적으로 경고를 넣었습니다

alert('sdsd'); 
$('body').append("<div id='popup'>My extension name</div>"); 

:

이것은 content.js 내 코드입니다. 따라서 확장 기능을 토글하면 div를 본문에 추가하는 경고 메시지가 표시되어야합니다. 그러나이 2 개의 위치를 ​​위해 실 거예요.

무엇이 잘못 될 수 있습니까?

매니페스트

{ 
    "name": "My first extension", 
    "version": "1.0", 
    "background": { "scripts": ["background.js"] }, 
    "content_scripts": [{ 
      "all_frames": true, 
      "css": ["style.css"], 
      "matches": ["http://*/*","https://*/*"] 
     }], 
    "permissions": [ "tabs","http://*/*" ], 
    "browser_action": { "name": "test" }, 
    "manifest_version": 2 
} 

background.js

chrome.browserAction.onClicked.addListener(function(tab){ 
chrome.tabs.executeScript(null,{file:"jquery.min.js"},function(){ 
    chrome.tabs.executeScript(null,{file:"content.js"}); 
}); 

});

Answer 1

Youtube의 페이지에서 $는 덮어 쓰여지고 jQuery가 아닙니다. 그것은 document.getElementById('body')이 undefined이있는 한

bound: function() 
{ 
    return document.getElementById.apply(document, arguments) 
} 

그래서 코드가 예외를 만드는입니다.

noConflict()을 사용해보십시오.

편집 :

왜 당신은 단순히 프로그램을 주입하는 대신 content_scripts에 jQuery.min.js하고 content.js을 나열되지 않습니다. 이것은 충돌을 피할 것입니다.

편집 2 : 이제 콘텐츠 스크립트를 사용하는 것이

, 당신은 경고를 표시 할 콘텐츠 스크립트에 background.js에서 명령을 보낼 communication as described here를 사용해야합니다.

편집 3 :

var div = document.createElement('div'); 
div.id = 'popup'; 
document.body.appendChild(div); 
document.getElementById('popup').innerHTML = "My extension name"​;​ 

에 바닐라 JS로 번역하지만 일반적이다되고 JQuery와, $('body').append("<div id='popup'>My extension name</div>");를 사용 (처음처럼) 프로그램 주사를 사용하지 않는했을 또 다른 해결책 프로그래밍 방식의 삽입을 피하려면 더 깔끔하고 (권한이 덜 필요함)