Интеграция SweetAlert2 в расширение Chrome - PullRequest
Новая
       21

Интеграция SweetAlert2 в расширение Chrome

0 голосов
/ 08 марта 2019

За https://sweetalert2.github.io/ Я скачал копию sweetalert2.all.min.js из https://www.jsdelivr.com/package/npm/sweetalert2. Так как в background.html я не могу использовать URL из-за используемого расширения Chromeвместо этого локальная копия.Вот мой фон.html 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <script type="module" src="sweetalert2.all.min.js"></script>
  <script type="module" src="background.js"></script>
</body>

</html>

Я пытаюсь использовать SweetAlert2 в background.js, который находится здесь: 

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      console.log("request=" + request);
      var notificationType
      if (request.charAt(request.length - 1) == 'N')
        notificationType = request.substring(0, request.length - 1) + " notes!";
      if (request.charAt(request.length - 1) == 'W')
        notificationType = request.substring(0, request.length - 1) + " watches!";
      if (request.charAt(request.length - 1) == 'C')
        notificationType = request.substring(0, request.length - 1) + " comments!";
      Swal.fire("Incoming!", "You\'ve got " + notificationType, "info");

Но я получаю эту ошибку в расширении Chrome:"Uncaught TypeError: Невозможно установить свойство 'Sweetalert2' из неопределенного", и он показывает код в sweetalert2.all.min.js, который я скачал.

Вот другие важные части моего расширения Chrome

Манифест: 

{
    "name": "Notifier",
    "version": "1.0",
    "description": "Notifies you when you get an FA notification!",
    "manifest_version": 2,
    "background": {
        "page": "background.html",
        "persistent": false
    },
    "permissions": [
      "activeTab",
      "notifications"
    ],
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "FA icon.png"
        }
    },
    "icons": {
        "16": "FA icon.png"
    },
    "content_scripts": [
   {
     "matches": ["http://*.website.net/*"],
     "js": ["sweetalert2.all.min.js","jquery-3.3.1.min.js","contentScript.js"]
   }
 ]
}

И contentScript.js: 

if ($('a[title="Note Notifications"]').length) {
  chrome.runtime.sendMessage($('a[title="Note Notifications"]').text());
}
if ($('a[title="Comment Notifications"]').length) {
  chrome.runtime.sendMessage($('a[title="Comment Notifications"]').text());
}
if ($('a[title="Watch Notifications"]').length) {
  chrome.runtime.sendMessage($('a[title="Watch Notifications"]').text());
}
setTimeout(function() {
  window.location.reload(1);
}, 30 * 1000);

1 Ответ

0 голосов
/ 05 апреля 2019

это из-за атрибута модуля в html-коде

Я уверен, что кто-то точно объяснит почему, поскольку я не совсем эксперт

Я проверил это, и это сработало: 

<script src="sweetalert2.all.min.js"></script>
...