我似乎无法从扩展程序运行我的功能

Question

我正在尝试开发一个扩展，但我似乎无法让我的 js 函数运行。

这里是元素：-

1.清单

{
    "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'));


        });
    });
});

任何关于我哪里出错的建议都将不胜感激。 我无法在控制台中获得警报或输出。帮助将不胜感激。另外，如果有人能帮助我解决我在运行扩展程序时遇到的以下错误，我将不胜感激。

未捕获的引用错误：$ 未定义

Answer 1

我建议使用npm i jquery，然后在node_modules/jquery/dist 目录中复制jquery.min.js 并将其移动到扩展程序的主要内容脚本文件夹中。

然后，您可以在popup.html 文件中的popup.js 文件上方的行中链接到它。

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

另外值得注意的是，通常popup.js文件是通过<script>标签导入popup.html的。您无需将 popup.js 添加到清单的 content_scripts 部分。