如何使用我的firefox-addon进行持久的DOM更改？

Question

目前，我正在尝试编写我的第一个firefox插件。目标很简单:我试图找到网站上出现的每个特定用户名，并将它们替换为一个字符串。我可以手动搜索这些匹配项，因为数量不是很大。这适用于网站的HTML中出现的一个元素，该元素有一个ID，并显示在网站的每个实例的标题中：

<a href="/user/MyUserName" id="user-profile-name" class="head-link">MyUserName</a>

这就是我用字符串替换用户名的方法：

document.getElementById("user-profile-name").innerHTML = "The String";

我尝试了这个和许多其他方法来处理其他实例，它们没有任何id，它们主要是类：

<a href="/user/MyUsername" class="user um1">MyUserName</a>

如果我尝试用相同的方法更改它们，它在我第一次加载插件时起作用，但当我访问一个新页面(使用出现用户名(用户um1)时使用的相同类)或重新加载页面时，它们只是改回用户名。

var list = document.getElementsByClassName("um1");
for (i=0; i<list.length; i++) {
  list[i].innerHTML = "The String";
}

如何才能使这些更改持久化？更改应该是可视的，插件的目的是隐藏用户名。

Answer 1

这些更改不能持久地进行。每次加载该站点的页面时，都需要应用它们。但是，如果使用querySelectorAll()，执行此操作会更容易。

var list = document.querySelectorAll("#user-profile-name,.um1");
for (i=0; i<list.length; i++) {
  list[i].innerHTML = "The String";
}