Расширение Google Chrome

Question

Есть ли способ заменить внутри DOM страницы, используя replace () в javascript

В исходном коде я хочу заменить:

<div class="topbar">Bookmark Us</div>

до

<div class="topbar"><span class="larger-font">Bookmark Us</span></div>

Если для расширения Google Chrome установлено значение для соответствующего веб-сайта с URL-адресом, и он выполняет вышеуказанное.

Любая страница, которая соответствует:

http://www.domain.com/support.php

Спасибо.

Answer 1

Не знаю, как Chrome запускает свои расширения, но я могу рассказать вам о манипулировании контентом страницы.

Чтобы обернуть весь дочерний контент topbar div в простой JavaScript:

var topbars= document.getElementsByClassName('topbar');
for (var i= topbars.length; i-->0;) {
    var span= document.createElement('span');
    span.className= 'larger-font';
    while (topbars[i].firstChild)
        span.appendChild(topbars[i].firstChild);
    topbars[i].appendChild(span);
}

(getElementsByClassName - это относительно новый API, но Chrome 3. поддерживает его. Для каждого соответствующего элемента переместите все его дочерние элементы в новый элемент span и поместите этот span в div.)

Или, используя jQuery, если вы не возражаете, перетащите большой большой фреймворк в:

$('.topbar').each(function() {
    $(this).contents().wrapAll('<span class="larger-font"></span>');
});

Пока вы можете работать с HTML как строками, используя что-то вроде:

for (var i= topbars.length; i-->0;)
    topbars[i].innerHTML= '<span class="larger-font">'+topbars[i].innerHTML+'</span>';

В целом этого следует избегать, так как вы будете сериализовать и повторно анализировать все содержимое узла div, в процессе уничтожая любой несериализуемый контент, такой как ссылки JavaScript, слушатели событий и значения полей формы.

Answer 2

То, что вы хотите, это скрипт содержимого . Установите его для запуска по URL-адресам, которые вы хотите указать в манифесте, а затем используйте код Бобинса, чтобы фактически применить манипуляции.