首页 > 解决方案 > 有什么解释为什么 $ 或 jQuery 在 chrome 扩展开发中不起作用?

问题描述

我已经将jquery compressed, production jQuery 3.5.1 slim build文件下载到项目根目录中,并添加到清单文件中,然后尝试使用$符号运行 jQuery 函数,我尝试在内容脚本和后台脚本中执行此操作,但出现错误Uncaught ReferenceError: $ is not defined

在此处输入图像描述

清单.json

  "name": "Project",
  "version": "1.0",
  "description": "Lorem Ipsum is simply dummy text of the printing",
  "permissions": ["activeTab", "declarativeContent", "storage","https://*/"],
  "options_page": "options.html",
  "background": {
    "scripts": ["background.js","jquery.js"],
    "persistent": true
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },

  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },

  "content_scripts":[{
      "matches" : ["https://www.amazon.com/s?*"],
      "js" : ["content.js","jquery.js"]
  }],

  "manifest_version": 2


}

内容.js

chrome.runtime.sendMessage({productLink: 'test', search_url: url.href }, function(response) {
    console.log(`message from background: ${JSON.stringify(response)}`);
});

function isProductUrl(url){
    let arr = url.split('/');
    if(arr[4] == 'dp')
        return true;
    else
        return false;
}


$.ajax({
  url: "www.localhost.com/search",
  context: document.body
    }).done(function() {
  $( this ).addClass( "done" );
});

标签: javascriptjquerygoogle-chrome-extension

解决方案


推荐阅读