browser_actionのセキュリティーポリシーエラーについて。

一応、以下のコードで機能はしているのですが、
ポップアップを検証した際に、
以下のエラーが出ています。
原因はなんでしょうか。

error
1Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-/RoKMbGBjffamnXYL+uKYSY/2blm4WFX+3lQ5HFQtP0='), or a nonce ('nonce-...') is required to enable inline execution.
2(anonymous function) @ jquery.min.js:35

html
1<head>
2    <script src="js/jquery.min.js"></script>
3	<script src="js/popup.js"></script>
4    <link rel="stylesheet" href="clock.css" type="text/css">
5</head>
6<body>
7    <div id="clock"><span class="hour"></span>:<span class="minute"></span>:<span class="second"></span></div>
8</body>

javascript
1$(function(){
2   'use strict';
3
4   // 定数 （月・曜日の配列）
5   var MONTH = {
6            full: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
7            short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
8         },
9         DAY = {
10            full: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
11            short: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
12            ja: ['日', '月', '火', '水', '木', '金', '土']
13         };
14
15   // 表示中時刻
16   var nowCurrent;
17
18   // 毎秒ごとに時刻を取得し表示
19   setInterval( clock, 100 );
20
21   // 日付＆時間の出力関数
22   function clock(){
23      // 現在時間の取得
24      var now = new Date();
25
26      if ( now.getSeconds() !== nowCurrent ) {
27         // 表示中時刻の更新
28         nowCurrent = now.getSeconds();
29
30         // 各値の取得
31         now = {
32            'full': now,
33            'year': now.getFullYear(),
34            'month': MONTH.short[now.getMonth()],
35            'month-full': MONTH.full[now.getMonth()],
36            'month-num': now.getMonth() + 1,
37            'month-num-full': ( now.getMonth() + 1 < 10 ) ? '0' + ( now.getMonth() + 1 ) : now.getMonth() + 1,
38            'date': now.getDate(),
39            'date-full': ( now.getDate() < 10 ) ? '0' + now.getDate() : now.getDate(),
40            'day': DAY.short[now.getDay()],
41            'day-full': DAY.full[now.getDay()],
42            'day-ja': DAY.ja[now.getDay()],
43            'hour': ( now.getHours() < 10 ) ? '0' + now.getHours() : now.getHours(),
44            'minute': ( now.getMinutes() < 10 ) ? '0' + now.getMinutes() : now.getMinutes(),
45            'second': ( now.getSeconds() < 10 ) ? '0' + now.getSeconds() : now.getSeconds()
46         };
47   
48         // 出力
49         $.each( now, function( key, value ) {
50            var className = '.'+key;
51            $(className).html( value );
52         });
53      }
54   }
55
56});

json
1{
2  "name": "Watch_time",
3  "version": "1.00",
4  "manifest_version": 2,
5  "description": "時計を表示します。",
6  "icons": {
7        "128": "img/icon_128.png",
8        "48":  "img/icon_48.png",
9        "16":  "img/icon_16.png"
10    },
11  "browser_action": {
12    "default_icon": "img/icon_16.png",
13    "default_title": "Watch_time",
14    "default_popup": "popup.html"
15  }
16}
17

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

回答1件

ベストアンサー

セキュリティ的によろしくということでインラインスクリプトの実行が拒否されています。
よくある例ではこういうので発生します

html
1<script>var a = 1</script>
2<div>直接 JavaScript を書いてる</div>

script タグで URL 指定じゃなくてインラインでコードを書いた場合です

今回は jQuery なので JavaScript で起きています
JavaScript だとこういうコードで発生します

javascript
1var script = document.createElement("script")
2script.innerHTML = "var a = 1"
3document.body.appendChild(script)

インライン innerHTML にコードを書いて DOM に append したときです

ただ、質問のコードで jQuery-1.12.4 を使って試したところエラーは発生していませんでした
jQuery のバージョンが違うと内部処理も違うのでそれが原因かもしれません

ですが、このバージョンでも上記コードを jQuery で行うと別のエラーが起きました

javascript
1$("body").append($("<script>").html("var a = 1"))
2
3// Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".