Question

我正在阅读Chrome扩展程序代码。在其中一个html文件（用于设置）中，源代码显示有一个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子项，而当我使用Chrome开发人员查看页面的DOM时会出现option个孩子工具。最可能的原因是什么？扩展中的某些内容脚本是否可以更改设置页面的DOM？另外，编写这样的代码有什么好处？

谢谢！

Answer 1

我这样做是为了扩展工作。我正在使用Javascript在select中加载额外的选项。我这样做是因为选项的数量是动态的。我现在没有可用的源代码，但如果您愿意，我可以稍后发布示例

<强>更新

以下是一些可能填充select元素的JavaScript的示例。我使用jQuery附加选项并使用jQuery的each迭代我的主机列表。我有两个静态选项“Default”和“None”是使用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() ));
    })
}

Chrome扩展程序的奇怪设置/选项页面

1 个答案: