Почему скрипты отказываются загружаться в расширение Google Analytics Chrome, когда я включил рекомендуемое переопределение безопасности? - PullRequest
Новая
       5

Почему скрипты отказываются загружаться в расширение Google Analytics Chrome, когда я включил рекомендуемое переопределение безопасности?

1 голос
/ 07 июня 2019

Расширение My Chrome при проверке всплывающего окна показывает следующие ошибки:

"Отказался от загрузки сценария 'https://www.googletagmanager.com/gtag/js?id=UA-141660993-1', поскольку он нарушает следующую директиву политики безопасности содержимого:" script-src' self 'https://ssl.google -analytics.com". Обратите внимание, что «script-src-elem» не был задан явно, поэтому «script-src» используется как запасной вариант. "

и

"popup.html: 24 Отказ от выполнения встроенного сценария, поскольку он нарушает следующую директиву политики безопасности содержимого:" script-src 'self' https://ssl.google -analytics.com". Либо" небезопасно ключевое слово -inline, хеш ('sha256-Vkhz36sQYUkOwiax3AeAWs1RWzXHB9cwliq07KbR / fI =') или одноразовый номер ('nonce -...') необходим для включения встроенного выполнения. "

Я скопировал этот учебный код в соответствующие им файлы (manifest.json, popup.html и popup.js). Они являются частью приложения create-реагировать и находятся в одном каталоге. Это расширение использует Google Analytics для отслеживания использования различных кнопок. Когда всплывающее окно проверяется, оно должно показывать статистику того, как часто нажимаются кнопки. Вместо этого появляются две эти ошибки. Всплывающее окно отображается правильно, но функция отслеживания не работает.

В соответствии с руководством добавление следующей строки в manifest.json должно устранить проблемы безопасности, которые мешают расширению работать:

"content_security_policy": "script-src 'self' https://ssl.google -analytics.com ; object-src 'self'"

Однако, похоже, это не работает для меня. Код копируется слово в слово (за исключением того, что мой идентификатор отслеживания Google Analytics в строке 8 popup.js и строке 29 в popup.html относится именно к мне), поэтому я не уверен, в чем проблема.

Я включаю ссылку на оригинальный код (для моей версии я избавился от ссылки на значки, потому что используемые ими изображения не были доступны для скачивания:

https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/docs/examples/tutorials/analytics/

Здесь также приведена ссылка на учебное руководство по расширению Google Analytics, если оно полезно, хотя я не думаю, что его прочтение обязательно поможет любому увидеть проблему:

https://developer.chrome.com/extensions/tut_analytics

Вот мой код целиком: 

manifest.json:

{
  "name": "Event Tracking with Google Analytics",
  "version": "2.0.0",
  "description": "A sample extension which uses Google Analytics to track usage.",
  "browser_action": {
    "default_title": "Open the popup",

    "default_popup" : "popup.html"

  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}

popup.html: 

<!DOCTYPE html>
<!--
 * Copyright (c) 2012 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
  <head>
    <style>
      body {
        width: 300px;
        color: #000;
        font-family: Arial;
      }
      #output {
        color: #d00;
        text-align: center;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Popup</h1>
    <p>Track the following actions:</p>
    <button id='button1'>Button 1</button>
    <button id='button2'>Button 2</button>
    <button id='button3'>Button 3</button>
    <button id='button4'>Button 4</button>
    <button id='button5'>Button 5</button>
    <button id='button6'>Button 6</button>
  </body>
</html>

popup.js: 

var _AnalyticsCode = 'UA-141660993-1';

var _gaq = _gaq || [];
_gaq.push(['_setAccount', _AnalyticsCode]);
_gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
})();

function trackButtonClick(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
}

document.addEventListener('DOMContentLoaded', function () {
  var buttons = document.querySelectorAll('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', trackButtonClick);
  }
});

Мое понимание ограничено, так как я новичок в этом предмете; тем не менее, я полагаюсь на то, что этот учебный код работает правильно, поэтому я могу пройти и изучить его. Если кто-нибудь знает, почему я вижу эти ошибки при проверке всплывающего окна этого расширения, я был бы очень признателен за ваши мысли. Заранее большое спасибо, и, пожалуйста, дайте мне знать, если потребуется дополнительная информация.

1 Ответ

1 голос
/ 07 июня 2019

Официальный учебник устарел, к сожалению.Вот реализация, которая работает для меня прямо сейчас:

manifest.json: 

"content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://google-analytics.com; object-src 'self'",

Запуск GA: 

const ID = 'UA-XXXXX-XX';

(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments);
    }, i[r].l = 1 * new Date();
    a = s.createElement(o), m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

ga('create', ID, 'auto');
ga('set', 'checkProtocolTask', null); // Required: disables protocol checking.
...