Rileva cambiamento nel titolo del documento tramite Javascript

Question

C'è un modo per rilevare una modifica a document.title/head > title tramite Javascript? Voglio rilevare questo tramite uno script di contenuto di estensione di Google Chrome, quindi non posso realmente collegare il codice nel JS della pagina di destinazione in cui viene eseguita la modifica del titolo attuale.

ho trovato WebKitMutationObserver che teoricamente dovrebbe essere in grado di rilevare una modifica head > title, ma non funziona per tutti i casi:

// set up an observer for the title element 
var target = document.querySelector('title'); 
var observer = new WebKitMutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation); 
    }); 
}); 
var config = { attributes: true, childList: true, characterData: true }; 
observer.observe(target, config); 

// this jQuery statement fires the observer as expected ... 
$('head > title').text('foo'); 

// ... but this doesn't: 
document.querySelector('title').innerText = 'cheezburger'; 

// ... and neither does this: 
document.title = 'lorem ipsum'; 

Tutte le idee?

Answer 1

Ho trovato una soluzione pienamente funzionante che è solo una piccola modifica all'esempio che ho postato nel post originale.

// set up an observer for the title element 
var target = document.querySelector('head > title'); 
var observer = new window.WebKitMutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log('new title:', mutation.target.textContent); 
    }); 
}); 
observer.observe(target, { subtree: true, characterData: true, childList: true }); 

// all three of these methods correctly fire the mutation observer 
setTimeout(function() { document.title = 'foo'; }, 1000); // the usual method 
setTimeout(function() { document.querySelector('head > title').innerText = 'bar'; }, 2000); // DOM method 
setTimeout(function() { $('head > title').text('cheezburger'); }, 3000); // jQuery-only method 

L'aggiunta di subtree: true era tutto ciò che era necessario per ottenere questo diritto a lavorare.

L'involucro dei tre metodi di cambio del titolo nelle chiamate setTimeout alla fine è solo a scopo dimostrativo; senza questo il valore del titolo cambia così rapidamente che WebKitMutationObserver non riporta ogni modifica individualmente, poiché MutationObserver è progettato per accumulare modifiche in un breve periodo prima di eseguire la richiamata dell'osservatore.

Se non è necessario rilevare le modifiche del titolo effettuate tramite l'ultimo metodo jQuery-only, la proprietà childList: true può essere omessa dalla riga observer.observe; è necessario solo characterData: true per rilevare i primi due metodi di modifica del titolo.

Answer 2

Hai JQuery e Javascript nell'esempio di codice. Non sono sicuro se il vostro limitato solo a JavaScript, ma ecco come si può fare con jQuery

Se si desidera attivare il cambiamento, dare un'occhiata a: http://api.jquery.com/trigger/

jQuery

$(document).ready(function() { 
    $("title", "head").change(function() { 
     console.log("Title has changed"); 
    }); 
    //Trigger Change 
    $("title","head").text("New Title").trigger("change"); 
});