今天上推特的时候突然发现昨天重置chrome之后油猴脚本没开，才想起来自己曾经写过将推特的jpg:large转化为jpg方便直接另存为图片的脚本。
遂打开代码怀旧（油猴显示356days unchanged）
然后我就发现这么一些代码
// (setInterval(function() {
// //alert("");
// var a=("img[src*='jpg:large']");
// a.each(function(){
// //alert((this).attr("src"));
//(this).attr("src",String((this).attr("src")).replace(/jpg:large/,"jpg"));
// //alert((this).attr("src"));
// });
// var b=("img[src*='png:large']");
// b.each(function(){
//(this).attr( "src",String($(this).attr("src")).replace(/png:large/,"png"));
// });
// //alert("");
// }),200);
当然现在都被我注释掉了，
当时为了解决推特下拉加载出来的新的dom元素中间图片的替换问题，没找到监听dom变化的函数，只能setinterval()，后果就真的很占用cpu，造成这一年来我一直以为推特就是个很占cpu的网页（捂脸
遂随手搜索了一下有没有监听dom变化的函数
一开始搜到的是jquery的DOMNodeInserted事件，
查阅后mdn后被推荐MutationObserver函数，
尝试之发现效果不错
现在代码为：
// Select the node that will be observed for mutations
var targetNode = ("body")[0];
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
var a=("img[src*='jpg:large']");
a.each(function(){
//alert((this).attr("src"));(this).attr("src",String((this).attr("src")).replace(/jpg:large/,"jpg"));
//alert((this).attr("src"));
});
var b=("img[src*='png:large']");
b.each(function(){(this).attr( "src",String($(this).attr("src")).replace(/png:large/,"png"));
});
//alert("");
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
本着拿来就用主义原则(明天还要考毛概我现在跑来干这个= =)，并没有对mdn上的事例代码做过多的修改。
有效的降低了cpu占用(bgm38)(空闲时至少20%)
One thought to “解决推特jpg:large，监听dom元素内容变化的函数，MutationObserver”
解决此问题的另一个思路
https://bugs.chromium.org/p/chromium/issues/detail?id=172529
https://chrome.google.com/webstore/detail/image-extension-fix/bdinnahhocpbhaolpffbceckdfiafffn
https://github.com/Vemigog/image-extension-fix/blob/master/main.js
随之而来的新问题：永远会自动下载到默认下载文件夹