如何将外部脚本加载到我的Chrome扩展中？

我想从我的Chrome扩展程序中弹出一个包含Facebook登录示例代码的选项卡。到目前为止，我在本例中直接使用了教程代码。如何将外部脚本加载到我的Chrome扩展中？

该选项卡正常打开，但是，由于跨站点安全策略问题，Facebook的JavaScript无法加载，而且我也收到了内联脚本错误 - 这看起来很奇怪（除非动态添加的元素可能具有内联脚本这触发了错误信息？）

我在哪里可以学习如何正确地做这种事情？

错误：

Refused to load script from 'https://connect.facebook.net/en_US/all.js' because of Content-Security-Policy. 
Refused to execute inline script because of Content-Security-Policy.

background.js：

chrome.tabs.create({url: 'popup.html'})

popup.html：//来自Facebook API文档

<head> 
    <title>Facebook Client-side Authentication Example</title> 
    <script type="text/javascript" src="popup.js"></script> 
    </head> 
    <body> 
    <div id="fb-root"></div> 
    <script> 

    </script> 

    <h1>Facebook Client-side Authentication Example</h1> 
     <div id="auth-status"> 
     <div id="auth-loggedout"> 
      <a href="#" id="auth-loginlink">Login</a> 
     </div> 
     <div id="auth-loggedin" style="display:none"> 
      Hi, <span id="auth-displayname"></span> 
     (<a href="#" id="auth-logoutlink">logout</a>) 
     </div> 
    </div> 

    </body> 
</html>

popup.js示例登录代码：//来自facebook dev的示例代码

// Load the SDK Asynchronously 
(function (d) { 
    var js, id = 'facebook-jssdk', 
     ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) { 
     return; 
    } 
    js = d.createElement('script'); 
    js.id = id; 
    js.async = true; 
    js.src = "https://connect.facebook.net/en_US/all.js"; 
    ref.parentNode.insertBefore(js, ref); 
}(document)); 

// Init the SDK upon load 
window.fbAsyncInit = function() { 
    FB.init({ 
     appId: '', // App ID 
     channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File 
     status: true, // check login status 
     cookie: true, // enable cookies to allow the server to access the session 
     xfbml: true // parse XFBML 
    }); 

    // listen for and handle auth.statusChange events 
    FB.Event.subscribe('auth.statusChange', function (response) { 
     if (response.authResponse) { 
      // user has auth'd your app and is logged into Facebook 
      FB.api('/me', function (me) { 
       if (me.name) { 
        document.getElementById('auth-displayname').innerHTML = me.name; 
       } 
      }) 
      document.getElementById('auth-loggedout').style.display = 'none'; 
      document.getElementById('auth-loggedin').style.display = 'block'; 
     } else { 
      // user has not auth'd your app, or is not logged into Facebook 
      document.getElementById('auth-loggedout').style.display = 'block'; 
      document.getElementById('auth-loggedin').style.display = 'none'; 
     } 
    }); 

    // respond to clicks on the login and logout links 
    document.getElementById('auth-loginlink').addEventListener('click', function() { 
     FB.login(); 
    }); 
    document.getElementById('auth-logoutlink').addEventListener('click', function() { 
     FB.logout(); 
    }); 
}

来源

2012-09-20 blueberryfields

http://developer.chrome.com/extensions/contentSecurityPolicy.html将是一个好的开始，就像在HTML5Rocks上的"An Introduction to Content Security Policy"一样。

在这种情况下，它看起来像你需要白名单https://connect.facebook.net;您可以将"content_security_policy": "script-src 'self' https://connect.facebook.net; object-src 'self'"添加到manifest.json文件中。

内嵌脚本错误可能是由于popup.html中的空script标记，但也可能是由于Facebook的脚本正在注入页面。只有一种方法可以找出... :)

来源

2012-09-20 21:42:46

如果要将多个域列入白名单，请使用单个空格将它们分开，然后在列表末尾添加一个分号，并且还可以包含通配符*以捕获域名变体，如：https：//*.facebook.* https：//*.google.com https://www.apple.com; – headwinds

该死！我的所有访客都必须这样做吗？我的'manifest.json'？哪里？ –

如何将外部脚本加载到我的Chrome扩展中？

回答

相关问题