0

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

清单.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
}

脚本.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 张图片。这是怎么回事?

4

1 回答 1

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使用该数字调用),让注入的脚本将消息传递回扩展程序。

于 2013-01-02T21:28:18.547 回答