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

Question

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

元素如下：-

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


        });
    });
});

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

Uncaught ReferenceError: $ is not defined

Answer 1

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

然后您可以 link 在 popup.html 文件中的 popup.js 文件上方的行中。

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

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

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

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

javascript

jquery

google-chrome-extension

google-chrome-devtools

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

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

javascript

jquery

google-chrome-extension

google-chrome-devtools

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