I can't seem to run my function from an extension

Question

I'm trying to develop an extension but I can't seem to get my js function to run.

Here are the elements:-

1.Manifest

{
    "manifest_version": 2,
    "name": "KS Scrapper",
    "description":"Simple Scrapper",
    "version" : "1.0.0",
    "icons":{"128":"images/ks_logo_128.png"},
    "browser_action" : {
        "default_icon" : "images/ks_logo_19.png",
        "default_popup" : "popup.html"
    },
    "content_scripts" : [
            {
            "matches": ["<all_urls>"],
            "js" : ["popup.js"],
            "css" : ["c.css"]
        }
    ],
    "web_accessible_resources": [
        "css/style.css"
    ],
    "permissions": ["tabs"],
    "background":{
        "scripts":["background.js"]
    }
}

2.popup.js

var a = chrome.extension.getURL("c.css");
$('<link rel="stylesheet" type="text/css" href="' + a + '" >').appendTo("head");

chrome.tabs.query({
    active: true,
    currentWindow: true
}, function () {
    $(document).ready(function(){
        $("a").hover(function(){

            //if get onhover id
            alert("NOW GET ON HOVER ID NAME:--"+" "+this.id);

            //if get onhover class
            console.log("NOW GET ON HOVER CLASS NAME:--"+" "+$(this).attr('class'));


        });
    });
});

Any suggestions on where I'm going wrong would really be appreciated. I can't get an alert or an output in the console. Help would be greatly appreciated. Also if someone would help me to solve the following error I get when running the extension I would be really grateful.

Uncaught ReferenceError: $ is not defined

Answer 1

I would recommend using npm i jquery then within the node_modules/jquery/dist directory copy jquery.min.js and move it to your extension's main content script folder.

You could then link to it inside your popup.html file in the line above your popup.js file.

<script src="./jquery.min.js"></script>

It is also worth noting that usually the popup.js file is imported into popup.html through a <script> tag. You don't need to add popup.js to the content_scripts section of your manifest.