Sayfa history.pushState ile değiştirildiğinde, google chrome uzantısına içerik komut dosyası nasıl eklenir?

Question

Web sitesi için küçük bir Google Chrome uzantısı oluşturuyorum ve belirli sayfalarda bazı html değiştirmek istiyorum. Sorun, web sitesinin içeriğini ajax ve heavy use history.pushState API aracılığıyla yüklemesi sorunudur. Ben sayfa ilk defa açılması veya yeniden olduğumda

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

Her şey iyi çalışır: Yani, apaçık bu şeyi ekledi. Ancak, web sitesi sayfalarında gezinirken, chrome'ları "/ friends" sayfasına eklemiyorum. Bunun gerçekleştiğini düşünüyorum çünkü URL aslında değişmiyor. History.pushState() işlevini kullanırlar ve krom, komutumu tekrar ekleyemez/yeniden çalıştıramaz.

Bunun için herhangi bir çözüm var mı?

Answer 1

İçerik komut dosyasına bir window.onpopstate olayı ekleyebilir ve bir olayı tetiklediğinde, içerik komut dosyasını yeniden çalıştırabilirsiniz.

Kaynaklar

bir)extension.sendMessage()

b)extension.onMessage().addListener

c)tabs.executeScript()

d)history.pushState()

e)window.onpopstate

Numune Gösteri:

manifest.json

manifest dosyasında yeterli izne sahip içerik komut enjekte URL ve API sekmeleri olun

{ 
    "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 onpopstate olay için

Parça ve

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 script yeniden gösterme için arka plan sayfasına bir istek göndermek

Parça içerik kodundan istek için t ve geçerli sayfaya

//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 senaryoyu yürütmek.js

Bazı Önemsiz kod

console.log("Injected again"); 

Çıktı

daha fazla bilgiye ihtiyaç olursa haber verin.

Answer 2

Bu çalışmayı başardım. Chrome Extension docs for webNavigation Gönderen: background.js yılında

"permissions": [ 
    "webNavigation" 
    ], 

Sonra:

Sen manifest.json yılında webNavigation izinlerini ayarlamak gerekir Btw

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