img的实时收藏

Question

我正在编写chrome扩展程序，并试图检测网页中的所有图像。

我正在尝试用我的JS代码检测网页上的所有图片，我的意思是：

网页加载后加载的图像
用作背景的图像（在CSS或嵌入式html中）
在网页加载完成后可以加载的图像，例如，在执行google图像搜索时，很容易找到所有图像，但是一旦单击一个图像将其放大，就不会检测到该图像。浏览社交媒体网站也一样。

我现在拥有的代码使查找初始图像变得很容易（1）。但是我在其他两个部分（2）和（3）中挣扎。

这是我当前在contentScript.js中的代码：

var images = document.getElementsByTagName('img');
for (var i = 0, l = images.length; i < l; i++) {
    //Do something
}

我应该如何修改它，以便它实际上可以检测到所有其他图像（2和3）。

我在（2）上看到了类似this one或this one这样的几个问题，但是似乎没有一个答案完全满足我的第二个要求，而三个答案都没有。

Answer 1

对于HTML图像（运行此代码时已经存在）：

document.images

对于CSS图像：

您可能需要在页面的CSS（内联文件或外部文件）上使用REGEX，但这很棘手，因为您需要从相对路径中动态构建完整路径，但这可能并不总是有效。

Getting all css used in html file

对于延迟加载的图像：

您可以使用突变观察者，就像@filip在他的答案中建议的那样

Answer 2

这应该可以解决您的3.问题。我使用了MutationObserver。

如果发生更改，我会检查targetNode并进行回调。

对于您而言，targetNode应该是检查整个文档中更改的根元素。

在回调中，我询问突变是否已添加带有“ IMG”标签的Node。

    const targetNode = document.getElementById("root");

    // Options for the observer (which mutations to observe)
    let config = { attributes: true, childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
        for(let mutation of mutationsList) {
            if (mutation.addedNodes[0].tagName==="IMG") {
                console.log("New Image added in DOM!");
            }   
        }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);

Answer 3

img的实时收藏

就像@vsync所说的那样，查找所有HTML图像就像var images = document.images一样简单。这将是一个实时列表，因此从页面动态添加或删除的所有图像都会自动反映在列表中。

提取背景图像（内联和CSS）

有几种检查背景图像的方法，但是也许最可靠的方法是遍历页面的所有元素并使用window.getComputedStyle来检查每个元素的backgroundImage是否等于{{ 1}}。这将获得内联和CSS设置的背景图片。

none

从var images = []; var elements = document.body.getElementsByTagName("*"); Array.prototype.forEach.call( elements, function ( el ) { var style = window.getComputedStyle( el, false ); if ( style.backgroundImage != "none" ) { images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") } }获取背景图片将以window.getComputedStyle的形式返回完整的CSS background-image属性，因此您需要删除url(...)和{{1} }。您还需要删除网址周围的所有url(或)。您可以使用"

完成此操作

仅在DOM准备就绪后才开始检查，否则您的初始扫描可能会丢失元素。

动态添加的背景图片

这不会提供实时列表，因此您将需要'来观看文档，并检查任何更改的元素是否存在backgroundImage.slice( 4, -1 ).replace(/['"]/g, "")。

在配置观察者时，请确保您的MutationObserver配置将backgroundImage和MutationObserver设置为true。这意味着它可以监视指定元素（在您的情况下为childList）的所有子元素。

subtree

由于搜索背景图片需要您检查DOM中的每个元素，因此您最好同时检查body，而不要使用var body = document.body; var callback = function( mutationsList, observer ){ for( var mutation of mutationsList ) { if ( mutation.type == 'childList' ) { // all changed children are in mutation.target.children // so iterate over them as in the code sample above } } } var observer = new MutationObserver( callback ); var config = { characterData: true, attributes: false, childList: true, subtree: true }; observer.observe( body, config );。

代码

您可能要修改上面的代码，以便除了检查它是否具有背景图像之外，还要检查其标签名称是否为<img>。您还应该将其放在DOM准备就绪时运行的函数中。

更新：要区分图像和背景图像，可以将它们推到不同的数组，例如推到document.images和IMG。为了也标识图像的父级，您可以将images推到第三个数组，例如bg_images。

image.parentNode

在html页面中使用JavaScript检测所有图像

3 个答案:

对于HTML图像（运行此代码时已经存在）：

对于CSS图像：

对于延迟加载的图像：

img的实时收藏

提取背景图像（内联和CSS）

动态添加的背景图片

代码