Я работаю над небольшим дополнением Firefox, которое использует PageMod
для обработки элементов изображения, загруженных на веб-страницу. Я видел в Интернете примеры использования jQuery, но, поскольку я добавляю скрипт содержимого на каждую веб-страницу, добавление jQuery может нанести непоправимый ущерб.
Поскольку Firefox поддерживает MutationObserver
, я попытался сделать следующее благодаря AndrewVermie:
content.js
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.tagName == "IMG")
{
//I'm not sure this object can be treated as a DOM Element (?)
mutation.src = "http://s6.tinypic.com/15npphk_th.jpg";
}
for (var i = 0; i < mutation.addedNodes.length; ++i) {
var node = mutation.addedNodes[i],
matches = [].slice.call(node.querySelectorAll('img'));
for (var j = 0; j < matches.length; ++j) {
var img = matches[j];
img.src = "http://s6.tinypic.com/15npphk_th.jpg";
}
}
});
});
var config = { attributes: true, childList: true, subtree: true, characterData: true};
observer.observe(window.document, config);
var elements = document.getElementsByTagName("img");
var elementsLength = elements.length;
for (var i = 0; i < elementsLength; i++)
{
elements[i].src = "http://s6.tinypic.com/15npphk_th.jpg";
}
main.js
pageMod.PageMod({
include: "*",
contentScriptWhen: 'ready',
contentScriptFile: [self.data.url("content.js")],
onAttach: //...
}
});
Что происходит :
- Перейдите на страницу http://imgur.com/.
- Начните прокручивать, пока изображения не будут загружаться динамически
- Обратите внимание, что они не меняются
Я console.log()
каждые .tagName
и вижу только p
и #text
при наведении курсора на изображения.
Что мне нужно
Итерация по каждому элементу, динамически загружаемому на веб-странице, на которую внедрен скрипт, и возможность изменять атрибуты элемента.
Если это можно сделать с помощью чистого JavaScript и с MutationObserver
или без него, это будет действительно здорово.
В противном случае, если я смогу узнать, что некоторые элементы были загружены для повторного повторения ВСЕХ элементов страницы, это будет нормально, но не набухнет.
Надеюсь, я немного прояснил ситуацию.
Любая помощь будет принята с благодарностью.