Question

我目前正在尝试构建我的第一个Chrome扩展程序，但我的代码存在轻微问题。

我想使用XMLHTTPRequest和xpath从外部网站显示特定号码作为我的图标上的徽章。我在background.js文件中使用的代码如下：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // innerText does not let the attacker inject HTML elements.
    document.getElementById("resp").innerText = xhr.responseText;
  }
}


xhr.send();
var xmlDoc = xhr.responseXML;
xmlDoc.setProperty('SelectionLanguage', 'XPath');

var badgeText = xmldoc.documentElement.selectSingleNode("//[@id='main']/div/div/section/div[1]/div[2]");

chrome.browserAction.setBadgeText({text: badgeText});
chrome.browserAction.setBadgeBackgroundColor({color: "#1f729f"});

我知道这段代码可能非常糟糕，但这是我的第一个扩展，我真的很感激任何帮助。

提前致谢。

Answer 1

看起来你期待在xhr.send();

之后立即做出回应

这里的代码snipet正在我的一个扩展中工作（在回调函数中注意 this ）：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com", true);
xhr.onreadystatechange = function() {
  console.log("XHR callback readyState = " + this.readyState);
  if (this.readyState == 4) {
    // innerText does not let the attacker inject HTML elements.
    document.getElementById("resp").innerText = this.responseText;
    var xmlDoc = this.responseXML;
    xmlDoc.setProperty('SelectionLanguage', 'XPath');

    var badgeText = xmldoc.documentElement.selectSingleNode("//[@id='main']/div/div/section/div[1]/div[2]");

    chrome.browserAction.setBadgeText({text: badgeText});
    chrome.browserAction.setBadgeBackgroundColor({color: "#1f729f"});
  }
}

xhr.send();

这样代码只有在响应可用后才会执行。

希望这会有所帮助; - ）

使用xpath和Cross-Origin XMLHttpRequest构建Chrome扩展

1 个答案: