Question

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

清单文件

{
  "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"]
}

Answer 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);
        }

Answer 2

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

如何获取网页内容中的图片网址并显示为chrome扩展程序？

2 个答案: