当通知出现在控制台中时，Javascript 代码突然停止

Posted 2023-02-22

技术标签:

【中文标题】当通知出现在控制台中时，Javascript 代码突然停止【英文标题】：Javascript code suddenly stops when notification appears in console 【发布时间】：2020-12-27 07:13:05 【问题描述】：

我正在编写一个 chrome 扩展程序来检测在this website 上单击某个按钮后 DOM 中的变化。具体来说，一旦单击添加到购物车按钮，就会出现一个显示更多信息的弹出窗口，并且当这种情况发生时，DOM 会发生变化。我编写了一个事件侦听器来查看何时单击添加到购物车按钮。但是，如果我单击其中一个按钮来指定我的大小，控制台中会出现一条通知，说明 Overriding "availability.update"！。在此之后，当我单击添加到购物车按钮时，我的代码没有任何响应。有谁知道如何解决这个问题？

JavaScript (content.js)

document.getElementById("add-to-cart").addEventListener("click", domChange);  //event listener for add-to-cart button

function domChange()  //checks for changes in the DOM
    var myElement = $('<div class="modal-content js-modal-content></div>')[0];

    var observer = new MutationObserver(function(mutations) 
       if (document.contains(myElement)) 
            console.log("It's in the DOM!");
            observer.disconnect();
        else
            console.log('did not work');
        
    );

    observer.observe(document, attributes: false, childList: true, characterData: false, subtree:true);

Manifest.json


    "manifest_version": 2,
    "name": "Chrome Extension Test",
    "description": "chrome extension trial build",
    "version": "1.0.0",
    "browser_action": 
        "default_popup": "popup.html"
    ,
   "content_scripts": [
     "js": ["content.js"],
     "matches": ["http://*/*", "https://*/*"]
   ],
   

   "content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js; object-src 'self'",
    "permissions": [
        "http://localhost/",
        "tabs",
        "<all_urls>"
    ]

HTML (popup.html)

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="content.js"></script>
</head>
<body>

</body>
</html>

【问题讨论】：

【参考方案1】：

在表示代码或控制台输出应该像代码一样格式化时，请使用code blocks而不是斜体。

`<code stuff>`

另外，请提供一个 git repo/zip 文件/存档文件，其中包含发生问题所需的最少代码。

另外，由于这是作为 Chrome 扩展程序运行的，请添加 google-chrome-extension 标签。

第一个错误

Uncaught ReferenceError: $ is not defined

在 JS 代码中使用 $(something) 通常意味着您正在使用 jQuery。 jQuery 是一个 JS 库，旨在帮助编写 JS 代码。要使用$(something)，您需要在 jQuery 中加载。

这意味着 jQuery 没有正确配置/加载。

您的 JavaScript 文件未正确加载到您的页面中您有一个拙劣的 jQuery 版本。这可能是因为有人编辑了核心文件，或者插件可能覆盖了 $ 变量。您在页面完全加载之前运行了 JavaScript，因此，在 jQuery 完全加载之前。

来源：JQuery - $ is not defined

但是，您确实在 popup.html 中加载了 jQuery。为什么 jQuery 没有加载？

<!-- popup.html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

popup.html 用于单击图标时的弹出窗口。弹窗中的 JS 在popup.html 的上下文中运行，而不是网站。

我将代码更改为从content.js 记录TEST 0。请注意，TEST 0 没有显示在网站的 DevTools 控制台中，而是显示在弹出窗口的 DevTools 控制台中。

如果是“普通”网页：要加载 jQuery，请使用其中之一将 script 标记添加到 DOM。

如果它在 Chromium 扩展中：

Start of quote

您必须将 jquery 脚本添加到您的 chrome-extension 项目和 manifest.json 的 background 部分，如下所示：

  "background":
    
        "scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]

如果您在 content_scripts 中需要 jquery，您也必须将其添加到清单中：

"content_scripts": 
    [
        
            "matches":["http://website*"],
            "js":["thirdParty/jquery.1.10.2.min.js", "script.js"],
            "css": ["css/style.css"],
            "run_at": "document_end"
        
    ]

这就是我所做的。

另外，如果我没记错的话，后台脚本是在您可以通过chrome://extensions 打开的后台窗口中执行的。

End of quote来源：How to use jQuery in chrome extension?