CODEWITHSUNDEEP
javascriptangularjsreactjsember.jsgoogle-chrome-extension
Terry Raimondo
Terry Raimondo

Reputation: 639

Detecting page load from modern JS frameworks in chrome extension

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.

Upvotes: 1

Views: 153

Answers (1)

Terry Raimondo
Terry Raimondo

Reputation: 639

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
};

Upvotes: 1

Related Questions