Question

我编写了一个Chrome扩展程序，该程序可从食谱管理器应用程序的云服务中获取购物清单，并将每种成分添加到超市的在线购物搜索页面中。

该网站是Tesco Groceries，我正在使用“搜索列表项”页面。

到目前为止，我已经设法创建了扩展名并编写了所有代码。我有一个带有按钮的弹出窗口，按下该按钮会调用内容脚本。内容脚本调用后台脚本，该后台脚本通过jQuery ajax调用进行实际的HTTP提取，并将结果传递回内容脚本。

然后，内容脚本最终遍历结果。购物清单页面的结构为表格，每个元素均显示为

    <input class="multi-search-form__item-field" data-auto="multisearch-list-item" type="text" id="listItem3" name="listItems" placeholder="" maxlength="99" value="">

我愿意


    for (index in json.result){
        selector = "#listItem" + index;
        $(selector).focus()
          .val(json.result[index].name)
          .attr("value", json.result[index].name)
          .change();        
    }

这实际上似乎起作用，并且所有正确的文本元素都出现在网页中。但是，提交按钮不会变为活动状态。

如果我手动更改（键盘和鼠标）任何listItem文本字段，则所有其他文本字段输入都会消失，但是我编辑过的那个仍然存在。然后，提交按钮将变为活动状态。

我注意到检查文档的HTML显示自动完成的元素的value属性保持空白，但是手动更改的元素具有正确的值。我尝试使用设置.val，.attr（“ val”，）的各种组合，以及使用focus（），change（），甚至尝试在输入值后模拟空格键的按键。什么都没有。

例如：我的购物清单中有3种商品：牛奶，鸡蛋和豆子。我打开网页，单击扩展程序中的按钮，然后该网页显示更新的文本字段，其中分别包含牛奶，鸡蛋和豆子。然后，单击带有“鸡蛋”的文本框，然后按空格键。现在，第二个列表框显示“ eggs”，而其他两个框变为空白。

编辑：作为附加说明，如果我只提交表单，该表单就可以正常工作，并且会出现在线购物页面，并在列表中显示结果。但是，初始列表仅显示10个文本字段，并且在您开始输入框9时似乎会动态添加更多内容。但是，以编程方式填充该框并不会使其产生更多的文本框，我的列表最多包含9个项目

Chrome扩展程序对Javascript DOM的修改消失了

0 个答案: