Wie fügt man ein Inhaltsskript in die Google Chrome-Erweiterung ein, wenn die Seite über history.pushState geändert wurde?

Question

Ich erstelle eine kleine Google Chrome-Erweiterung für die Website, und ich möchte etwas HTML auf bestimmten Seiten ändern.

Das Problem ist, dass Website laden Sie seine Inhalte über Ajax, und schwere Verwendung history.pushState API. Also, habe ich dieses Ding zu manifestieren:

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

Alles funktioniert gut, wenn ich Seite erstes Mal oder Nachladen öffnen bin. Aber wenn ich zwischen Websiteseiten navigiere, füge chrome meine Skripte nicht auf der Seite "/ friends" ein. Ich denke, das passiert, weil sich die URL nicht ändert. Sie verwenden history.pushState() und so kann chrome mein Skript nicht erneut einfügen/erneut ausführen.

Gibt es dafür eine Lösung?

Answer 1

Sie können ein window.onpopstate-Ereignis im Inhaltsskript hinzufügen und darauf warten. Wenn ein Ereignis ausgelöst wird, können Sie das Inhaltsskript erneut ausführen.

Referenzen

a)extension.sendMessage()

b)extension.onMessage().addListener

c)tabs.executeScript()

d)history.pushState()

e)window.onpopstate

Probe Demonstration:

manifest.json

Stellen Sie sicher, das Content-Skript injiziert URL und alle in Manifest-Datei haben genug Erlaubnis API Registerkarten

{ 
    "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

Spur für onpopstate Ereignis und einen Antrag auf Hintergrundseite für Rerun von Skript

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

Spur schicken für eine Anfrage aus dem Inhalts-Scrip t und ausführen Skript auf die aktuelle Seite

//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

Einige Trivial Code

console.log("Injected again"); 

Ausgabe

Lassen Sie mich wissen, wenn Sie mehr Informationen benötigen.

Answer 2

Ich konnte das funktioniert. Vom Chrome Extension docs for webNavigation:

benötigen Sie Berechtigungen festlegen für webNavigation in manifest.json:

"permissions": [ 
    "webNavigation" 
    ], 

Dann in background.js:

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