Load JQuery 3.1 into a Chrome extension?

Question

My Bad: I had webpack for an angular aspect of this project, mangling my JQuery

I am getting an error "$ is not defined" when I am working on my chrome extension.

I can get it working OK for JQuery 1.4, but not JQuery 3.1

I've followed the instructions at these links

1. chrome-extension-is-not-defined-error
2. load-jquery-into-a-chrome-extension
3. how-to-use-jquery-in-chrome-extension
4. chrome-extensions-uncaught-referenceerror-is-not-defined

Here is a ZIP to the failing code

I have added the following log entries to the top and bottom of the JQUERY files to see if they are running OK.

console.log('JQUERY is loading into memory');
console.log('JQUERY END of file');

Fails for JQuery 3.1

Works for JQuery 1.4

Manifest File for JQuery 1.4 (Works fine)

Same as below, but "scripts/jquery-3.1.1.min.js" has been changed to "scripts/jquery.js"

Manifest File for JQuery 3.1 (does not work)

{
  "name": "__MSG_appName__",
  "short_name": "__MSG_appShortName__",
  "description": "__MSG_appDescription__",
  "version": "0.0.0",
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "default_locale": "en",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "scripts": [
      "scripts/jquery-3.1.1.min.js",
      "scripts/background.js"
    ]
  },
  "browser_action": {
    "default_icon": {
      "19": "images/icon-19.png",
      "38": "images/icon-38.png"
    },
    "default_title": "__MSG_browserActionTitle__",
    "default_popup": "pages/popup.html"
  },
  "options_page": "pages/options.html",
  "options_ui": {
    "page": "pages/options.html",
    "chrome_style": true
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "css": [
        "styles/contentscript.css"
      ],
      "js": [
        "scripts/jquery-3.1.1.min.js",
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],
  "permissions": [
    "clipboardRead",
    "clipboardWrite",
    "pageCapture",
    "webNavigation",
    "webRequest"
  ]
}

ContentScript.js

var now = new Date();
console.log('Beginning of Content script: ' + now.getMinutes() + ':' + now.getSeconds());

// Javascript works fine
var div = document.createElement('div').appendChild(
    document.createTextNode('My Content Script')
);

document.body.insertBefore(div, document.body.firstChild);

(function() {
    console.log('try to access $(\'body\') in (function() {})();');
    try {
        console.log('david2222: ' + $('body'));
        console.log('SUCCESS');
    }
    catch (ex){
        console.log(ex.message);
    }
})();


var t = setTimeout(function(){
    console.log('try to access $(\'body\') in 1 second timeout');
    try {
        console.log('david3333: ' + $('body'));
        console.log('SUCCESS');
    }
    catch (ex){
        console.log(ex.message);
    }
}, 1000);