如何將外部腳本加載到我的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擴展中？

回答

相關問題