How to grab image's parent link?

Question

I have a Chrome extension that finds an image. I want to print the link you go to when you click that image. For instance, in this case, I want to print " https://politi.co/3ef3fyd?fbclid=IwAR0pLY2x8H5do4N_WBudKJUMzDx0qlBfeOWVVjN2hrbutdwf9ZXq2vIOKbc ."

I tried parentNode following this SO suggestion. "There's a defined image here" prints fine. But then I get an error in the next line: "TypeError: Cannot read property 'href' of undefined."

Javascript

    var image = $(uCW).find('[src^="https://external"]').attr("src");
    console.log(image);

    if(typeof image !== "undefined")
    {
          console.log("there's a defined image here");
          var ilink = image.parentNode.href;
          console.log("ilink", ilink);
    }

Update :

Now I'm using:

var cat = $("image").closest('a').href;
console.log("cat", cat)

But it's just printing "undefined."

HTML

<a href="https://politi.co/3ef3fyd?fbclid=IwAR0pLY2x8H5do4N_WBudKJUMzDx0qlBfeOWVVjN2hrbutdwf9ZXq2vIOKbc" aria-describedby="u_fetchstream_3_7" aria-label="Tara Reade’s lawyer drops her as a client" tabindex="-1" target="_blank" rel="noopener nofollow" data-lynx-mode="asynclazy" data-nguardprocessed="true" data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Fpoliti.co%2F3ef3fyd%3Ffbclid%3DIwAR0pLY2x8H5do4N_WBudKJUMzDx0qlBfeOWVVjN2hrbutdwf9ZXq2vIOKbc&amp;h=AT2KhFxAof_9rmralxQQBdP5e1HxxUdkL-Bu8y09XvpSAcOGDaIhyU7SRJ9IeDsJhrXKMOmyUZ6WDBPiAJrhkeMQ_yaWEFhFVHlFXuyIj5XXQugS5BaFuJO3U3kR4Lk1wKEUq_SPGmWbnhAfHv7Zh3vu5tIlhfZuQZXT5wnGk4U">
   <div class="accessible_elem inlineBlock" id="u_fetchstream_3_7">
      <div class="nguard-widget" style="display: inline-block; position: relative;">
         <div>
            <div class="sc-VigVT hgSSpT">
               <div class="sc-jTzLTM fuPExf">
                  <svg class="newsguard_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 64">
                     <g>
                        <rect fill="#fff" x="5.11" y="11.06" width="40.4" height="31.66"></rect>
                     </g>
                     <g>
                        <path fill="#42b149" fill-rule="evenodd" d="M49,0H0V24.07C0,40.86,0,52,22.79,63.18l1.67.82,1.66-.82C48.54,52,49,40.86,49,24.07ZM22.86,40.23a2.35,2.35,0,0,1-3.45,0L7.33,28.37a2.47,2.47,0,0,1,0-3.39l3.54-3.4a2.15,2.15,0,0,1,1.67-.75,2.45,2.45,0,0,1,1.77.75l6.83,6.76L36.9,12.77A2.45,2.45,0,0,1,38.67,12a2.14,2.14,0,0,1,1.67.75l3.54,3.39a2.49,2.49,0,0,1,0,3.4Z"></path>
                     </g>
                  </svg>
               </div>
            </div>
         </div>
      </div>
      Her attorney said the decision “is by no means a reflection on whether then-Senator Biden sexually assaulted Ms. Reade.”
   </div>
   <div class="_6l- __c_">
      <div class="uiScaledImageContainer _6m5 fbStoryAttachmentImage" style="width:514px;height:268.42222222222px;"><img class="scaledImageFitWidth img" src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQB8m91AABOjBxLI&amp;w=540&amp;h=282&amp;url=https%3A%2F%2Fstatic.politico.com%2F7c%2F4a%2Fc9f2023e43c0aa8055e248e1ffee%2F200522-tara-reade-ap-773.jpg&amp;cfs=1&amp;upscale=1&amp;fallback=news_d_placeholder_publisher&amp;_nc_hash=AQBjEY6wVpUxS5-r" data-src="https://external-ort2-2.xx.fbcdn.net/safe_image.php?d=AQB8m91AABOjBxLI&amp;w=540&amp;h=282&amp;url=https%3A%2F%2Fstatic.politico.com%2F7c%2F4a%2Fc9f2023e43c0aa8055e248e1ffee%2F200522-tara-reade-ap-773.jpg&amp;cfs=1&amp;upscale=1&amp;fallback=news_d_placeholder_publisher&amp;_nc_hash=AQBjEY6wVpUxS5-r" style="top:0px;" alt="" width="514" height="269" aria-label="No photo description available."></div>
   </div>
</a>

Answer 1

This will give you array of all links around images:

$$('img').map((el) => el.closest('a'))
  .filter(Boolean)
  .map((link) => link.href)

You can reduce scope of search like this:

Object.values(root.getElementsByTagName('img'))
  .map((el) => el.closest('a'))
  .filter(Boolean)
  .map((link) => link.href)

where root is some DOM element