jQuery not defined in Google Chrome Extension

Question

I'm trying to run jQuery in my chrome extension, but I keep getting the error

Uncaught ReferenceError: $ is not defined

I'm trying to use jQuery in the content_script.js, but it seems that it is only loaded in the background.js

Is there some additional code that I need to add to my background.js, so that content_script.js can use jQuery?

My Code

manifest.json

{
"name": "Flip That Tab",

"description": "Flips a guitar tab on ultimate guitar",

"version": "1.0",

"author": "TyDyeTV",

"short_name": "Tab Flip",

"icons": { 
    "16":"img/guitar16.png", 
    "48":"img/guitar48.png", 
    "128":"img/guitar128.png" 
        },

"permissions": [
"activeTab"
],

"background": {
  "scripts": ["jquery-2.2.4.min.js", "background.js"],
  "persistent": false
            },

"browser_action": {
  "default_title": "Flip That Tab",
  "default_icon": "img/guitar.png"
                },

"manifest_version": 2

}

background.js

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.executeScript(null, {file: "jquery-2.2.4.min"});
chrome.tabs.executeScript(null, {file: "content_script.js"});

});

content_script.js

// Code to flip tab

function isMusicLine(line)
{
    var numDash = 0;
    for (i=0; i < line.length; i++) 
    {
        if(line[i] == '-') 
        {
            numDash += 1;
        }
    }
    if (numDash > 10)
    {
        return true;
    }
    else
    {
        return false;
    }   
}


function createMusic(line, myArray, tempArr)
{
    if(tempArr.length > 0)
    {
        for (i=0; i< tempArr.length; i++)
        {
            myArray.push(tempArr[i]);
        }
    }
    else
    {
        myArray.push(line);
    }

    return myArray
}



var element = document.getElementById("cont").innerHTML;
var element = $("cont").text(finalDoc)