1

I'm making a google chrome extension to give the specific information (via ajax with server side) for different url (tab).

I use chrome.tabs.onUpdated and chrome.tabs.onActivated event listener in background.js to detect whether the url of the active tab is changed, and then send an ajax request to change the icon using chrome.browserAction.setIcon. (Yes, I would like to use browser action instead of page action because I wanna show some overall information of the extension in popup page, like Adblock Plus does)

However, what I can't figure out is:

  1. How could I communicate between the background and the popup page? I understand that I should use chrome.tabs.sendMessage() and chrome.runtime.onMessage to communicate between background and the content scripts, but how could I communicate between the former and the popup script? I can't see that I need content scripts to modify the content of the page.
  2. How to "store" the information I already get, in the popup page of each page so that I don't need to send few more requests, when the user change the activated tab but the url is not changed?

Any idea? Thanks in advance!

Haibara Ai
  • 10,703
  • 2
  • 31
  • 47
iplus26
  • 2,518
  • 15
  • 26

1 Answers1

3

For question #1, since the background page and popup page both live in extension process, they can communicate with each other directly like setting variables or calling functions. You could check the following two posts:

As for question #2,

  1. After learning how to communicate between popup page and background page, you can save the info retrieved from popup page in background page, and remember to set persistent: true in manifest.json, it will ensure the background page lives through the whole extension life.
  2. You can also use chrome.storage or localStorage api to store the data. You can save the data in one page and feel free to access it in another page (So this will be also a way to communicate between two pages to some degree)
Community
  • 1
  • 1
Haibara Ai
  • 10,703
  • 2
  • 31
  • 47
  • Can I send the data to **each tab** so that I don't need the storage? – iplus26 Mar 08 '16 at 07:58
  • It looks like that all the pages/tabs share the same background and browser actions... – iplus26 Mar 08 '16 at 08:00
  • @iplus26, for question "send the data to each tab", you can use `chrome.tabs.query()` to query all tabs then send message – Haibara Ai Mar 08 '16 at 08:03
  • @iplus26, "all pages/tabs share the same background and browser actions", yes, there is only one instance of background process. So what's your concern? – Haibara Ai Mar 08 '16 at 08:04
  • I would like to send the data to the specific tab and so that the popup page can show their own data. – iplus26 Mar 08 '16 at 08:06
  • @iplus26, you want to send message from where to the specific tab(active or any)? – Haibara Ai Mar 08 '16 at 08:08
  • Yes, I do know that I can use `chrome.tabs.query()` and `tabId` to use the specific tab but what I can't figure out is that how to affect the popup page of the specific tab. For now, I update the `browserAction` whenever user "update" the tab. – iplus26 Mar 08 '16 at 08:10
  • Sorry for my poor English... I send ajax requests when user "update" the activated tab (url changes, new tabs, close the tabs...). However, I shouldn't send one more request since the tab may have gotten the information before. So I want a way to send the data (got via ajax in background) to the specific tab so that every popup page can use it when user re-activate the tab. – iplus26 Mar 08 '16 at 08:13
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105643/discussion-between-haibara-ai-and-iplus26). – Haibara Ai Mar 08 '16 at 08:16