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。

这是一种描述如何查找元素的丰富方式，比class / id名称更通用。它只是一个字符串，因此可以轻松存储。获得此说明后，您可以找到元素using document.evaluate。

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

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

在多个页面中隐藏元素

1 个答案: