Question

我有Chrome扩展程序，当用户点击浏览器操作按钮时，扩展程序

打开弹出窗口
调用外部API以显示广告

这就是我所拥有的：

popup.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的事实，还是因为我完全错过了什么？旁注，我已经在普通的HTML页面上重现了这个API调用，取得了巨大的成功。所以我认为api调用不是问题所在。

另外，对于未来的功能，我希望根据特定事件显示广告。因此，是否可以使用JavaScript或Chrome功能显示浏览器操作弹出窗口，还是我必须以不同的方式进行此操作？

如果您需要其他信息，请与我们联系。

Answer 1

再次检查您的控制台，其中必定存在一些错误。注意：您必须检查负责popup.html的控制台（右键单击弹出窗口）而不是负责选项卡内容的控制台（Windows上的F12），当然不是负责控制台的控制台对于后台页面（检查chrome＆gt;扩展页面中的视图）。

内容安全政策说：Inline JavaScript will not be executed。因此，您需要将代码移动到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。

Answer 2

以下是我根据提供的答案实施解决方案的方法。谢谢你的帮助。

popup.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);
            }
        }
    });
});

的manifest.json：

清单中所要求的只是SkalárWag在上面的回答中所描述的。

在浏览器操作弹出窗口中显示外部内容

2 个答案: