Расширение Google Chrome - требуется помощь - PullRequest
Новая
       1

Расширение Google Chrome - требуется помощь

3 голосов
/ 01 апреля 2012

Я новичок в Google Chrome Extensions , и у меня есть несколько основных вопросов.

Я хочу сделать Chrome Extension, и схема следующая:

- всплывающее окно, содержащее кнопки и поля результатов (popup.html)

- при нажатии кнопки я хочу вызвать событие, это событие должно подключиться к веб-серверу (я тоже создаю сервлет)и собирать информацию с сервера.(XMLHttpRequest ())

- после этого я хочу, чтобы мое расширение загружало собранную информацию в одно из полей результатов.

Просто, не так ли?Но у меня есть несколько проблем, в самом начале :( Я начал разрабатывать с чтения учебников, но у меня есть туман по основной структуре расширения. Теперь я запустил приложение, содержащее popup.html, manifest.json ...В popup.html есть поле результата и кнопка 

<div id="extension_container">
<div id="header">
    <p id="intro">Result here</p>
    <button type="button" id="button">Click Me!</button>
</div> <!-- END header -->
<div id="content">

</div> <!-- END content -->

Когда нажата кнопка, я запускаю событие, обработанное с помощью jquery, код здесь: 

<script>
    $(document).ready(function(){
        $("#button").click(function(){
            $("#intro").text("Hello, im added");
            alert("Clicked");
        });
    });
</script>

И тут возникает проблема, в popup.html это не работает, если я загружаю его в Chrome, ничего не происходит. В противном случае, если я открываю popup.html в браузере, а не как расширение, все работает нормально.думаю, у меня есть базовые недоразумения в отношении структур расширений, начиная с фоновых страниц, фонового JavaScript и т. д. :( Кто-нибудь может мне помочь?

Ответы [ 2 ]

3 голосов
/ 02 апреля 2012

Тестирование в Chrome 19.0.1084.1 у меня сработало ....

popup.html 

<!doctype html>
<html>
<head>
    <script src="jquery-1.7.1.min.js"></script>
    <script src="popup.js"></script>
</head>
<body>
    <div id="extension_container">
        <div id="header">
            <p id="intro">Result here</p>
            <button type="button" id="button">Click Me!</button>
        </div> <!-- END header -->
        <div id="content">
        </div> <!-- END content -->
    </div>
</body>
</html>

popup.js 

$(document).ready(function() {
    $("#button").click(function() {
        $("#intro").text("Hello, im added");
        alert("Clicked");
    });
});

Возможная ошибка
Я думаю, что МОЖЕТ быть вашей проблемой то, что у вас есть "manifest_version": 2 в вашем манифесте, и ваш popup.html выглядит примерно так ... 

 <!doctype html>
<html>
<head>
    <script src="jquery-1.7.1.min.js"></script>
    <!--script src="popup.js"></script-->
    <script>
    $(document).ready(function() {
        $("#button").click(function() {
            $("#intro").text("Hello, im added");
            alert("Clicked");
        });
    });
    </script>
</head>
<body>
    <div id="extension_container">
        <div id="header">
            <p id="intro">Result here</p>
            <button type="button" id="button">Click Me!</button>
        </div> <!-- END header -->
        <div id="content">
        </div> <!-- END content -->
     </div>  
</body>
</html>

... это не будет работать, потому что встроенные сценарии не допускаются в манифесте версии 2.

0 голосов
/ 01 апреля 2012

Вы уверены, что добавили библиотеку jQuery с таким дополнительным тегом? 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

После того, как я это сделал, у меня больше не было проблем.Конечно, до того, как я это сделал, у меня была ошибка "$ is undefined".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...