Google Chrome扩展程序:jQuery在background.js中不起作用

时间:2015-11-30 23:06:13

标签: google-chrome google-chrome-extension

出于某种原因, jQuery 在我的Google Chrome扩展程序中的 background.js 中无效。

假设我的插件告诉我页面上的所有图像。我验证它可以使用以下方法,但是它会在jQuery循环中停止。

首先,manifest.json:注意我包含jQuery,文件存在:

{
    "name": "Gallery",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "Gallery", 
    "browser_action": {
        "default_icon": "G.png" 
    },  
    "background": {
        "persistent": true,
        "scripts": ["jquery-1.11.2.min.js", "background.js"]  
    },     
    "permissions": [
        "tabs", "contextMenus", "http://*/*", "https://*/*"
    ], 
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "css": ["contentstyle.css"],
        "js": ["jquery-1.11.2.min.js", "contentscript.js"]
        }
    ], 
    "icons": {
              "32": "G.png" 
  }
}

background.js 使用jQuery语法:

chrome.browserAction.onClicked.addListener(scanImages);

function scanImages()
{
    // IT GETS HERE - THIS IS OK
    alert('Clicked plugin button, about to start looping thru IMG...'); 

    // BUT STOPS HERE: JQUERY DOESN'T EXECUTE
    $("img").each(function() {
        alert($(this).prop("src"));
    });

    // ANOTHER JQUERY THAT DOESN'T WORK
    alert('Page title = ' + $(document).find("title").text());
}

1 个答案:

答案 0 :(得分:1)

要访问任何页面的DOM,您需要使用内容脚本,如评论中所述。虽然还有另一种方法可以在background.js中访问多个脚本。

在background.html文件中添加jquery-1.11.2.min.js

....
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="background.js"></script>
....

manifest.json -->

"background": {
    "page": "path/to/background.html",
    "persistent": true
}

您也不必定义脚本密钥,只需在html文件的head部分中定义background.html页面和所需的脚本即可。我希望它有所帮助。