insert script element into browser action page not work

Question

I am trying to access twitter from chrome extension when the browser action page(popup.html) popup. Because it is cross-domain access and chrome-extension cross-domain access seems only support http, so I am using Jsonp to access the twitter api(https). It works well if I open the popup.html directly in browser, but it refuse to work in chrome extension.

//manifest.json

"permissions": [
  "tabs", "http://*/*", "https://*/*" ,"unlimitedStorage"
 ]

//popup.html

<html>
<head>
    <meta charset="utf-8">
    <script src="../js/jquery.min.js"></script> 
    <script src="../oauth/oauth.js"></script>
    <script src="../oauth/sha1.js"></script>
    <script src="../js/popup.js"></script>
    </head>
    <body>
   ...
    </body>
</html>

//popup.js

function mycallback(json)
{
    alert("callback"); //never get called in chrome extension
}

function getTwitter()
{
    var url = "https://api.twitter.com/1.1/statuses/user_timeline.json";


    var accessor = {
      token: "...",
      tokenSecret: "...",
      consumerKey : "...",
      consumerSecret: "..."
    };


    var message = {
      action: url,
      method: "GET",
      parameters: {
                    "callback":"mycallback",
                    "include_entities":true,
                    "include_rts":true,
                    "user_id":"...",
                    "count":1
                  }
    };

    OAuth.completeRequest(message, accessor);
    OAuth.SignatureMethod.sign(message, accessor);
    url = url + '?' + OAuth.formEncode(message.parameters);

   // Create a new script element
    var script_element = document.createElement('script');

    // Set its source to the JSONP API
    script_element.setAttribute('type', 'text/javascript');
    script_element.setAttribute('id', 'script_element');
    script_element.setAttribute('src', url);
    if(!document.getElementById('script_element'))
        document.getElementsByTagName('head')[0].appendChild(script_element);
}



$(document).ready(function(){
    getTwitter();
});

Thanks in advance.

score 1 · Accepted Answer · edited May 23 '17 at 12:28

Your code is failing because of the CSP. See this answer to learn how to debug popup.html.

The best solution is to not use JSONP in a Chrome extension, but XMLHttpRequest:

Remove the callback key from your message, and replace var script_element = .... with

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
    mycallback(JSON.parse(xhr.responseText));
};
xhr.send();

If you get "SyntaxError: Unexpected token m" after following the previous step, make sure that you've removed the callback key from the message. Otherwise, Twitter's API will still reply with a JSONP-formatted response.

If you still want to use JSONP, for some reason, and the webservice is hosted on the https: scheme, you can also relax the CSP, by adding the following field to your manifest.json:

"content_security_policy": "script-src 'self' https://api.twitter.com; object-src 'self'"

insert script element into browser action page not work

1 Answers1