Inject content script on extension reload programmatically (chrome extension)
<p>I am creating a chrome extension that I want to be able to enable/disable. I have successfully made a popup that does just that. The trouble is, if I reload the extension (or if the user downloads it initially) my content scripts default to being off. I <em>could</em> just inject the content script in the manifest.json but that results in the content script being injected for any new tab--which I do not want. The behavior should be that if you download/reload the extension, it is on by default, but then you can enable it/disable it and that applies to every new tab. I have tried to put an initialization in background.js but that does not get called at startup apparently. </p>

<p>manifest.json</p>

<pre><code>{
  "manifest_version": 2,
  "name": "Rotten Tomatoes Search",
  "description": "This extension searches rotten tomatoes with highlighted text",
  "version": "1.0",
  "browser_action": {
    "default_icon": "./icons/icon_on.png",
    "default_popup": "popup.html"
  },
  "permissions": [
      "activeTab",
      "&lt;all_urls&gt;",
      "background"
  ],
   "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [{
     "js": ["jquery-1.12.3.min.js"], 
     "matches": ["&lt;all_urls&gt;"]
   }]
}
</code></pre>

<p>background.js</p>

<pre><code>var isExtensionOn = true;
chrome.tabs.executeScript({code: "console.log('backgournd hit...')"});

turnItOn();

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
    if (request.cmd == "setOnOffState") {
        isExtensionOn = request.data.value;
    }

    if (request.cmd == "getOnOffState") {
        sendResponse(isExtensionOn);
    }
});

function turnItOn() {
    chrome.browserAction.setIcon({path: "./icons/icon_on.png"});
    chrome.tabs.executeScript({file:"openTooltipMenu.js"});
    //$('#toggle').text('disable');
}
</code></pre>

<p>popup.js</p>

<pre><code>document.addEventListener('DOMContentLoaded', function() {
// show different text depending on on/off state (for icon, handled by having default icon)
 chrome.extension.sendMessage({ cmd: "getOnOffState" }, function(currentState){
    if (currentState) $('#toggle').text('disable');
    else $('#toggle').text('enable');
 });
// allow user to toggle state of extension
var toggle = document.getElementById('toggle')
toggle.addEventListener('click', function() {
    //chrome.tabs.executeScript({code: "console.log('toggled...')"});
    chrome.extension.sendMessage({ cmd: "getOnOffState" }, function(currentState){
        var newState = !currentState;
        // toggle to the new state in background
        chrome.extension.sendMessage({ cmd: "setOnOffState", data: { value: newState } }, function(){
            // after toggling, do stuff based on new state
            if (newState) turnOn();
            else turnOff();
        });
    });
})
});

function turnOn() {
    chrome.browserAction.setIcon({path: "./icons/icon_on.png"});
    chrome.tabs.executeScript({file:"openTooltipMenu.js"});
    $('#toggle').text('disable');
}

function turnOff() {
    chrome.browserAction.setIcon({path: "./icons/icon_off.png"});
    chrome.tabs.executeScript({code: "$('body').off();"});
    $('#toggle').text('enable');
}
</code></pre>

<p>popup.html</p>

<pre><code>&lt;some code&gt;
    &lt;script src="./jquery-1.12.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="./popup.js"&gt;&lt;/script&gt;&lt;style type="text/css"&gt;&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="popupMenu" style="list-style-type:none"&gt;
      &lt;div class="header"&gt;Rotten Tomatoes Search&lt;/div&gt;
      &lt;hr&gt;
      &lt;div class="menuEntry" id="toggle"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>