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

Question

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

1. 打开弹出窗口
2. 调用外部 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 调用是问题所在。

此外，对于 future 的功能，我希望根据某些事件显示广告。因此，是否可以使用 JavaScript 或 Chrome 功能显示浏览器操作弹出窗口，或者我是否必须采用不同的方式？

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

Answer 1

再次检查你的控制台，肯定有一些错误。注意:您必须检查负责 popup.html 的控制台(右键单击弹出窗口)，而不是负责选项卡内容的控制台(Windows 上的 F12)，当然也不是负责的控制台背景页面(检查 chrome> 扩展页面中的 View )。

内容安全政策说:Inline JavaScript will not be executed 。 因此，您需要将代码移至 javascript 文件 (popup.js)。

其次，不建议使用外部源代码，但如果你坚持这样做，那么你必须处理 content_security_policy list 文件中的项目:

"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。