1

Chrome拡張コードを読んでいます。そのhtmlファイルの1つ（設定に使用）に、ソースコードはselectこのような要素があることを示しています

<select id="hostselect"></select>

option要素の子としての要素がないことに注意してくださいselect。ただし、Chromeで拡張機能の設定ページを開くと、そのselect要素に対応するドロップダウンリストがあり、さらに、Chrome開発者ツールを使用してこの設定ページを調べると、select要素にoption子があることが示されます。

<select id="hostselect">
  <option value="host1">host1</option>
  <option value="hots2">host2</option>
</select>

option設定ページのソースコードをテキストエディタでoption表示すると子が表示されないのに、Chromeデベロッパーツールを使用してページのDOMを表示すると子が表示されるのはなぜかわかりません。これの最も可能性のある理由は何でしょうか？拡張機能の一部のコンテンツスクリプトは、設定ページのDOMを変更できますか？また、このようなコードを書くことの利点は何ですか？

ありがとう！

4

1 に答える 1

1

私は仕事での拡張のためにこれを行います。私はJavascriptを使用して、selectに追加のオプションをロードしています。オプションの数が動的であるため、これを行います。現在利用できるソースはありませんが、必要に応じて後で例を投稿できます

アップデート

selectこれは、要素に入力される可能性のあるJavaScriptの例です。私はjQueryを使用してオプションを追加し、jQueryを使用してホストのリストを反復処理していますeach。「デフォルト」と「なし」の2つの静的オプションがあり、で生成された動的リストがあります。getHosts()

var hosts = getHosts();
if(hosts) {
    var selectElement = $("#hostSelect");
    selectElement.append($("<option></option>").attr("value", "0").text("-- Default Host --"));
    selectElement.append($("<option></option>").attr("value", "-1").text("-- No Host Selected --"));
    $.each(hosts, function(key, host) {
        selectElement.append($("<option></option>").attr( "value", host.getHostID() ).text( host.getName() ));
    })
}
于 2012-07-07T02:25:25.093 に答える