Question

基本的Chrome扩展有问题。我的目标是从网页中检索img元素。

的manifest.json：

{
    "name": "My first chrome extension",
    "version": "1.0",
    "background": { "scripts": ["script.js", "jquery-1.8.3.js"] },
    "permissions": [
        "http://*/*"
    ],
    "browser_action": {
        "name": "Do something with images",
        "icons": ["icon.png"]
    },
    "manifest_version": 2
}

的script.js：

var imgs = [];

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

//  imgs = document.getElementsByTagName("img");
    imgs = $('img');
    if(imgs.length > 0){
        alert("abc");
    }    
});

不显示带图像警告的页面。 imgs.length是0.而在我键入的同一页面上的javascript控制台中：

imgs = $('img');
imgs.length;

我得到了29张图片。发生了什么事？

Answer 1

您的onClicked处理程序未在页面上运行;相反，它在单独的扩展环境中运行。相反，您需要将脚本注入到etab：

中

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {
        file: "img_script.js"
    });
});

其中img_script.js是您的扩展程序中的脚本文件。

或者，如果必须，请执行：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {
        code: "imgs = $('img'); if(imgs.length > 0){alert('abc');}"
    });
});

然而，由于可读性和未来的代码维护，这是可怕的。请不要这样做。

如果脚本仅作用于页面（例如，您只是用新值替换页面上所有图像的src属性），那么您就完成了。如果您需要扩展来对结果进行进一步处理（例如，您想要计算页面上有多少图像，然后使用该数字调用chrome.browserAction.setBadgeText），请将注入的脚本pass a message恢复为扩展名。

检索图像，镀铬扩展

1 个答案: