0

I'm new to Chrome extension development, and I'm a bit struggling with the architecture to put in place. I would like to develop an extension (browser_action), that, when the button is clicked, opens a window where information will be populated from the WebTraffic. I figured out I could use the WebRequest API to get info about the traffic.

I could create a popup window, but it's displayed only when I click on the extension button, and hides as soon as I click somewhere else

I tried creating a background window, but it does not show up.

I'd be very grateful if anyone could help me with the initial setup of my application.

Thanks in advance

jnc
  • 47
  • 1
  • 3

1 Answers1

0

You need both.

Take a look at the Architecture Overview, or maybe this question.

The lifetime of the popup is indeed equal to how long it stays on screen. It's the UI part, but putting logic there is usually bad.

A background page is permanently there but invisible. It's typically the "brain" of an extension, taking care of heavy lifting and routing messages to other parts.

In short:

  1. You need a background script to collect webRequest information for you in some format.

  2. You need a popup page to show it. Keep in mind it's not guaranteed to be present at a given time and can close at any time.

  3. It's probably best to use Messaging to request the information from the background page. If you need real-time updates, you can use long-lived connections.

    In your case you can also tightly couple the two and call chrome.runtime.getBackgroundPage() to directly reference stuff in it.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
  • Many thanks for your reply. I reviewed the links you sent me, but it's not clear yet. The behaviour I'd like to achieve is that when the user clicks on the extension button, a browser window opens, and stays there until I close it. Then, from the popup, I should be able to start/stop data collection, and when collection is 'on', I should see the results in the output window. How could I achieve this? (basically, what I'd like to display is the cookies sent and received). Thanks a lot – jnc Apr 09 '15 at 11:11
  • You can open a tab/window with your custom html file: `chrome.extension.getURL('somepage.html')`, where "somepage.html" is a file in the extension directory. You can access to the background page from this file: `var bg = chrome.extension.getBackgroundPage()` or using messaging. – Dmitry Artamoshkin Apr 09 '15 at 12:51
  • actually, the popup is not necessary. As long as clicking on the icon opens up the window, it's fine. But I could find how to do it without a popup window including the js to open the main window. Thanks so much – jnc Apr 09 '15 at 13:12
  • Yeah, having a popup and having a `browserAction.onClicked` events are mutually exclusive. Glad you found a way. – Xan Apr 09 '15 at 13:13
  • Theres also chrome apis to create split windows like the debugger. Never used them thou. – Zig Mandel Apr 09 '15 at 13:28
  • @ZigMandel [citation needed]. There was an experimental sidebar API some time ago but it's effectively abandoned. – Xan Apr 09 '15 at 13:29
  • No. I mean develop another debugger tab. – Zig Mandel Apr 09 '15 at 13:32