我想确认是否有人通过Chrome Devtools修改了元素的CSS规则。通常,MutationObserver足以胜任此任务,但是MutationObserver只能观察到内联style属性的更改,不能检测到通过开发工具修改元素CSS属性(或者添加到检查器样式表的新规则)。有什么最好的方法使用JavaScript监听Chrome Devtools的CSS规则更改?
我的目标是在Chrome扩展中使用它。我刚刚发现,通过Devtools监听用户修改是可能的:
//This will only work in the devtools.js file in a Chrome extension
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
alert(resource.url);
alert(content);
});
检测初始变化的一种间接方法是通过转换事件。当然,这可以被绕过,但是前端所做的一切都可以被绕过。
这个想法的要点是为所有元素添加一个极短的过渡,并监听由它触发的任何过渡事件。
let timeout = null;
Array.from(document.querySelectorAll('*')).forEach(element => {
element.addEventListener('transitionstart', () => {
if (timeout) return;
timeout = setTimeout(() => {
console.log('styles changed');
timeout = null;
}, 0);
});
});
* {
transition: all 0.0001s;
}
<p>Edit my styles in the console to see messages</p>
或者你可以寻找一种方法,在特定事件触发时对所有元素的计算样式进行差异比较,但我无法想象这不会成为计算上的极大负担。