在浏览器操作弹出窗口中显示外部内 [英] Showing external content inside browser action popup

问题描述

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

1. 会打开弹出窗口


2. 调用外部API来显示广告

以下是我拥有的内容：

popup.html

 < div class =v11containerid = v11container>某些文字< / div> 
< script src =http://b.v11media.com/js/client_api/api.js> < /脚本> // 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> //使用api显示广告
  

理想情况下，我希望在点击广告时展示广告浏览器操作按钮。但是，所有正在显示的是一些文本。我的控制台没有显示任何错误。问题是来自我引用外部JavaScript的事实，还是因为我完全错过了某些东西？注意，我已经在正常的HTML页面上重现了这个API调用，并取得了巨大的成功。所以我不认为api调用是问题。

另外为了将来的功能，我希望基于某些事件显示广告。因此，是否有可能使用JavaScript或Chrome功能显示浏览器动作弹出窗口，还是必须以不同的方式进行操作？

让我知道是否需要额外信息。

解决方案

再次检查您的控制台，必须有一些错误。注意：你必须检查负责popup.html的控制台<右键单击弹出窗口>，而不是负责标签内容的控制台（Windows上的F12），当然不是负责控制台的控制台（在chrome>扩展页面中查看视图）。

/ contentSecurityPolicy＃JSExecutionrel =nofollow> 内联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。

I have a Chrome extension that when the user clicks the browser action button the extension

1. opens the popup
2. calls the external API to display an ad

Here's what I have:

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

Ideally I would like the ad to show when I click the browser action button. But all that is being shown is the "Some Text". My console isn't showing any errors. Is the problem coming from the fact that I'm referencing to external JavaScript or is it because of something that I've completely missed? Side note, I've reproduced this API call on a normal HTML page with great success. So I don't think the api call is the problem.

Also for future functionality I would like the ad to be displayed based on certain events. Is it therefore possible to show that browser action popup using JavaScript or the Chrome functions or do I have to go about this a different way?

Let me know if you require additional information.

解决方案

Check your console again, there must be some errors in it. Note: you have to check the console responsible for the popup.html (right click on the popup window) and not the console responsible for the tab content (F12 on windows) and of course not the console responsible for the background page (inspect views in chrome>extensions page).

Content Security Policy says: Inline JavaScript will not be executed. So you need to move your code into a javascript file (popup.js).

Secondly, it is not recommended to use external source code, but if you insist of it, then you have to handle the content_security_policy item in your manifest file:

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

Note: in this script-src whitelist you can only use https, not http.

这篇关于在浏览器操作弹出窗口中显示外部内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！