将脚本元素插入浏览器操作页无效

insert script element into browser action page not work

本文关键字：操作 无效 浏览器 插入 脚本 元素      更新时间：2023-09-26

当浏览器操作页面（popup.html）弹出时，我正试图从chrome扩展访问twitter。因为它是跨域访问，而chrome扩展跨域访问似乎只支持http，所以我使用Jsonp访问twitter api（https）。如果我直接在浏览器中打开popup.html，它会很好地工作，但它拒绝在chrome扩展中工作。

//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();
});

提前谢谢。

您的代码由于CSP而失败。请参阅此答案以了解如何调试popup.html。

最好的解决方案是在Chrome扩展中不使用JSONP，而是使用XMLHttpRequest:

从您的消息中删除callback密钥，并将var script_element = ....替换为

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

如果在执行上一步后得到"SyntaxError:Unexpected token m"，请确保已从消息中删除callback密钥。否则，Twitter的API仍将使用JSONP格式的响应进行回复。

如果出于某种原因，您仍然想使用JSONP，并且Web服务托管在https:scheme上，您也可以通过在manifest.json:中添加以下字段来放宽CSP

"content_security_policy": "script-src 'self' https://api.twitter.com; object-src 'self'"
相关文章：