web-dev-qa-db-ja.com

Chrome拡張機能内のonClickが機能しない

これは最も簡単なことのように思えますが、機能していません。通常のブラウザでは、.htmlファイルと.jsファイルは完全に機能しますが、Chrome拡張機能では、onClick関数は意図したとおりに機能しません。

.jsファイル：

function hellYeah(text) {
  document.getElementById("text-holder").innerHTML = text;
}

.htmlファイル：

<!doctype html>
<html>
  <head>
    <title>
      Getting Started Extension's Popup
    </title>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="text-holder">
      ha
    </div>
    <br />
    <a onClick=hellYeah("xxx")>
      hyhy
    </a>
  </body>
</html>

したがって、基本的にユーザーが「hyhy」をクリックすると、「ha」は「xxx」に変わります。また、ブラウザでは完全に機能しますが、拡張機能では機能しません。なぜなのかご存知ですか？念のため、manifest.jsonも以下に添付します。

前もって感謝します！

manifest.json：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}
javascriptgoogle-chrome-extensiononclick
60
teeZee

Chrome拡張機能では、インラインJavaScriptを使用できません（ documentation ）。これに似た何かをする必要があります。

IDをリンクに割り当て（<a onClick=hellYeah("xxx")>が<a id="link">になります）、 addEventListener を使用してイベントをバインドします。 popup.jsファイルに次を入力します。

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });
});
113
David

理由

これは機能しません。なぜなら、コンテンツセキュリティポリシーを介した拡張機能では、Chrome あらゆる種類のインラインコードを禁止 であるためです。

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

検出方法

これが実際に問題である場合、Chromeはコンソールに次のエラーを生成します。

次のコンテンツセキュリティポリシーディレクティブ「script-src 'self' chrome-extension-resource：」に違反しているため、インラインスクリプトの実行を拒否しました。インライン実行を有効にするには、「unsafe-inline」キーワード、ハッシュ（「sha256 -...」）、またはノンス（「nonce -...」）のいずれかが必要です。

ポップアップのJavaScriptコンソール（一般的なデバッグに便利）にアクセスするには、拡張機能のボタンを右クリックし、コンテキストメニューから[ポップアップの検査]を選択します。

ポップアップのデバッグに関する詳細情報が利用可能です here 。

直し方

すべてのインラインJavaScriptを削除する必要があります。 Chromeドキュメントのガイド があります。

オリジナルが次のようになっているとします：

<a onclick="handler()">Click this</a> <!-- Bad -->

onclick属性を削除して、要素に一意のIDを与える必要があります。

<a id="click-this">Click this</a> <!-- Fixed -->

次に、スクリプト（.jsファイル内にある必要があります、popup.jsである必要があります）からリスナーをアタッチします。

// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", handler);
});

// The handler also must go in a .js file
function handler() {
  /* ... */
}

DOMContentLoadedイベントでのラップに注意してください。これにより、実行時に要素が存在することが保証されます。次に、たとえばドキュメントの<head>にスクリプトタグを追加します。

<script src="popup.js"></script>

JQueryを使用している場合の代替：

// jQuery
$(document).ready(function() {
  $("#click-this").click(handler);
});

ポリシーを緩和する

Q：エラーには、インラインコードを許可する方法が記載されています。コードを変更したくない/変更できない、インラインスクリプトを有効にするにはどうすればよいですか？

A：エラーの内容にもかかわらず、あなたは cannotインラインスクリプトを有効にする ：

インラインJavaScriptの実行に対する制限を緩和するメカニズムはありません。特に、'unsafe-inline'を含むスクリプトポリシーを設定しても効果はありません。

更新：Chrome 46以降、特定のインラインコードブロックをホワイトリストに登録することができます。

Chrome 46の時点で、ポリシーでソースコードのbase64エンコードハッシュを指定することにより、インラインスクリプトをホワイトリストに登録できます。このハッシュには、使用されるハッシュアルゴリズム（sha256、sha384、またはsha512）をプレフィックスとして付ける必要があります。例については、 <script>要素のハッシュの使用法 を参照してください。

ただし、これを使用する理由はすぐにはわかりません。また、onclick="code"などのインライン属性は有効になりません。

36
Xan

私も同じ問題を抱えていて、コードを書き直したくなかったので、コードを変更してインライン宣言イベントを作成する関数を作成しました。

function compile(qSel){
    var matches = [];
    var match = null;
    var c = 0;

    var html = $(qSel).html();
    var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;

    while (match = pattern.exec(html)) {
        var arr = [];
        for (i in match) {
            if (!isNaN(i)) {
                arr.Push(match[i]);
            }
        }
        matches.Push(arr);
    }
    var items_with_events = [];
    var compiledHtml = html;

    for ( var i in matches ){
        var item_with_event = {
            custom_id : "my_app_identifier_"+i,
            code : matches[i][5],
            on : matches[i][3],
        };
        items_with_events.Push(item_with_event);
        compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
    }

    $(qSel).html(compiledHtml);

    for ( var i in items_with_events ){
        $("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
            eval(items_with_events[i].code);
        });
    }
}

$(document).ready(function(){
    compile('#content');
})

これにより、選択したノードからすべてのインラインイベントが削除され、代わりにjqueryで再作成されます。

1
sergio0983

私は自分のケースで使用した例を公開することにしました。スクリプトを使用してdivのコンテンツを置き換えようとしました。私の問題は、Chromeがそのスクリプトを認識/実行しなかったことです。

より詳細に私がやりたかったこと：リンクをクリックし、そのリンクが外部htmlファイルを「読む」ために、それがdivセクションにロードされること。

  • 呼び出されたIDを持つDIVの前にスクリプトを配置すると、スクリプトが機能しないことがわかりました。
  • スクリプトが別のDIVにあった場合、機能しません

  • スクリプトは、指示されたとおりにdocument.addEventListener（ 'DOMContentLoaded'、function（）を使用してコーディングする必要があります

        <body>
    <a id=id_page href ="#loving"   onclick="load_services()"> loving   </a>

        <script>
                // This script MUST BE under the "ID" that is calling
                // Do not transfer it to a differ DIV than the caller "ID"
                document.getElementById("id_page").addEventListener("click", function(){
                document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
            </script>
    </body>

  <div id="mainbody" class="main_body">
        "here is loaded the external html file when the loving link will 
         be  clicked. "
  </div>
0
Elias EstatisticsEU