55

画像トリミング ウィジェットの Chrome 拡張機能の作成に取り組んでいます。私のコードは次のpopup.htmlとおりです。

<body>
    <textarea id="widget_script" style="border:1px solid #ccc;padding:5px;width:600px" rows="5" readonly></textarea>
    <script type="text/javascript">
        var protocol=window.location.protocol;
        var host= window.location.host;
        var head=('<div id="wd_id" style="margin-bottom: 20px;"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></\script>
    <script type="text/javascript" src="'+protocol+'//'+host+'Image_crop/cropimages/img_crop_widget.js'+'"><\/script>
    <script type="text/javascript">init_widget()<\/script>');
        document.getElementById("widget_script").innerHTML=head;
    </script>
</body>

変数protocolとhostは、ブラウザーの URL からプロトコルとホストを取得します。これを Chrome 拡張機能として統合しようとしたところ、機能しません。完全に機能すると、テキストエリアに次のコードが表示されます。

<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>

JSコードを外部JSファイルに配置したり、ファイルをmanifest.json呼び出すときにファイルを呼び出したりするようなことはほとんどありpopup.htmlませんが、何も機能しませんでした。

私が間違っていること、またはそれを機能させるために他に何をすべきか教えてもらえますか?

前もって感謝します...

4

4 に答える 4

96

Chrome 拡張 CSP ドキュメントから:

インライン JavaScript は実行されません。<script>この制限により、インラインブロックとインライン イベント ハンドラ (例: )の両方が禁止されます<button onclick="...">。

次のようなインライン スクリプトを拡張 HTML に含めることはできません。

<script>alert("I'm an inline script!");</script>

<button onclick="alert('I am an inline script, too!')">

代わりに、スクリプトを別のファイルに配置する必要があります。

<script src="somescript.js"></script>
于 2013-04-22T18:16:23.013 に答える
12

ファイルに追加する必要がcontent_security_policyありmanifest.jsonます：

"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"

コンソールからハッシュを見つけることができます。

ここに画像の説明を入力

于 2018-09-25T12:24:12.143 に答える