크롬 확장 프로그램에서 Jquery 대화 상자 삽입

저는 크롬 확장 기능과 자바 스크립트에서 초보자를 개발하는 데있어 새로운 것입니다. 사용자가 내 크롬 확장 프로그램의 버튼을 클릭하면 Jquery 대화 상자를 표시하려고합니다. 거의 일주일 동안이나 운이 없었습니다.크롬 확장 프로그램에서 Jquery 대화 상자 삽입

업데이트 : 현재이 문제를 해결하고 있습니다. 그러나 아무것도 작동하는 것 같습니다. 내가하고있는 일이 뭐가 잘못 됐니? 당신은 크롬 개발자 콘솔을 열면

manifest.json을

{ 
"name": "name", 
"version": "1.0", 
"description": "desc", 
"manifest_version":   2, 
"browser_action": { "default_icon": "four.png" }, 
"permissions": [ "tabs", "http://*/*" ], 
"background": { 
    "page": "background.html" 
    }, 
"content_scripts": [ { 
    "all_frames": true, 
    "js": [ "jquery.js", "content.js" ], 
    "matches": [ "http://*/*", "https://*/*" ] 
} ] 
}

background.html

chrome.tabs.executeScript(null, {file:"jquery.js"}, function() { 
chrome.tabs.executeScript(null, {file:"content.js"}); 
});

content.js

var layerNode= document.createElement('div'); 
layerNode.setAttribute('id','dialog'); 
layerNode.setAttribute('title','Basic dialog'); 
var pNode= document.createElement('p'); 
    console.log("msg var: "+massage); 
    pNode.innerHTML = massage; 


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

$("#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'); 
    } 

});

출처

2013-10-24 kuletzxc

html 파일에 js 코드를 쓸 때마다 스크립트 태그는 의 마지막 자손이어야합니다. – Mozak

설명서의이 페이지를 확인하십시오. http://developer.chrome.com/extensions/contentSecurityPolicy.html 인라인 JavaScript가 실행되지 않습니다. 또한이 그래서 대답을 참조하십시오 : http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled –

나는 html을 피하기 위해 제거했습니다 혼동. 내 글을 업데이트했습니다. 친절하게 도와주세요. – kuletzxc

, 당신은 당신의 문제가 무엇인지 볼 수 있습니다 :

Uncaught TypeError: Object [object Object] has no method 'dialog'

이는 단지 dialog 메소드가 jQuery의 일부가 아니기 때문에, it's part of jQuery UI입니다. jquery-ui.js 스크립트를 다운로드하고 두 개의 다른 스크립트를 삽입해야합니다.
UI가 제대로 작동하려면 jQuery-UI CSS도 삽입해야합니다.

매니페스트에 콘텐츠 스크립트를 선언 했으므로 URL이 패턴과 일치하는 모든 페이지 (여기서는 http://*/* 또는 https://*/*)에 삽입됩니다. 따라서 백그라운드 페이지에 프로그래밍 방식으로 삽입하는 것은 효과적이지 않습니다. 실제로 스크립트를 두 번 주입하고 있습니다.

출처

2013-10-24 08:50:14

크롬 확장 프로그램에서 Jquery 대화 상자 삽입

답변

관련 문제