将JQuery 3.1加载到Chrome扩展程序中？

Question

我的错误：我有一个webpack来处理这个项目的角度方面，破坏了我的JQuery

我收到错误＆＃34; $未定义＆＃34;当我正在使用我的chrome扩展程序时。

我可以让它适用于JQuery 1.4，但不适用于JQuery 3.1

我已按照这些链接中的说明进行操作

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

我已将以下日志条目添加到JQUERY文件的顶部和底部，以查看它们是否正常运行。

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

JQuery 3.1失败



适用于JQuery 1.4



JQuery 1.4的清单文件（正常工作）

与下面相同，但"scripts/jquery-3.1.1.min.js"已更改为"scripts/jquery.js"

JQuery 3.1的清单文件（不起作用）

{
  "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);