0

我正在创建一个 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 提到的，如果页面不是静态的，但它可以满足我的需要，这不是一个完美的方法

4

1 回答 1

0

这是一个非常广泛的问题，原因是：通常，您无法可靠地查明页面上的元素，特别是如果它是动态的。

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

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

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

PS 请参阅此问题以查找元素的“XPath”。同样，只能在静态页面中可靠地工作。

于 2014-04-25T10:06:41.880 回答