将SweetAlert2集成到Chrome扩展程序

问题描述 投票:0回答:1

根据https://sweetalert2.github.io/,我从https://www.jsdelivr.com/package/npm/sweetalert2下载了sweetalert2.all.min.js的副本。由于在back.html中,由于Chrome扩展程序,我无法使用该网址,而是使用本地副本。这是我的background.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>

我尝试在background.js中使用SweetAlert2,它位于:

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

但我收到this error in Chrome Extension:“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);
javascript html google-chrome-extension sweetalert sweetalert2
1个回答
0
投票

它是因为html代码中的module属性

我相信有人会解释为什么我不是一个专家

我测试了这个并且它有效:

<script src="sweetalert2.all.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.