0

私の悪い点: このプロジェクトの角度のある側面に webpack があり、JQuery をマングリングしました

Chrome 拡張機能を使用しているときに、「$ が定義されていません」というエラーが表示されます。

JQuery 1.4では問題なく動作しますが、JQuery 3.1では動作しません

これらのリンクの指示に従いました

  1. chrome-extension-is-not-defined-error
  2. load-jquery-into-a-chrome-extension
  3. 使い方-jquery-in-chrome-extension
  4. chrome-extensions-uncaught-referenceerror-is-not-defined

これは、失敗したコードへの ZIP です

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);
4

0 に答える 0