【问题标题】：Javascript code suddenly stops when notification appears in console当通知出现在控制台中时，Javascript 代码突然停止
【发布时间】：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>

【问题讨论】：

标签： javascript jquery dom events web-scraping

【解决方案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?

弹出式开发工具

网站开发工具

第二个错误

这个错误可能意味着元素add-to-cart 不存在。但是，它确实存在于网页中。

问题是它在popup.html 上下文中运行，而不是在网站中。 popup.html 中没有 add-to-cart 元素。

不要使用popup.html 来启动内容脚本。如果您正确设置清单，Chrome 会自动在页面上为您运行它们。

第三个错误/警告

main.js?yocs=35_:1 Overriding "availability.update"!

这可能与content.js无关。这是来自main.js 来自carters.com、cdn-fsly.yottaa.net 使用的 CDN，可能与您的代码无关。

因此，您很可能无法修复此问题，并且这样做可能会造成安全漏洞。

实施建议的更改，并出现did not work。这是因为您从不添加元素。由于这个问题是关于代码的响应，我认为did not work 是一个响应，我认为这解决了问题。

可在此处使用 SSH 获得问答： git@gitlab.com:colourdelete/so-question-63801721.git 使用 HTTPS： https://gitlab.com/colourdelete/so-question-63801721.git

【讨论】：