如何在Google Chrome扩展插件中加载jQuery [英] How to load jQuery in Google Chrome Extensions

问题描述

当我点击扩展程序图标时，我无法在我简单的Google Chrome扩展程序中找到我的jQuery。我搜索了很多关于如何做到这一点，但我不明白为什么它不适合我。

我认为jQuery是合理的，因为它作品没有onClicked函数，但我更喜欢它只能在图标被点击后才能使用。

编辑：我将jquery包含在我的项目中作为一个名为jquery.js

我的manifest.json如下所示：

 <$ c $ 
name：test，
description：test，
version：1.0，
permissions：[
activeTab，
http：// * / *，
https：// * / *，
https://ajax.googleapis.com/ 
]，
 
 
content_scripts：[
 {
matches：[*：// * /]，
js：[scripts / jquery.js，scripts / script.js，scripts / background.js] 
} 
]，
 
 
 
background：{
scripts：[scripts / jquery.js，scripts / script.js，scripts / background.js] 
} ，
 
 
 browser_action：{
default_title：test，
default_icon：image.png
}，
 
manifest_version：2 
  

}

Background.js是这样的：
$ b chrome.browserAction.onClicked.addListener（function（tab）{

  chrome.tabs.executeScript（tab.id，{
 file：scripts / jquery.js，
 allFrames：true，
 runAt：document_idle
}） ; 
 
 chrome.tabs.executeScript（tab.id，{
 file：scripts / script.js，
 allFrames：true，
 runAt：document_idle 
}）; 
}）; 
  

和script.js是这样的：

  chrome.browserAction.onClicked.addListener（function（tab）{
 
 
 alert（hey！）; 
 
 
 $（'html *：not（script，style，noscript）'）。each（function（）{
 $（this）.css（background，pink）; 
 
}）; 
 
}）; 
  

我知道这个函数被浏览器调用，因为当点击图标时， ，但没有一个jQuery。任何关于如何解决这个问题的建议/我的代码可能出错？

方案

根据您提供的清单文件，background.js和jquery.js位于同一个文件夹中，因此您应该使用background.js中的正确路径导入jquery.js：

  chrome.tabs.executeScript（tab.id，{
 file：jquery.js，
 allFrames：true，
 runAt：document_idle
}）; 
 
 chrome.tabs.executeScript（tab.id，{
 file：script.js，
 allFrames：true，
 runAt：document_idle
}）; 
}）; 
  

I can't get my jQuery in my simple google chrome extension to be picked up when I click on the extension icon. I've searched quite a bit for how to do this, but I can't figure out why its not working for me.

I think the jQuery is sound because it works without the onClicked function, but I would prefer for it to only work once the icon has been clicked.

EDIT: I have jquery included in my project as a file called "jquery.js"

My manifest.json looks like this:

{
"name": "test",
"description": "test",
"version": "1.0",
"permissions": [
    "activeTab", 
    "http://*/*", 
    "https://*/*",
    "https://ajax.googleapis.com/"
],


"content_scripts": [
    {
      "matches": ["*://*/"],
      "js": ["scripts/jquery.js", "scripts/script.js", "scripts/background.js"]
    }
  ],



"background": { 
        "scripts": ["scripts/jquery.js","scripts/script.js", "scripts/background.js"]
    },


"browser_action": {
    "default_title": "test",
    "default_icon": "image.png"
},

"manifest_version": 2

}

Background.js like this:

chrome.browserAction.onClicked.addListener(function(tab) {

    chrome.tabs.executeScript(tab.id, {
        file: "scripts/jquery.js",
        allFrames: true,
        runAt: "document_idle"
    });

    chrome.tabs.executeScript(tab.id, {
        file: "scripts/script.js",
        allFrames: true,
        runAt: "document_idle"
    });
});

And script.js like this:

chrome.browserAction.onClicked.addListener(function(tab) {


 alert("hey!");


$('html *:not(script, style, noscript)').each(function() {
$(this).css("background", "pink");

    });

});

I know the function is being called by the browser because the alert gets picked up when the icon is clicked, but none of the jQuery. Any suggestions as to how to fix this/what may be wrong with my code?

Thanks

解决方案

According to the manifest file you provided, background.js and jquery.js are in the same folder, so you should import jquery.js with right path in background.js:

chrome.tabs.executeScript(tab.id, {
    file: "jquery.js",
    allFrames: true,
    runAt: "document_idle"
});

chrome.tabs.executeScript(tab.id, {
    file: "script.js",
    allFrames: true,
    runAt: "document_idle"
});
});

这篇关于如何在Google Chrome扩展插件中加载jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！