web-dev-qa-db-ja.com

拡張機能は、コンテンツセキュリティポリシーディレクティブが原因でスクリプトのロードを拒否します

以下は私のHTMLのコードです

スクリプト：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>

HTML：

      <button name="btnlogin" id="btnlogin">Login</button><br/><br/>

そして、次はjsです

$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
   alert("s");
 });
});

マニフェストファイル：

{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
 "version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}

このコードを単にブラウザーで実行すると、アラートが適切に表示されるのではなく、chrome拡張機能として実行すると、次のエラーが発生することがわかりました。

Uncaught ReferenceError：$ is not defined

そして

スクリプト「 http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js 」のロードを拒否次のコンテンツセキュリティポリシーディレクティブに違反します： "script-src 'self' chrome-extension-resource："。

これらのエラーが何なのかわかりません。拡張機能の理解を助けてください。

ありがとうございました

jquerygoogle-chromegoogle-chrome-extensioncontent-security-policy
49
Maharshi

Chrome拡張機能では、外部スクリプトソースは、マニフェストの拡張機能の コンテンツセキュリティポリシー （CSP）によって明示的に許可される必要があります。

外部のJavaScriptまたはオブジェクトリソースが必要な場合は、スクリプトの受け入れ元である安全なオリジンをホワイトリストに登録することで、ポリシーをある程度まで緩和できます。

HTTPSを介してexample.comからスクリプトリソースをロードできるようにする緩和されたポリシー定義は、次のようになります。

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

スクリプトはHTTPS経由でのみ拡張機能にロードできるため、HTTPS経由でjQuery CDNリソースをロードする必要があります。

<script src="https://ajax.googleapis.com/..."></script>

そして、変更されたCSPをマニフェストに追加して、そのHTTPSリソースを許可します。

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a 'browser action' with kittens.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

ただし、特定の場合のより良い解決策は、インターネットから読み込むのではなく、ローカルに拡張機能にjQueryを含めることです（たとえば、拡張機能は現在オフラインで動作しません）。拡張フォルダにjQueryのコピーを含め、スクリプトタグの相対パスでそれを参照します。 jQueryライブラリとHTMLポップアップファイルが同じサブディレクトリにあると仮定して、次のようにします。

<script src="jquery-x.y.z.min.js"></script>
61
apsillers