chrome.browserAction.onClicked.addListener() with popup

Question

I want to add Listener to the event which fires, everytime the browser icon is clicked. I have also a popup which comes up on click on this icon.

I tried chrome.browserAction.onClicked.addListener() but didnot get it fired, later i saw that the doc says:

Fired when a browser action icon is clicked. 
This event will not fire if the browser action has a popup.

so, I have popup, so this Listener doesnot work. What workaround can I do to attach Listener to icon in my case?

score 8 · Accepted Answer · answered Aug 10 '14 at 21:45

8

There is no workaround to attach a listener to that event, but you can instead use messaging to let your background page know that the popup was opened.

In your popup, as soon as possible:

chrome.runtime.sendMessage({popupOpen: true});

In your background page:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  if(message.popupOpen) { /* do your stuff */ }
});

answered Aug 10 '14 at 21:45

Xan

74,770
16
179
206

This wording is unclear. What are you trying to do, and what is not working? – Xan Aug 10 '14 at 22:50
I don't get it. I just tested my solution, it works. The background page gets notified when the popup window opens. The click event itself is not fired at all when a popup page is set. What are you trying to do and why? – Xan Aug 10 '14 at 22:55
are you sending the message from popup.js to background.js ? – doniyor Aug 10 '14 at 22:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59074/discussion-between-xan-and-doniyor). – Xan Aug 10 '14 at 22:58
2

caveat: in a popup.html you need to include `` that `chrome.runtime.sendMessage({popupOpen: true});` If you just put JS code between script tags it won't work :S – zigomir Dec 07 '14 at 19:38
@zigomir That's standard for Chrome Extensions. You can't use inline code. – Xan Dec 07 '14 at 20:02

score 1 · Answer 2 · answered Dec 17 '16 at 04:44

I needed something a bit more explicit for @Xan's answer, so here's what I did:

Here is my index.html

<!DOCTYPE html>
<html>
<head>
  <title>Ahead of time compilation</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="loader.js"></script>
  <script src="popup.js"></script>


</head>
<body>
<my-app>Loading...</my-app>
</body>
<script src="dist/build.js"></script>
</html>

Here is popup.js

chrome.runtime.sendMessage({popupOpen: true});

Here is manifest.json

{
  "manifest_version": 2,
  "name"            : "Test ang 2",
  "description"     : "jons test",
  "short_name"      : "test",
  "version"         : "1.0",
  "browser_action": {
    "default_icon" : "app/assets/icon.png",
    "default_title": "hi jon",
    "default_popup": "index.html"
  },
  "permissions": [
    "debugger",
    "activeTab",
    "tabs",
    "alarms",
    "clipboardWrite",
    "notifications",
    "background",
    "storage",
    "cookies",
    "https://*/",
    "http://*/"
  ],
  "web_accessible_resources": [
    "assets/*",
    "bower_components/*",
    "components/*",
    "app.module.js",
    "app.routes.js",
    "index.html",
    "app/*"
  ],
  "externally_connectable": {
    "matches": [
      "*://*.capitalone.com/*"
    ]
  },
  "background": {
    "scripts":["background.js"]
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["content-scripts.js"]
    }
  ],
  "content_security_policy": "script-src 'self' ; object-src 'self'"
}

Here is background.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  console.log(message);
  alert('hello world');
  if(message.popupOpen) {
    console.log('popup is open');
  }
});

chrome.browserAction.onClicked.addListener() with popup

2 Answers2

Linked