google.promeState के माध्यम से पृष्ठ बदलते समय Google क्रोम एक्सटेंशन में सामग्री स्क्रिप्ट कैसे सम्मिलित करें?

Question

मैं वेबसाइट के लिए एक छोटा Google क्रोम एक्सटेंशन बना रहा हूं, और मैं विशेष पृष्ठों पर कुछ एचटीएमएल बदलना चाहता हूं।

समस्या यह है कि वेबसाइट AJAX के माध्यम से अपनी सामग्री लोड करती है, और भारी उपयोग इतिहास.pushState API।

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

सब कुछ ठीक काम करता है जब मैं पहली बार पेज खोलने कर रहा हूँ या यह पुन: लोड: तो, मैं प्रकट करने के लिए इस बात को जोड़ा। लेकिन जब मैं वेबसाइट पृष्ठों के बीच नेविगेट कर रहा हूं, तो क्रोम "/ दोस्तों" पृष्ठ पर मेरी स्क्रिप्ट डालें नहीं। मुझे लगता है कि ऐसा इसलिए हो रहा है क्योंकि यूआरएल वास्तव में नहीं बदल रहा है। वे history.pushState() का उपयोग करते हैं और इसलिए, क्रोम मेरी स्क्रिप्ट को फिर से सम्मिलित/पुन: चालू नहीं कर सकता है।

क्या इसके लिए कोई समाधान है?

Answer 1

आप सामग्री स्क्रिप्ट में window.onpopstate ईवेंट जोड़ सकते हैं और इसके लिए सुन सकते हैं, जब कोई ईवेंट आग लगती है तो आप फिर से सामग्री स्क्रिप्ट को फिर से चला सकते हैं।

संदर्भ

एक)extension.sendMessage()

ख)extension.onMessage().addListener

ग)tabs.executeScript()

घ)history.pushState()

ई)window.onpopstate

नमूना प्रदर्शन:

manifest.json

सुनिश्चित करें सामग्री स्क्रिप्ट इंजेक्शन URL और सभी एपीआई टैब मैनिफ़ेस्ट फ़ाइल में पर्याप्त अनुमति

{ 
    "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 घटना के लिए ट्रैक और स्क्रिप्ट की फिर से दौड़ना के लिए पृष्ठभूमि पृष्ठ के लिए एक अनुरोध भेजने के

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

ट्रैक सामग्री स्क्रिप्ट से अनुरोध के लिए टी और वर्तमान पृष्ठ

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

कुछ तुच्छ कोड

console.log("Injected again"); 

आउटपुट

आप अधिक जानकारी की जरूरत है, तो मुझे जानते हैं।

Answer 2

मैं यह काम करने में सक्षम था। Chrome Extension docs for webNavigation से: background.js में

"permissions": [ 
    "webNavigation" 
    ], 

तब:

आप manifest.json में webNavigation के लिए अनुमतियों को निर्धारित करने की आवश्यकता

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