10

I'm new to chrome extensions and cannot seem to figure out how the background concept works. I am building a counter extension that keeps counting even when the user closes the extension (but not the browser) and wanted to do a simple test to see if I could figure out how to use the background file. Below is my attempt to create a function that activates everytime a user clicks on a tab (outside of my extension) and when they click on 5 tabs, the alert hits. I cannot figure out why this doesn't work.

background.js:

var counter = 0;
chrome.browserAction.onClicked.addListener(function(tab){
  counter++;
  if (counter == 5) {
    alert("Hi");
  }
});

manifest.json:

 {
  "name": "Hello World!",
  "description": "My first packaged app.",
  "version": "0.1",
  "permissions": ["tabs", "http://*/*"],
  "manifest_version":2,
  "content_scripts": [ {
    "js": [ "jquery-1.9.1.js", "myscript.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }],
  "background": {
    "scripts": [
       "background.js"
    ]
  },
  "browser_action": {
    "default_title": "10,000 Hours",
    "default_icon": "icon16.png",
    "default_popup": "index.html"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}
Sungguk Lim
  • 6,109
  • 7
  • 43
  • 63
user1987920
  • 165
  • 1
  • 1
  • 8

1 Answers1

12

It is working for me with following code.

manifest.json

{
    "name": "Popping Alert",
    "description": "http://stackoverflow.com/questions/15194198/background-js-not-working-chrome-extension",
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "version": "1",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "Click Me"
    }
}

background.js

var counter = 0;
chrome.browserAction.onClicked.addListener(function (tab) {
    counter++;
    if (counter == 5) {
        alert("Hey !!! You have clicked five times");
    }
});

Can you share your related code or put your problem statement clearly if this does not work?

Sudarshan
  • 18,140
  • 7
  • 53
  • 61
  • I added that exact code into background.js, but when I clicked on my extension, then opened 5 tabs, no alert happened. I'll add the rest of my manifest to the OP, maybe thats whats causing the issue? – user1987920 Mar 04 '13 at 06:16
  • 6
    @user1987920: Do you have **`default_popup`** in your manifest? if so the code will not work! – Sudarshan Mar 04 '13 at 06:17
  • 1
    Yep I do. Does that make it so the background.js script doesnt load or something? – user1987920 Mar 04 '13 at 06:19
  • 4
    @user1987920: **`chrome.browserAction.onClicked`** will not fire if the browser action has a popup, you have to use message passing for getting counter running – Sudarshan Mar 04 '13 at 06:21
  • 1
    Ahh thanks, so I would need to open a connection between my content script and my backrgound.js. Do you think it would work if I sent the message to background.js once I clicked the "Start" timer button, then the countdown would just keep going in the background.js file? – user1987920 Mar 04 '13 at 06:37
  • 2
    @user1987920: Not needed if you want to do it from popup page, you can use [**`chrome.extension.getBackgroundPage`**](https://developer.chrome.com/extensions/extension.html#method-getBackgroundPage) to get access to **`var counter = 0;`** and update it from popup page – Sudarshan Mar 04 '13 at 06:44
  • 2
    why does consolge log does not get printed ? console.log("counter="+counter); – Puttaraju Apr 20 '15 at 17:42
  • Background Scripts don't log to the active tab's developer console. Instead either use `alert` or open a new instance of dev tools explicitly for your extension as shown in this answer: https://stackoverflow.com/a/10258029/881250. – uɥƃnɐʌuop Jan 15 '21 at 20:55