CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
Maikel D
Maikel D

Reputation: 301

Background page to communicate with Content Script

I'm having a bit of trouble getting some final bit of code working to complete my extension.

The short version is that I need my background.html page to notify my content script whenever a different tab is selected. At the moment I have the following:

background.html

chrome.tabs.onSelectionChanged.addListener(function( tab_id , info ) {
    // some way to call App.resize();
});

content script js file

var App = {
    resize: function() {
        // logic
    }
}

The longer version is that I'm building a fullscreen extension for chrome that works the same as Firefox and Safari on PC. At the moment, when you enter fullscreen mode you can't really navigate to different other tabs unless you use a shortcut and cycle through all your open tabs. My extension shows all the currently opened tabs and you can switch to them, as well as an address bar so you can go to other websites, etc.

I have everything working as I need it, and it's all working nicely except with pages that redirect to others. E.g. with Google Reader, when you open an article in the background, it goes through google's proxy and then redirects to the actual article. This is the only place where it doesn't work. But if I can call the App.resize() function whenever I switch to a new tab, that will fix my problem. (I hope).

Upvotes: 2

Views: 2184

Answers (1)

Jeremy
Jeremy

Reputation: 521

It depends on whether you need to inform content scripts on all pages or just the selected tab. I'll give you solutions for both.

background.html (if you need to inform all tabs)

chrome.tabs.onSelectionChanged.addListener(function() {
   chrome.windows.getAll({populate: true}, function(windows) {
      var w,t;
      for (w=0; w<windows.length; w++) {
         for (t=0; t<windows[w].tabs.length; t++) {
            chrome.tabs.sendRequest(windows[w].tabs[t].id, "resize");
         }
      }
   });
});

background.html (if you only need to inform the newly-selected tab)

chrome.tabs.onSelectionChanged.addListener(function(tabId) {
   chrome.tabs.sendRequest(tabId, "resize");
});

content script

var App = {
   resize: function() {
      // logic
   }
};

chrome.extension.onRequest.addListener(function(request) {
   if (request === "resize") {
      App.resize();
   }
});

Upvotes: 7

Related Questions