javascript - How to observe changes in tab from Google Chrome extension? -

i've developed chrome extension injects button toolbar of rich-text editor of specific web page, code available here. basic extension based on concept of "content script" , works because toolbar present page has loaded.

now, however, i'm confronted page cannot inject button page loads because user needs interact page first (make selection or press button) before toolbar appears.

so i'm looking way track changes in active tab (i have url pattern page). don't want or need browser action (i.e. little button on right-hand side of omnibox), hoping away background.js event page can declare event listener user-originated events somehow it's not working.

to explain: i've got manifest.json, great:

{   "name": "basic tab test",   "description": "blah di blah",   "version": "1.0",   "permissions": [     "activetab"   ],   "background": {     "scripts": ["background.js"], // background script shown below     "persistent": false   },   "content_scripts": [     {       "matches": [         "file://*"    // testing only, of course       ],       "js": [         "contentscript.js" // <-- content script shown below       ]     }   ],   "manifest_version": 2 } 

the background.js script looks @ moment:

console.log("in background.js");  chrome.tabs.getcurrent(function(tab) {   tab.onactivated.addlistener(function(){     console.log("got here onactivated (inside tab)");   }); });  chrome.tabs.getcurrent(function(tab) {   tab.onzoomchange.addlistener(function(){     console.log("got here onzoomchange (inside tab)");   }); });  // part of message passing test chrome.runtime.onmessage.addlistener(   function(request, sender, sendresponse) {     console.log(sender.tab ?                 "from content script:" + sender.tab.url :                 "from extension");     if (request.greeting == "hello")       sendresponse({farewell: "goodbye"});   }); 

of course, these tests, none of above events ever fire. becoming desperate, thought 'well, let's use message passing method' send messages contentscript.js background.js whenever user presses button. contentscript.js looks this:

document.addeventlistener("domcontentloaded", function(event) {   console.log("just canary - got here...");    var btn = document.getelementbyid("button");   if (btn) {     console.log("there button!");   } else {     console.log("there no button!");   }   btn.addeventlistener("click", function () {     console.log("clicked button!!!!");     chrome.runtime.sendmessage({greeting: "hello"}, function(response) {       console.log(response.farewell);     });   }) }); 

also, never arrive inside event handler (but why oh why?! standard jquery-less code when dom loaded). so, when thought might ask assembled experts advice.

tl;dr: want track events on activetab , if given dom element makes appearance manipulate (by injecting element).

by default, "run_at" property content script "document_idle", means scripts injected after window.onload event fires, , later domcontentloaded event. in fact code in content script not executed @ all.

to make code work, either:

1. remove outer domcontentloaded event listener

2. or add "run_at": "document_start" part in manifest.json

you take @ run_at part fore more details.