我如何执行一个函数，当一个div与一个特定的css创建?

Question

我正在开发一个篡改猴子脚本，以便在出现时填充弹出窗口，特别是这个。

所以当页面启动时，我点击一个按钮，这将创建一个新的弹出窗口，它是一个具有特定类的div。

这个想法是，当这个弹出窗口被启动时，执行一段代码来填充弹出窗口。

我正在尝试使用以下代码:

/ ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        
// @icon         https://www.google.com/s2/favicons?domain=atlassian.net
// @grant        none
// ==/UserScript==
(function() {
'use strict';
document.getElementById('jira-dialog-heading').addEventListener('click', function() {
alert('do something');
});
})();

但不工作

我该怎么做?

编辑1

所有代码已更新

控制台没有错误

感谢

Answer 1

从上面的注释…

"有两个选项。OP拥有脚本和/或可以订阅弹出式启动过程/事件。在这种情况下，OP可以编写和/或挂钩自定义事件处理代码。OP不拥有脚本和/或不能订阅弹出式启动过程/事件。在这种情况下，OP需要使用MutationObserver.">

接下来提供的代码针对第二种场景，并尝试涵盖许多可能但合理的方式，以显示弹出窗口如何改变DOM…

// custom specific popup handling
function handlePopupShow(popupNode) {
console.log('handle popup show :: node ...', popupNode);
}
function handlePopupHide(popupNode) {
console.log('handle popup hide :: node ...', popupNode);
}

// The popup specific mutation handler, the observers callback function.
function handleChildNodeAndClassNameMutation(mutationList/*, observer*/) {
mutationList.forEach(mutation => {
const { type, attributeName } = mutation;
if (type === 'attributes' && attributeName === 'class') {
const { target } = mutation;
if (target.matches('.popup-specific-name.show')) {
handlePopupShow(target);
} else if (
target.matches('.popup-specific-name.hide') ||
target.matches('.popup-specific-name:not(.show)')
) {
handlePopupHide(target);
}
} else if (type === 'childList') {
const {
addedNodes: [ addedTargetNode ],
removedNodes: [ removedTargetNode ],
} = mutation;
if (
addedTargetNode?.matches?.('.popup-specific-name')
// addedTargetNode?.matches?.('.popup-specific-name.show')
) {
handlePopupShow(addedTargetNode);
} else if (
removedTargetNode?.matches?.('.popup-specific-name')
) {
handlePopupHide(removedTargetNode);
}
}
});
}
// - The to be observed target node.
// - Due to detecting a popup specifc element
//   it has to be the `document.body`.
const popupMutationTarget = document.body;
// Defines the to be observed popup specific mutations.
const popupMutationConfig = {
attributeFilter: ['class'],
childList: true,
subtree: true,
};
// Create mutation observer.
const popupObserver =
new MutationObserver(handleChildNodeAndClassNameMutation);
// // Start target node observation for popup specific mutations.
// popupObserver.observe(popupMutationTarget, popupMutationConfig);
// // Does stop the observation.
// popupObserver.disconnect();

// bring test case to life.
function togglePermanentPopup(/* evt */) {
document
.querySelector('.popup-specific-name.permanent')
.classList.toggle('show');
}
function toggleNonPermanentPopup(/* evt */) {
let popupNode =
document.querySelector('.popup-specific-name.non-permanent');
if (popupNode) {
popupNode.remove();
} else {
popupNode = document.createElement('div');
popupNode.classList.add('popup-specific-name', 'non-permanent');
popupNode.textContent =
'non permanent dom element, show and hide by insert and remove';
document.body.prepend(popupNode);
}
}
document
.querySelector('#toggle_permanent_popup')
.addEventListener('click', togglePermanentPopup);
document
.querySelector('#toggle_non_permanent_popup')
.addEventListener('click', toggleNonPermanentPopup);
let inObservation = false;
function toggleObservation({ target }) {
if (inObservation) {
// Does stop the observation.
popupObserver.disconnect();
target.textContent = 'Start observation';
console.log('+++ Observer disconnected +++');
} else {
// Start target node observation for popup specific mutations.
popupObserver.observe(popupMutationTarget, popupMutationConfig);
target.textContent = 'Stop observation';
console.log('+++ Observer is running +++');
}
inObservation = !inObservation;
}
document
.querySelector('#toggle_observation')
.addEventListener('click', toggleObservation);

.popup-specific-name {
display: block;
position: absolute;
top: 0;
width: 100%;
text-align: center;
background-color: #cf0;
}
.popup-specific-name.permanent {
display: none;
background-color: #fc0;
}
.popup-specific-name.show {
display: unset;
}
.popup-specific-name + .popup-specific-name {
top: 20px;
}
button { display: block; position: relative; top: 35px; }
button#toggle_observation { float: right; top: 14px; }
.as-console-wrapper { max-height: 111px!important; }

<div class="popup-specific-name permanent">
permanent dom element, class name controlled show and hide
</div>
<button id="toggle_permanent_popup">toggle permanant popup</button>
<button id="toggle_non_permanent_popup">toggle non permanant popup</button>
<button id="toggle_observation">Start observation</button>

Answer 2

我会使用mutationObserver来完成:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

从MDN:

MutationObserver方法observe()配置MutationObserver回调，开始接收与给定选项匹配的DOM更改通知。