Вставить диалоговое окно JQuery в расширение Chrome

Я просто новый в разработке chrome-расширений и только новичок в javascript. Я хочу отобразить диалоговое окно JQuery, когда пользователь нажимает кнопку на моем расширении chrome. Я искал почти неделю и не повезло.Вставить диалоговое окно JQuery в расширение Chrome

Обновление: Я сейчас работаю над этим. Однако ничего не работает. Что случилось с тем, что я делаю?

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

Всякий раз, когда вы пишете js-код в html-файле, тег сценария должен быть последним потомком . – Mozak

Проверьте эту страницу документации: http://developer.chrome.com/extensions/contentSecurityPolicy.html Встроенный JavaScript не запускается. См. Также этот ответ SO: http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled –

Я удалил html, чтобы избежать спутанность сознания. Я обновил свой пост. Пожалуйста, помогите мне. – kuletzxc

Если открыть консоль разработчика Chrome, вы увидите, что ваша проблема :

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

Это просто потому, что метод dialog не является частью jQuery, it's part of jQuery UI. Вам нужно будет загрузить сценарий jquery-ui.js и ввести его двумя другими скриптами.
Обратите внимание, что для того, чтобы пользовательский интерфейс работал правильно, вам также нужно будет ввести CSS jQuery-UI.

На стороне примечания, поскольку вы объявляете свой скрипт контента в своем манифесте, он будет вводиться на всех страницах, чей URL соответствует вашему шаблону (здесь http://*/* или https://*/*). Поэтому бесполезно вводить его программно на вашу справочную страницу: по сути, вы дважды вводите свой сценарий.

источник

2013-10-24 08:50:14

Вставить диалоговое окно JQuery в расширение Chrome

ответ

Смежные вопросы