Как вставить скрипт контента в расширение google chrome, когда страница была изменена через историю.толкнуть государство?

Я создаю небольшое расширение google chrome для веб-сайта, и я хочу изменить некоторые html на определенных страницах.

Проблема в том, что сайт загружает свой контент через ajax, и тяжелая история использования.pushState API. Итак, я добавил эту вещь к манифесту: 

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

Все работает нормально, когда я открываю страницу в первый раз или перезагружаю ее. Но когда я перемещаюсь между страницами сайта, chrome не вставляет мои скрипты на страницу "/ friends". Я думаю, что это происходит потому, что URL-адрес на самом деле не меняйся. Они используют историю.pushState () и поэтому chrome не может снова вставить / перезапустить мой скрипт.

Есть ли какое-либо решение для этого?

2 5
javascript google-chrome google-chrome-extension browser-history

2 ответа:

Можно добавить окно .onpopstate событие в Content script и слушать его, когда событие срабатывает вы можете повторно запустить content script снова.

Ссылки

а) расширение.sendMessage()

b) расширение.onMessage().addListener

С) вкладки.executeScript()

d) история.pushState()

e) окно.onpopstate

Пример Демонстрации:

манифест.json

Убедитесь, что URL-адрес, введенный скриптом содержимого, и все вкладки API имеют достаточное разрешение в файле манифеста 

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

Предыстория.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");
        });
    }
});

повторная инъекция.js

Некоторый тривиальный код 

console.log("Injected again");

Вывод

Введите описание изображения здесь

Дайте мне знать, если вам понадобится дополнительная информация.
3

Я смог заставить это работать. Из документов расширения Chrome для webNavigation :

Необходимо задать разрешения для webNavigation в манифесте .json : 

  "permissions": [
     "webNavigation"
  ],

Затем в фоне.js : 

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