Отображение внешнего содержимого во всплывающем окне действия браузера

У меня есть расширение Chrome, которое, когда пользователь нажимает кнопку действия браузера, расширение

  1. открывает всплывающее окно
  2. вызывает внешний API для отображения рекламы

Вот что у меня есть:

всплывающее окно.html

    <div class="v11container" id="v11container">Some Text</div>
    <script src="http://b.v11media.com/js/client_api/api.js"> </script> //external api
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> //jquery
    <script type="text/javascript">
 v11onload(function() {
        $.ajax({
          url: 'http://localhost:3000/random',
          success: function(data) {
            console.log(data);
            if(data){
              var v11_api = new v11('v11container');
              v11_api.show(data.click_url);
            }
          }
        });
     });
    </script> //using the api to show an ad

В идеале я хотел бы, чтобы реклама показывалась, когда я нажимаю кнопку действия браузера. Но все, что показывается, это «Некоторый текст». Моя консоль не показывает никаких ошибок. Возникает ли проблема из-за того, что я ссылаюсь на внешний JavaScript, или из-за чего-то, что я полностью пропустил? Примечание: я с большим успехом воспроизвел этот вызов API на обычной HTML-странице. Поэтому я не думаю, что вызов API является проблемой.

Также для будущей функциональности я хотел бы, чтобы реклама отображалась на основе определенных событий. Поэтому возможно ли показать это всплывающее окно действия браузера с помощью JavaScript или функций Chrome, или мне нужно сделать это по-другому?

Дайте мне знать, если вам потребуется дополнительная информация.


javascript google-chrome google-chrome-extension
person d9120    schedule 01.04.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Проверьте свою консоль еще раз, в ней должны быть какие-то ошибки. Примечание: вы должны проверить консоль, отвечающую за popup.html (щелкните правой кнопкой мыши по всплывающему окну), а не консоль, отвечающую за содержимое вкладки (F12 в Windows), и, конечно же, не консоль, ответственную для фоновой страницы (проверьте представления на странице расширений chrome>).

Политика безопасности контента гласит: Встроенный JavaScript не будет выполняться. Поэтому вам нужно переместить свой код в файл javascript (popup.js).

Во-вторых, не рекомендуется использовать внешний исходный код, но если вы на этом настаиваете, то вам придется обрабатывать content_security_policy в файле манифеста:

"content_security_policy": "default-src 'self'; script-src 'self' https://code.jquery.com/jquery-1.11.0.min.js https://b.v11media.com/js/client_api/api.js",

Примечание. В этом белом списке script-src вы можете использовать только https, но не http.

person Skalár Wag    schedule 02.04.2014

arrow_upward
0
arrow_downward

Вот как я реализовал решение на основе предоставленных ответов. Спасибо за помощь.

всплывающее окно.js:

(function() {
    var v11 = document.createElement('script');
    v11.type = 'text/javascript';
    v11.async = true;
    v11.src = 'https://b.v11media.com/js/client_api/api.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(v11, s);
})();

v11onload(function() {
    $.ajax({
        url: 'http://localhost:3000/random',
        success: function(data) {
            console.log(data);
            if (data) {
                var v11_api = new v11('v11container');
                v11_api.show(data.click_url);
            }
        }
    });
});

манифест.json:

Все, что требовалось в манифесте, это то, что Скалар Ваг описал в своем ответе выше.

person d9120    schedule 08.04.2014