Google Chrome 扩展程序：jQuery 在 background.js 中不起作用 [重复]

Question

由于某种原因，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());
}

Answer 1

要访问任何页面的 DOM，您需要使用 cmets 中解释的内容脚本。虽然在你的 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
}

您也不必定义 scripts 键，只需在 html 文件的 head 部分定义您的 background.html 页面和您想要的脚本。希望对你有帮助。