Home/ Questions/Q 1101547
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T01:03:06+00:00

For instance, if I input: http://www.google.com/ It would return: http://www.google.com/images/logos/ps_logo2.png Using javascript/jquery. These sites

  • 0

For instance, if I input:
http://www.google.com/

It would return:
http://www.google.com/images/logos/ps_logo2.png

Using javascript/jquery. These sites would all be external. Thank you!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since that is a Google Chrome extension, you are not bound to same origin policy.

    Basically, you would need content scripts to fetch all the images within a page, and check each image’s size within the DOM to know if its larger the last fetched image.

    You can use Message Passing, to communicate from the Content Script to the popup/background page.

    For example, I will show you how to get the largest image from a page and show it within the popup. We use all the techniques shown above and you will see the largest image within the popup if you activate it. (should show I believe :))

    manifest.json (snippet)

     ...

 "permissions": [
   "tabs",
   "http://*/*"
 ],
  "content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["images.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ]

...

    popup.html

    <!DOCTYPE html> 
<html>
<head>
<script>
function getImage() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getImage"}, function (response) {
      var text = document.getElementById('image'); 
      var image = response.data;
      text.src = image ? response.data : 'no_image.gif';
    });
  });
}
</script>
</head>
<body>
<button onclick="getImage(); ">Get Largest Image</button>
<img src="no_image.gif" id="image"/>
</body>
</html>

    images.js (content script)

    function getMaxImage() {
  var maxDimension = 0;
  var maxImage = null;

  // Iterate through all the images.
  var imgElements = document.getElementsByTagName('img');
  for (var index in imgElements) {
    var img = imgElements[index];
    var currDimension = img.width * img.height;
    if (currDimension  > maxDimension){
       maxDimension = currDimension
       maxImage = img;
    }
  }
  // Check if an image has been found.
  if (maxImage) 
    return maxImage.src;
  else
    return null;
}

// Listen for extension requests.
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "getImage") {
    sendResponse({data: getMaxImage()});
  } else {
    sendResponse({}); // snub them.
  }
});
    • 0