Showing external content inside browser action popup

问题

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

opens the popup
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.

回答1:

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.

回答2:

Here's how I've implemented a solution based on the answers provided. Thank you for your help.

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:

All that was required in the manifest was what Skalár Wag described in his answer above.

来源：https://stackoverflow.com/questions/22796928/showing-external-content-inside-browser-action-popup

标签

javascript

google-chrome

google-chrome-extension