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

【问题标题】：Showing external content inside browser action popup在浏览器操作弹出窗口中显示外部内容
【发布时间】：2014-04-09 01:39:25
【问题描述】：

我有一个 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 功能显示浏览器操作弹出窗口，还是我必须以不同的方式进行？

如果您需要更多信息，请告诉我。

【问题讨论】：

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

再次检查您的控制台，其中一定有一些错误。注意：您必须检查 负责 popup.html 的控制台（右键单击弹出窗口）而不是负责选项卡内容的控制台（Windows 上的 F12）当然也不是负责的控制台用于背景页面（检查 chrome>extensions 页面中的视图）。

内容安全政策说：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。

【讨论】：

【解决方案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ár Wag 在上面的回答中描述的内容。

【讨论】：