Chrome扩展程序可将图像替换为其他图像

时间:2017-03-18 20:00:40

标签: javascript json image replace google-chrome-extension

如何使用其他图片替换图片的Chrome扩展程序?

到目前为止,这是我的 manifest.json 代码:

{
  "name": "HaramB",
  "version": "69.0.420.666",
  "manifest_version": 2,
  "description": "This is HaramB's own extension!",
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_popup": "popup.html",
    "default_title": "HaramB"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ],
  "icons": {
    "128": "images/icon.png"
  },
  "web_accessible_resources": [
    "images/nicolas.jpg"
  ],
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["onPage.js"],
    "css": ["onPage.css"]
  }]
}

这是我的 onPage.js 代码:

var picture = "images/nicolas.jpg";
document.getElementsByTagName("img").setAttribute("src", picture);

不要关心 popup.html onPage.css 文件。

onPage.js 文件,如果不可能的话,请告诉我。

1 个答案:

答案 0 :(得分:2)

document.getElementsByTagName()返回一个元素数组。这意味着您需要遍历数组并单独调用所需的方法,如下所示:

var picture = "images/nicolas.jpg",
    images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {
    images[i].setAttribute("src", picture);
};

注意:最好使用images[i].src = ...setAttribute用作detailed in this question