JQuery Chrome Extension not working

user_7521669 0
Viewed 966

I'm having an issue with my contentscript. I cannot get Jquery to function no matter what! Perhaps you can help me figure out what it is?

I am trying to "catch" a value I write in a field and pass it on for processing after I click a button. I am recieving the "$ is not defined" error which probably means it cannot load JQuery.

Here is my manifest, my html and my code:

 {
"name": "Test 2017",
"manifest_version": 2,
"version": "0.1",
"description": "TestApp Jquery",
"browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
},
"background": {
    "scripts": ["jquery-3.2.1.min.js",
    "background.js"
    ]
},
"permissions": [
    "tabs", "http://*/*", "https://*/*"
],
"content_scripts": 
[
    {
        "matches": [ "http://*/*", "https://*/*"],
        "js":["jquery-3.2.1.min.js",
        "contentscript.js"]
    }
]
}

Popup.html:

 <html>
<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="popup.js"></script>
    <style type="text/css" media="screen">
        body { min-width:250px; text-align: center; }
        #click-me { font-size: 20px; }
    </style>
</head>
<body>
  <div>Input: <input id="input">
  <input id="click-me" type="button" value="Go!"/>
</body>

Popup.js

 function clickHandler(e) {
chrome.extension.sendMessage({directive: "popup-click"}, function(response) 
{
    this.close(); // close the popup when the background finishes processing 
request
});
}


 document.addEventListener('DOMContentLoaded', function () {
document.getElementById('click-me').addEventListener('click', clickHandler);
 })

background.js

 chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
    switch (request.directive) {
    case "popup-click":
        // execute the content script
        chrome.tabs.executeScript(null, { // defaults to the current tab
            file: "contentscript.js", // script to inject into page and run in sandbox
            allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
        });
        sendResponse({}); // sending back empty response to sender
        break;
    default:
        // helps debug when request directive doesn't match
        alert("Unmatched request of '" + request + "' from script to 
 background.js from " + sender);
    }
}
);

Contentscript.js where I try to run Jquery:

 var abc =  $("#input").val();
 console.log(abc);

And then I get the error.

Any help here? Why can't my extension load JQuery? I have the scripts loaded in the right order and all.

Thanks in advance!

google-chrome-extension jquery javascript
1 Answers

There is no need to use a content script for what you are trying to achieve. Content scripts are used to control the DOM of the website that is loaded in your browser. The button you are trying to manipulate is in your popup window and is controlled by popup.js, not contentscript.js. Simply move the jquery code to popup.js and it should work as expected.

Content Scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

Popup.html (nothing changed here, jquery script tag is present):

 <html>
<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="popup.js"></script>
    <style type="text/css" media="screen">
        body { min-width:250px; text-align: center; }
        #click-me { font-size: 20px; }
    </style>
</head>
<body>
  <div>Input: <input id="input">
  <input id="click-me" type="button" value="Go!"/>
</body>

Popup.js:

     function clickHandler(e) {
    chrome.extension.sendMessage({directive: "popup-click"}, function(response) 
    {
        this.close(); // close the popup when the background finishes processing 
    request
    });
    }


     document.addEventListener('DOMContentLoaded', function () {
     document.getElementById('click-me').addEventListener('click', clickHandler);
     })    

    var abc =  $("#input").val();
    console.log(abc);
user_43090500
Related