如何使用 Chrome 扩展中的 java 脚本以编程方式从 UL 中 select LI？

Question

我正在尝试使用 Chrome 扩展以编程方式 select 来自网站 UL 的选项 (LI)。来自网站的HTML代码如下；

<ul class="select-options">
<li data-value="0" class="select-items selected">0</li>
<li data-value="1" class="select-items">1</li>
<li data-value="2" class="select-items">2</li>
<li data-value="3" class="select-items">3</li>
<li data-value="4" class="select-items">4</li>
<li data-value="5" class="select-items">5</li>
<li data-value="6" class="select-items">6</li>
<li data-value="7" class="select-items">7</li>
<li data-value="8" class="select-items">8</li>
<li data-value="9" class="select-items">9</li>
</ul>

这是我在内容脚本中的 javascript 代码；

var xPath = "//ul[( contains(@class,'select-options') )]";
let lst = document.evaluate(xPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if (lst != null)
{
    //For example, How to programmatically set the second LI (The item with data-value="1") selected here?
}

任何人都可以指出正确的方向以编程方式设置特定项目select，类似于用户手动select从下拉列表中设置项目吗？

非常感谢任何帮助。

Answer 1

虽然 XPath 当然是一个选项，但它不是最常见的（到目前为止）。

使用 document.querySelector() with the appropriate attribute selectors and modify the element's classList.

的组合

ul.select-options 的目的是缩小您在页面上的选择范围以避免副作用。

function select(item) {
  // Clear the previously-selected item
  document.querySelector('ul.select-options li.selected').classList.remove('selected');
  
  // "Select" the new item.
  document.querySelector('ul.select-options li[data-value="2"]').classList.add('selected');
}

select(2);

li.selected {
  border: 1px dashed orange;
}

<ul class="select-options">
  <li data-value="0" class="select-items selected">0</li>
  <li data-value="1" class="select-items">1</li>
  <li data-value="2" class="select-items">2</li>
  <li data-value="3" class="select-items">3</li>
  <li data-value="4" class="select-items">4</li>
  <li data-value="5" class="select-items">5</li>
  <li data-value="6" class="select-items">6</li>
  <li data-value="7" class="select-items">7</li>
  <li data-value="8" class="select-items">8</li>
  <li data-value="9" class="select-items">9</li>
</ul>

Answer 2

我不确定你的意思，但也许只使用 <select> 会更方便。在 <ul> 和 <select> 的代码片段中，提供了一个函数以编程方式 select 一个项目。对于 <ul>（为了好玩），添加了一个点击处理程序，即 select 是 both select 元素的点击值。希望对您有所启发。

document.addEventListener("click", handle);

selectItem1(
  document.querySelector(".select-options"), 
  document.querySelector(".select-options li:nth-child(4)"));
selectItem2(document.querySelector(".realSelect"), 3);

// programmatically select from ul
function selectItem1(targetUl, liToSelect) {
  targetUl.querySelectorAll("li").forEach(li => li.classList.remove("selected"));
  liToSelect.classList.add("selected");
  // or do something else with [liToSelect]'s value]
}

// programmatically select from selector
function selectItem2(targetSelector, index) {
  targetSelector.selectedIndex = index;
  // or do something else with the selected [index]
}

function handle(evt) {
  const origin = evt.target;
  const targetUl = origin.closest(".select-options");
  const targetSelect = origin.closest("select");
  if (targetUl) {
    selectItem1(targetUl, origin);
    return selectItem2(document.querySelector(".realSelect"), +origin.dataset.value);
  }
  if (targetSelect) {
    selectItem2(targetSelect, origin.value);
    return selectItem1(
      document.querySelector(".select-options"),
      document.querySelector(`li[data-value="${origin.value}"]`));
  }
}

body {
  font: normal 12px/15px verdana, arial, sans-serif;
  margin: 2rem;
}

.select-options li:hover {
  cursor: pointer;
  background-color: #eee;
}



.select-options li.selected {
  background-color: #FFFFA0;
}

<ul class="select-options">
  <li data-value="0" class="select-items selected">0</li>
  <li data-value="1" class="select-items">1</li>
  <li data-value="2" class="select-items">2</li>
  <li data-value="3" class="select-items">3</li>
  <li data-value="4" class="select-items">4</li>
</ul>

<p>
  Wouldnt it be nice if we had something like a <i>drop down selector</i> or so?
  <br>But wait! Seems like we have that!
</p>
<h3></h3>

<select class="realSelect">
  <option value="0" class="select-items">0</option>
  <option value="1" class="select-items">1</option>
  <option value="2" class="select-items">2</option>
  <option value="3" class="select-items">3</option>
  <option value="4" class="select-items">4</option>
</select>

Answer 3

看起来太复杂了，其实可以简单的实现。我假设该网站不属于您，只需要自动执行列表中的用户操作。如果是，请按以下方式尝试。

function setItem(digit)
{
    var xPath = "//li[( (@data-value='"+digit+"') )]";
    let lst = document.evaluate(xPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (lst != null)
    {
        lst.click();
    }    
}

我使用了相同的 XPath 方式，因为您的示例代码使用了这种方式。

如何使用 Chrome 扩展中的 java 脚本以编程方式从 UL 中 select LI？

How to programmatically select LI from UL using java script in Chrome Extension?

html

javascript

google-chrome-extension