如何用 Tampermonkey 替换弹出窗口的 HTML 代码？

Question

大家好，

我开始使用 Tampermonkey（或 Firefox 用户的 Greasemonkey），我想用另一个替换我的大部分 HTML 代码。

我的问题的复杂部分是我要替换的代码在弹出窗口中。当我单击按钮以获取页面内的弹出窗口时，我要更改的代码出现在开发工具上。在我不点击那个按钮之前，那部分代码不会出现。所以用户脚本不会影响弹出窗口..

页面链接（您需要输入英国或美国地址才能在弹出窗口中获得“自定义此项目”按钮）：https://www.clos19.com/en-us/hennessy-engravable-xo-p-100711 （适度饮酒，顺便说一句。）

_{（来源：hostpic.xyz）}

我影响了控制台的弹出窗口，仅在弹出窗口出现时。但我希望弹出窗口在它出现之前就受到影响。

我想把这部分弹窗转起来

<mh-image format="dialog-half-width" src="/medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw" alt="">
    <div class="image-map-wrapper ">
        <img src="/medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=490px:653px 490w,
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=980px:1306px 980w" 
            class="img-format__dialog-half-width" title="" alt="" srcset="
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=480px:640px 480w,
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=960px:1280px 960w,
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=370px:493px 370w,
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=740px:986px 740w,
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=490px:653px 490w,
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=980px:1306px 980w,                        
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=536px:715px 536w,
            /medias/HENNESSY-COGNAC-XO-75CL-100711-7.jpg?context=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw&amp;resize=1072px:1430px 1072w
            " sizes="(min-width: 1280px) 536px,
            (min-width: 800px) 490px,
            (min-width: 640px) 370px,
            480px">
    </div>
</mh-image>

进入那个

<mh-image format="dialog-half-width" src="https://mypic.png" alt="">
    <div class="image-map-wrapper ">
        <img src="https://mypic.png" sizes="(min-width: 1280px) 536px,
            (min-width: 800px) 490px,
            (min-width: 640px) 370px,
            480px">
    </div>
</mh-image>

在写这篇文章之前，我做了很多搜索。我尝试使用 RegExp 将实际图片替换为我的图片。如果我找到模式（其中包含图片的路径），我会用我的图片替换它。 （该解决方案的来源：Replace images source for all images）

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.clos19.com/en-us/hennessy-engravable-xo-p-100711
// @grant        none
// @require      http://code.jquery.com/jquery-3.4.1.js
// ==/UserScript==

var $ = window.jQuery;

$(document).ready(function() {
  var pattern = new RegExp('/^\/medias\/HENNESSY\-\COGNAC\-XO\-75CL\-100711\-7\.jpg\?context\=bWFzdGVyfGltYWdlc3wzNjA3MjA3fGltYWdlL2pwZWd8aW1hZ2VzL2hlNS9oMmEvODk0ODc2ODQ0MDM1MC5qcGd8ZGZmNTFiMjk2OTAzYWZkMDc3OTA4Mjg4Y2QzNjBiMTUzOWMzODg4NjhiNDIyMDg3NDdlNGE3OGQyZjdiN2Q0Yw');
  var allImg=document.getElementsByTagName("img"), i=0, img;

while (img = allImg[i++])
{
    if (img.src.match(pattern)) {
        img.src = img.src.replace(pattern, 'https://mypic.png');
    }
}
});

等待..点击自定义按钮时会触发弹出窗口..

<button ($click)="checkStock()" class="customise button button-primary expanded transparent">
    Customize this item
    <i class="icon icon-edit-pencil"></i>
</button>

所以我问自己是否可以同时触发用户脚本功能..

提前感谢您的帮助，各位！

编辑：感谢@wOxxOm，我设法检测到带有用户脚本的弹出窗口。但我仍然无法修改它。我试过这个：

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.clos19.com/en-us/hennessy-engravable-xo-p-100711
// @grant        none
// @require      http://code.jquery.com/jquery-3.4.1.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

waitForKeyElements (
    ".reveal-overlay",
    replaceDuplicate
);

function replaceDuplicate (c) {
    document.getElementsByTagName("mh-image").src = "https://mypic.png";
    document.getElementsByClassName("img-format_dialog-half-width").src = "https://mypic.png";
    document.getElementsByClassName("img-format_dialog-half-width").srcset = "";
}

Answer 1

我会带着答案回来。我们必须研究父元素和子元素。

waitForKeyElements (
    ".reveal-overlay",
    replaceDuplicate
);

function replaceDuplicate (c) {
    var elem = document.createElement("img");
    elem.setAttribute("src", "mypic.png");
    elem.setAttribute("height", "768");
    elem.setAttribute("width", "1024");
    elem.setAttribute("alt", "TM - Customizable image");
    var parentElem = document.getElementsByClassName("class_of_the_div")[0];
    console.log(parentElem);
    // Remove all previous images
    parentElem.innerHTML = '';
    // Add new customizable image
    parentElem.appendChild(elem);
}

谢谢！