Having trouble making my Chrome Extension run idle in the background

Question

I'm trying to build a Chrome extension that one click on it's icon in the toolbar turns it on and then afterwards it runs in the background. When pages go idle for a certain amount of time, the screen blurs out and changes colors. I've got the actual blurring and changing colors working but as of right now when a user clicks on the button, it only works when on the active tab instead of just running in the background. I've also tested out using Chrome's Idle API but nothing

 chrome.browserAction.onClicked.addListener(function(tab) {
 var timeoutID;

function setup() {
    this.addEventListener("mousemove", resetTimer, false);
    this.addEventListener("mousedown", resetTimer, false);
    this.addEventListener("keypress", resetTimer, false);
    this.addEventListener("DOMMouseScroll", resetTimer, false);
    this.addEventListener("mousewheel", resetTimer, false);
    this.addEventListener("touchmove", resetTimer, false);
    this.addEventListener("MSPointerMove", resetTimer, false);

    startTimer();
 }

setup();

function startTimer() {
   // wait 2 seconds before calling goInactive
   timeoutID = window.setTimeout(goInactive, 2000);
}

function resetTimer(e) {
   window.clearTimeout(timeoutID);

goActive();
}

function goInactive() {


 chrome.tabs.executeScript(null, {file: "inject.js"});

 }



 });

This is my Manifest Background and Permission.

 "background": {
   "scripts": ["event.js"],
   "persistent": false
 }

  "permissions": [
   "tabs",
    "*://*/*",
    "idle"
]