Google Chrome Extension

Question

Есть ли способ заменить внутри DOM страницы с помощью замены() в 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 поддерживает его для каждого согласующего элемента, переместить все свои ребенок в. новый пролет элемент, и положить, что промежуток внутри 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>'; 

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

Answer 2

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