Jak wstawić skrypt zawartości w rozszerzeniu Google Chrome po zmianie strony przez history.pushState?

Question

Tworzę małe rozszerzenie Google Chrome dla witryny i chcę zmienić niektóre html na poszczególnych stronach.

Problem polega na tym, że witryna ładuje jego zawartość za pośrednictwem ajax, a także intensywnie korzysta z history.pushState API. Więc dodałem to coś zamanifestować:

"content_scripts": [ 
    { 
    "matches": ["http://vk.com/friends"], 
    "js": ["js/lib/jquery.min.js", "js/friends.js"],  
    }, 
] 

Wszystko działa dobrze, gdy jestem otwierając stronę po raz pierwszy lub przeładowywania go. Ale kiedy przeglądam strony internetowe, chrome nie wstawiaj moich skryptów na stronę "/ friends". Myślę, że tak się dzieje, ponieważ adres URL w rzeczywistości się nie zmienia. Używają funkcji history.pushState(), więc chrome nie może ponownie wstawić/ponownie uruchomić mojego skryptu.

Czy istnieje rozwiązanie tego problemu?

Answer 1

Możesz dodać zdarzenie window.onpopstate w skrypcie treści i nasłuchiwać, kiedy zdarzenie zostanie uruchomione, możesz ponownie uruchomić skrypt treści.

Odniesienia

a)extension.sendMessage()

b)extension.onMessage().addListener

c)tabs.executeScript()

d)history.pushState()

e)window.onpopstate

Próbka Demonstracja:

manifest.json

Zapewnienie treści skryptu wstrzykuje URL i wszystkie zaczepy API ma wystarczającej zgodę w pliku manifestu

{ 
    "name": "History Push state Demo", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "description": "This demonstrates how push state works for chrome extension", 
    "background":{ 
     "scripts":["background.js"] 
    }, 
    "content_scripts": [{ 
     "matches": ["http://www.google.co.in/"], 
     "js": ["content_scripts.js"] 
    }], 
    "permissions": ["tabs","http://www.google.co.in/"] 
} 

content_scripts.js

śledzić na onpopstate imprezy i wysłać żądanie do strony tło dla powtórka scenariusza

window.onpopstate = function (event) { 
    //Track for event changes here and 
    //send an intimation to background page to inject code again 
    chrome.extension.sendMessage("Rerun script"); 
}; 

//Change History state to Images Page 
history.pushState({ 
    page: 1 
}, "title 1", "imghp?hl=en&tab=wi"); 

background.js

Tor na żądanie ze skryptu treści t i wykonać skrypt do aktualnej strony

//Look for Intimation from Content Script for rerun of Injection 
chrome.extension.onMessage.addListener(function (message, sender, callback) { 
    // Look for Exact message 
    if (message == "Rerun script") { 
     //Inject script again to the current active tab 
     chrome.tabs.executeScript({ 
      file: "rerunInjection.js" 
     }, function() { 
      console.log("Injection is Completed"); 
     }); 
    } 
}); 

rerunInjection.js

Niektóre Trivial kod

console.log("Injected again"); 

Wyjście

Daj mi znać, jeśli potrzebujesz więcej informacji.

Answer 2

Udało mi się to zadziałać. Z Chrome Extension docs for webNavigation:

trzeba ustawić uprawnienia dla webNavigation w manifest.json:

"permissions": [ 
    "webNavigation" 
    ], 

potem w background.js:

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) { 
     console.log('Page uses History API and we heard a pushSate/replaceState.'); 
     // do your thing 
    });