跨多个页面隐藏元素

Question

我正在创建一个 chrome 扩展程序，当点击时会在页面上隐藏一个 jQuery 元素。

我需要在 chrome.storage API 中存储对这个元素的引用，以便以后加载页面时可以再次隐藏该元素。

我知道 DOM 树是在页面加载时重建的，但我不确定这是否会产生任何影响。该元素也可以是页面上的任何内容，因此不一定具有类/ID 名称。

存储参考的最佳方式是什么？我对如何做到这一点一无所知（对 JavaScript 来说是全新的）。

更新

按照 Xan 的建议，我现在使用 xPath 来存储对元素的引用。

//获取元素

var elem = e.target || e.srcElement;
$(elem).click(function () {
            xPathOfElem = getElementXPath(elem); //Get xPath of element
            updateStorage(xPathOfElem);
            $(elem).hide("");
            return false;
        });

//存储它

function updateStorage(xPathOfElem) {
    chrome.storage.sync.set({"element":xPathOfElem} //set xPath to storage
        , function (data) {});
};

//稍后加载时检索它

function getStorage() {
     chrome.storage.sync.get(null, function (data) {
         $(getElementsByXPath(document, data.element)).hide(""); //get and hide element
     });
}

window.onload = function () {
     getStorage();
 };

正如 Xan 提到的，如果页面不是静态的，但它可以满足我的需要，这不是一个完美的方法

Answer 1

这是一个非常广泛的问题，原因是：通常，您无法可靠地确定页面上的元素，尤其是动态元素。

没有适用于每个页面的“单一”解决方案。但是，假设您可以设计一种精确定位元素的方法，您应该查看DOM XPath。

这是一种描述如何查找元素的丰富方式，比类/id 名称更通用。而且它只是一个字符串，因此可以轻松存储。一旦你有了这个描述，你就可以找到元素using document.evaluate。

缺点是，没有元素的“XPath”之类的东西。你需要想出你自己的方法来为给定的元素构造一个，就像我说的那样自动这样做是几乎不可能的。当然欢迎您尝试涵盖许多常见情况，但找到通用解决方案是没有希望的。

附：请参阅this question 以查找元素的“XPath”。同样，只能在静态页面中可靠地工作。