크롬 확장 : 메시지 이벤트가 발생하여 콘텐츠 스크립트에서 jquery UI 대화 상자 열기

Question

Chrome 확장 프로그램에서 jquery 대화 상자를 열려고합니다. 그것에 관한 여러 게시물이 있습니다. 모든 게시물이 내 필요와 관련이있는 것은 아닙니다.

작동 코드가 있다고 주장하는 this one을 발견했습니다. 내 확장 기능에서 그 방법을 사용하려고 시도했지만 성공하지 못했습니다. 다음과 같이 배경에 내 확장에

내가 콘텐츠 스크립트에 메시지를 통해 보내고있다 :

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 
    chrome.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"}, function(response)  { 
    }); 
}); 

및 컨텐츠 스크립트에서 I는 나는 거의 복사 한 코드를 넣었습니다 (즉 죄송합니다,하지만 난 그래도 엉망으로하고 있는지 확인하려면 가능한 한 원본과 더 가까운되고 싶어 바로 아래로 못을 박기 위해) : 이제

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse){ 

    if (msg.action == 'open_dialog_box') { 
    alert("Message recieved!"); 


    var layerNode= document.createElement('div'); 
    layerNode.setAttribute('id','dialog'); 
    layerNode.setAttribute('title','Basic dialog'); 
    var pNode= document.createElement('p'); 
    console.log("pNode created"); 
    pNode.innerHTML = "something"; 

    layerNode.appendChild(pNode); 
    document.body.appendChild(layerNode); 

    jQuery("#dialog").dialog({ 
    autoOpen: true, 
    draggable: true, 
    resizable: true, 
    height: 'auto', 
    width: 500, 
    zIndex:3999, 
    modal: false, 
    open: function(event, ui) { 
    $(event.target).parent().css('position','fixed'); 
    $(event.target).parent().css('top', '5px'); 
    $(event.target).parent().css('left', '10px'); 
    } 

}); 

, 경고 때문에, 팝업 메시지가 도착했음을 알고 있지만 대화 상자가 열리지 않습니다.

여기에 무엇이 잘못 되었습니까?

편집 : 여기 내 매니페스트입니다

브록의 요청에 따라 : 매니페스트에서

{ 
"name": "Dialog test", 
"version": "1.1", 

"background": 
{ 
    "scripts": ["contextMenus.js"] 
}, 

"permissions": ["tabs", "<all_urls>", "contextMenus"], 

"content_scripts" : [ 
    { 
     "matches" : [ "http://*/*" ], 
     "js": ["jquery-1.8.3.js", "jquery-ui.js"], 
     "css": [ "jquery-ui.css" ], 
     "js": ["openDialog.js"] 
    } 
], 

"manifest_version": 2 
} 

Answer 1

, 당신은 두 번 js 속성을 설정하는 :

"js": ["jquery-1.8.3.js", "jquery-ui.js"], 
"css": [ "jquery-ui.css" ], 
"js": ["openDialog.js"] 

이를 첫 번째 값을 덮어 쓰므로 jQuery 및 jQuery-UI는 콘텐츠 스크립트에로드되지 않습니다.

매니페스트 섹션되어야 함 :

"js": ["jquery-1.8.3.js", "jquery-ui-1.9.2.custom.min.js", "openDialog.js"], 
"css": ["jquery-ui-1.9.2.custom.css"] 

---

---

이전 페이지 문제 : 그 코드가 어디서나 정의되지 않은 변수 massage 사용

1. . 콘솔에 오류가 있음을 지적하고 그 밖의 다른 문제도 지적해야합니다.

2. 매니페스트를 나열하지 않았으므로 jQuery 및 jQuery-UI가 확장 폴더에 다운로드되고 manifest.json에 지정되었는지 확인하십시오.