592.script.js

// ==UserScript==
// @name         592
// @version      0.0.1
// @author       AJ Hsu <[email protected]>
// @match        https://rent.591.com.tw/rent-detail-*
// @grant        GM_addStyle
// ==/UserScript==

window.addEventListener('load', function handleLoaded() {
  window.removeEventListener('load', handleLoaded);

  var addrElem = document.querySelector('span.addr');
  var addrString = addrElem.textContent;

  var linkToMaps = document.createElement('a');
  addrElem.style.cursor = 'pointer';
  addrElem.onclick = () => {
    var url = encodeURI(`https://www.google.com.tw/maps/search/${addrString}`);
    window.open(url, '_blank');
  };

  var images = document.querySelector('input#hid_imgArr').value.replace(/"/g, '').split(',');
  var rawImages = images.map((imageUrl) => imageUrl.replace('.water3.jpg', '.jpg').replace('_765x517', '_1680x1240'));
  var imageUploadDateList = rawImages.map((url) => {
    var parts = url.split('/');
    return `${parts[5]}/${parts[6]}/${parts[7]}`;
  });

  var dateList = document.createElement('ul');
  var title = document.createElement('li');
  title.textContent = '照片歷史更新日期';
  dateList.appendChild(title);

  imageUploadDateList.forEach((uploadDate) => {
    var date = document.createElement('li');
    date.textContent = uploadDate;
    dateList.appendChild(date);
  });
  var detailInfoElem = Array.from(document.querySelectorAll('.detailInfo .explain')).pop();
  insertAfter(detailInfoElem, dateList);

  var largeImageSectionElem = document.createElement('div');
  largeImageSectionElem.className = 'houseIntro';
  var imageElemList = rawImages.forEach((imageUrl,index) => {
    var uploadDateElem = document.createElement('span');
    uploadDateElem.textContent = `照片上傳日期：${imageUploadDateList[index]}`;
    largeImageSectionElem.appendChild(uploadDateElem);

    var imgElem = document.createElement('img');
    imgElem.src = imageUrl;
    imgElem.className = 'large-pic';
    largeImageSectionElem.appendChild(imgElem);
  });

  var houseIntroElem = document.querySelector('div.houseIntro');
  insertAfter(houseIntroElem, largeImageSectionElem);
});

GM_addStyle(`
  img.large-pic {
    margin-left: -50%;
  }
`);

function insertAfter(element, newElement) {
  element.parentNode.insertBefore(newElement, element.nextSibling);
}