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

Question

如何制作一个 Chrome 扩展程序来用其他图像替换图像？

这是迄今为止我的 ma​​nifest.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 文件，如果不可能，请告诉我。

Answer 1

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 as detailed in this question