在Chrome扩展程序中刮取DOM值

Posted 2021-04-05

我正在使用Chrome扩展程序抓取用户的页面。 Extension接收API响应，其中包含正确的document.querySelector(x)命令。然后它尝试找到该元素，修剪其innerText属性，或者获取其value属性：

 //I've removed some additional fields here to focus on the one I'm currently testing
 message = {
  txtFName: {
    selector: fieldmap.AtsMapping[5].firstName,
    value: null
  }

  //line 10450 is the one below
  console.log(fieldmap.AtsMapping[5].firstName);

  Object.keys(message).forEach((key) => {
    const el = message[key].selector;

    if (el) {
       console.log("Exists in DOM")
        if(el.innerText && el.innerText.length > 0) {
           console.log("Has inner text property");
        message[key].value = el.innerText.trim();
        }
        else {
            console.log("Doesnt have inner text");
        message[key].value = el.value;
        }
    }
  });

请注意我的控制台：

• 显示API响应中的querySelector
• 无法在DOM中找到该元素（即控制台没有说“存在于DOM中”）
• 但是当我输入附加.innerText的相同命令时，我得到“Jane”，正确值。

我的猜测是，API响应（一个JSON对象）没有被正确地理解为javascript。但我不知道如何转换它。

答案

您有一个值为"document.querySelector('#txtFName')"的字符串，而不是实际的函数调用。你必须使用eval或类似的功能。

EVAL： const el = eval(message[key].selector);

免责声明：由于安全风险，通常不建议使用这些功能。例如，如果某些字符串来自用户输入，则恶意攻击者可以注入任意代码，然后可以在其他用户的浏览器上运行。如果这是唯一可行的解​​决方案，您应该清理输入。

我还将提到完整性的替代方案。 Function constructor可用于创建一个以字符串为主体的新函数。这与eval具有相同的安全风险。