Javascript code suddenly stops when notification appears in console

Question

I am coding a chrome extension to detect changes in the DOM after a certain button is clicked on this website. Specifically, once one clicks the add-to-cart button, a popup appears displaying more information, and when this occurs the DOM changes. I've coded an event listener to see when the add-to-cart button is clicked. However, if I click say one of the buttons to specify my size, a notification in the console appears stating Overriding "availability.update"!. And after this, when I click the add-to-cart button, I get no response from my code. Does anyone know how to fix this?

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>

score 0 · Answer 1 · answered Sep 08 '20 at 23:45

Please use code blocks instead of italics when representing code or console output that should be formatted like code.

`<code stuff>`

Also, please provide a git repo/zip file/archive file with the minimum code required for the problem to occur.

Also, since this is run as a Chrome extension, please add the google-chrome-extension tag.

First Error

Uncaught ReferenceError: $ is not defined

Using $(something) in JS code usually means you are using jQuery. jQuery is a JS library that is designed to help write JS code. To use $(something), you will need to load in jQuery.

This means that jQuery is not configured/loaded correctly.

Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.

Source: JQuery - $ is not defined

But, you did load jQuery in popup.html. Why is jQuery not loading?

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

popup.html is for the popup when you click on the icon. The JS in the popup runs in the context of popup.html, not the website.

I changed the code to log TEST 0 from content.js. Notice that TEST 0 is not shown in the website's DevTools Console, but rather the popup's DevTools Console.

If it's a "normal" webpage: To load jQuery, use one of these to add a script tag to the DOM.

If it's inside a Chromium extension:

Start of quote

You have to add your jquery script to your chrome-extension project and to the background section of your manifest.json like this :

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

If you need jquery in a content_scripts, you have to add it in the manifest too:

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

This is what I did.

Also, if I recall correctly, the background scripts are executed in a background window that you can open via chrome://extensions.

End of quote Source: How to use jQuery in chrome extension?

Popup DevTools

Website DevTools

Second Error

This error probably means that element add-to-cart doesn't exist. But, it does exist in the webpage.

The problem is that this runs in the popup.html context, not of the website. There is no add-to-cart element in popup.html.

Do not use popup.html to initiate content scripts. Chrome automatically runs them for you on a page if you set the manifest correctly.

Third Error/Warning

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

This probably has nothing to do with content.js. This is from main.js from a CDN used by carters.com, cdn-fsly.yottaa.net, which probably has nothing to do with your code.

As such, you most likely can't fix this, and doing so might create a security hole.

Implement the changes proposed, and did not work appears. This is because you never add the element. Since this question is about the response from code, and I think did not work is a response, I think this solves the problem.

Question and Answer available here using SSH: git@gitlab.com:colourdelete/so-question-63801721.git Using HTTPS: https://gitlab.com/colourdelete/so-question-63801721.git