我可以在网页内容中获取图像 url 并显示到 chrome 扩展中吗？答案

【问题标题】：can i get the image url in web page content and show into chrome extension?我可以在网页内容中获取图像 url 并显示到 chrome 扩展中吗？
【发布时间】：2019-04-03 05:08:33
【问题描述】：

我是使用 html css3 和 Javascript 创建 chrome 扩展程序现在的问题是我可以在鼠标悬停任何网站上获取图像 url 并将图像显示到我的 chrome 扩展程序中。在给定清单文件的代码下方。我没有找到任何函数使用内容脚本来获取图像 URL

清单文件

{
  "manifest_version": 2,
  "name": "React Extention",
  "author": "Muhammad Yousuf",
  "version": "1.0.1",
  "options_page": "index.html",
  "description": "Replace new tab screen with GitHub trending projects.",
  "web_accessible_resources": ["index.html"],
  "incognito": "split",
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "content_scripts": [
    {
      "matches": ["*://*.dawn.com/*"],
      "js": ["content-script.js"]
    }
  ],
  "browser_action": {
    "default_title": "Extention"
  },
  "background": {
    "scripts": ["background.js"],
    "presistent":false
  },
 "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'",

  "permissions": ["tabs", "http://*/*", "storage"]
}

【问题讨论】：

是的，您可以获取 img 的 src，但您需要先检查 mouseover 元素是否为标签，然后您可以轻松获取其 src
能否请您展示一些如何选择图像源的代码
我已经在答案中发布了我的代码，请检查

标签： javascript

【解决方案1】：

这里我首先检测到悬停元素，然后我检查了它的标签名称

 var hovered_elemnet = (window.event) ? window.event.srcElement : e.target;
        console.log("hovered_elemne",hovered_elemnet.tagName)
        if (hovered_elemnet.tagName == "IMG") {
            console.log("src--",clickedElement.src);
        }

【讨论】：

欢迎您@MuhammadYousuf，如果您也支持我的努力，那就太好了:)
当然可以，但问题是我不能投票，因为我的个人资料是新的并且声誉低于 15
当然@the_ultimate_developer :)

【解决方案2】：

document.body.onmouseover = (event)=>{
    if (event.target.nodeName === 'IMG') {
      console.log(event.target.src)
    }
  }

【讨论】：

感谢回答我的问题，我已经解决了问题。但再次非常感谢您。
@MuhammadYousuf 如果您已经回答了自己的问题，您也可以自己发布答案，以便人们将来使用它。