Chrome拡張機能の開発でjQueryが読み込めない

現在Chrome拡張機能の開発をしており、その中でjQueryを使おうとしております。
しかしjQueryがうまく読み込めず困っております。
npmが使えるようにchrome-extension-kickstartというライブラリでプロジェクトを生成しました。

以下はapp配下のファイル構成と各ファイルの記述となります。

├── app
│   ├── _locales
│   │   └── en
│   │       └── messages.json
│   ├── fonts
│   ├── images
│   ├── pages
│   │   └── popup.html
│   ├── scripts
│   │   └── jquery.min.js
│   │   └── hoge.js
│   ├── styles
│   ├── manifest.json

json
1manifest.json
2
3{
4  "name": "__MSG_appName__",
5  "short_name": "__MSG_appShortName__",
6  "description": "__MSG_appDescription__",
7  "version": "0.0.0",
8  "manifest_version": 2,
9  "default_locale": "en",
10  "content_scripts": [
11      {
12           "matches": ["https://www.google.co.jp/*"],
13           "js": ["scripts/jquery.min.js", "scripts/hoge.js"]
14      }
15  ],
16  "icons": {
17    "16": "images/icon-16.png",
18    "128": "images/icon-128.png"
19  },
20  "background": {
21    "scripts": [
22      "scripts/background.js"
23    ]
24  },
25  "browser_action": {
26    "default_icon": {
27      "19": "images/icon-19.png",
28      "38": "images/icon-38.png"
29    },
30    "default_title": "__MSG_browserActionTitle__",
31    "default_popup": "pages/popup.html"
32  }
33}
34

html
1popup.html
2
3<!DOCTYPE html>
4<html lang="ja">
5<head>
6  <meta charset="UTF-8">
7  <title>Document</title>
8  <link rel="stylesheet" type="text/css" href="../styles/popup.css">
9  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >
10  <link rel="stylesheet" href="../scripts/jquery-timepicker/jquery.timepicker.css">
11</head>
12<body>
13~~中略
14</body>
15<script src="../scripts/jquery.min.js"></script>
16<script src="../scripts/hoge.js"></script>
17 </html>
18

javascript
1hoge.js
2
3  $("#dayFrom").on('click', function(event) {
4    console.log(1);
5  });
6

Chromeで動かした際、下記のようなエラーとなり、jqueryがきちんと読み込まれてないのかなと思いました。

Uncaught ReferenceError: jquery is not defined
at Object.<anonymous> (hoge.js:1)
at webpack_require (bootstrap c114fe410475f909cadc:19)
at Object.<anonymous> (bootstrap c114fe410475f909cadc:62)
at webpack_require (bootstrap c114fe410475f909cadc:19)
at bootstrap c114fe410475f909cadc:62
at bootstrap c114fe410475f909cadc:62

大変お手数ですが、どなたか問題点がわかる方、ご教授いただけないでしょうか。

umyu

2018/06/07 19:23

>jQueryがうまく読み込めず　そう判断した根拠はなにですかー？

KazutakaShimizu

2018/06/07 21:21

大変失礼いたしました。先ほど質問を修正いたしました。

行動規範の内容に同意します

回答1件

再現手順としては、ブラウザでhttps://www.google.co.jpのページを開いたときに開発者ツールのConsoleに質問文のエラーメッセージが表示されるというのでよいでしょうか？
結果→こちらの環境では再現しませんでした。

質問文のコードには$はあってもjqueryという文字はないので考えられるとしたら、読み込んでいる拡張機能のソースコードが古いことが考えられます。
chrome://extensions/　をブラウザで開いて、拡張を再読込しても問題は発生しますか？

投稿2018/06/07 23:42

umyu

総合スコア5846

KazutakaShimizu

2018/06/07 23:58

再現手順としてはumyuさんが後半でおっしゃられているように、chrome://extensions/　から開発者モードで拡張機能をよみこみ、読み込んだ拡張機能を利用する際に上記のエラーが出ているという状態でございます。

KazutakaShimizu

2018/06/07 23:59

ちなみに今拡張機能として読み込むのではなく、popup.html自体を直接ブラウザで開いてみたのですが、その際はこちらのエラーは出ませんでした。

umyu

2018/06/08 00:11

＞KazutakaShimizuさんへ <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" > この行が気になります、jquery　UIとかを使用してますか？あとChrome拡張内では外部のリソースは読めませんので、この指定ではなく、ローカルに必要なファイルをダウンロードして相対パスで指定してください。（多分今回のエラーとは関係ないと思いますが）

KazutakaShimizu

2018/06/08 01:36

ご指摘ありがとうございます。こちら修正してみました！が、やはりjQueryが読み込めない問題は解決せず・・・

行動規範の内容に同意します