Detecting page load from modern JS frameworks in chrome extension

Question

I am trying to keep my chrome extension (written with react) updated on a website written with Ember.js

Is there an event triggered when the page reloads ? I did not managed to find one yet... I am thinking about listening the tabUpdate event from chrome utils to check if the URL changed. But what if url is not changing ?

I can't listen to dom change event, the page constantly changes and I do not want my extension to reload too much.

Subscribe to events you want using `Ember` object exposed in the global context of the page? You'll need a [DOM-injected script for that](https://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script) — wOxxOm, Jan 19 '17 at 17:49
Are you asking about your current content script context being destroyed, and needing to be reloaded (i.e. when using `tabs.executeScript()`), or are you asking about watching for DOM changes where your content script context continues to exist? Are you talking about events seen by the background page, or events seen by an already injected content script? — Makyen, Jan 19 '17 at 17:52
I am talking about a callback on page reload. Maybe the solution is to use the Ember object of the website but it won't work for other frameworks. My question was about: how to know when my extension must reload (page change or url change etc..) — Terry Raimondo, Jan 20 '17 at 10:57

score 1 · Accepted Answer · answered Jan 25 '17 at 15:01

The best way i've found for now is to listen for tab changes with chrome.

I use React with Redux.

-

listener.js (in background script)

export function listenTabReload() {
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      if (changeInfo.url)
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, { reload: true });
        });
    }
  );
}

App.jsx (in content script)

componentWillMount() {
  chrome.runtime.onMessage.addListener(this.reloadApp);
}

reloadApp = (request) => {
  if (request.reload)
    this.setState({ version: new Date() }); // Stub state to re render components
};

Detecting page load from modern JS frameworks in chrome extension

1 Answers1