티스토리, 나의 링크에 새글 표시하기 with RSS..

 

    

 

 

CORS 확장앱

 

현재, 블로그 스킨에서 스크립트로 CORS 정책을 회피하긴 힘들어 보인다..

확장앱의 힘을 빌리는 수 밖에.....

 

 

for Firefox

CORS Unblock – 🦊 Firefox용 확장 기능 (ko)

 

for Chrome

CORS Unblock

 

for MS New Edge

Microsoft Edge Addons

 

 

 

 

 

 

 

Code

 

/* Javascript */

let links = [];
document.querySelectorAll('#my_links ul li a').forEach(function(e,k){
  if ( e.getAttribute('href').indexOf('tistory.com') > 0 || e.getAttribute('href').indexOf('schluss.kr') > 0 || e.getAttribute('href').indexOf('nareusya.com') > 0 || e.getAttribute('href').indexOf('neoearly.net') > 0 || e.getAttribute('href').indexOf('rain.re.kr') > 0 || e.getAttribute('href').indexOf('toni.co.kr') > 0 || e.getAttribute('href').indexOf('saik.kr') > 0 || e.getAttribute('href').indexOf('lifestream.kr') > 0 ) {
    let href = e.getAttribute('href');
    if ( href.indexOf('naver.com') < 0 || href.indexOf('marshall-ku.tistory.com') < 0 ) {
      fetch(e.getAttribute('href') + '/rss')
      .then(response => response.text())
      .then(data => {
          let parser = new DOMParser();
          let xml = parser.parseFromString(data, "application/xml");
          // 블로그 이름
          let strBlogger = xml.querySelector('title').innerHTML;
          // 마지막 포스트 제목
          let strTitle = xml.querySelector('item > title').innerHTML;
          // 마지막 포스트 URL 
          let strLink = xml.querySelector('item > link').innerHTML;
          let t_url = strLink.split("://");
          t_url = t_url[1].split("/");
          t_url = t_url[0];
          // 마지막 포스트 대표이미지 URL
          let strImg = xml.querySelector('item > description').innerHTML;
          if ( strImg.indexOf("&lt;img src=") > 0 ) {
          	// 새 에디터
            if ( strImg.indexOf("&lt;figure") > 0 ) {
                strImg = strImg.split("&lt;img src=");
                strImg = strImg[1];
                strImg = strImg.split(" srcset=");
                strImg = strImg[0];
                strImg = strImg.replaceAll('"', '');
                strImg = strImg.replaceAll("'", "")
            }
            // 구 에디터
            else {
                strImg = strImg.split('&lt;img src=');
                strImg = strImg[1];
                strImg = strImg.split(' filemime=');
                strImg = strImg[0];
                strImg = strImg.replaceAll('"', '');
                strImg = strImg.replaceAll("'", "")
            }
          }
          // 대표이미지가 없을 경우
          else {
          	strImg = "대체이미지 URL"
          }

          let strPub = xml.querySelector('item > pubDate').innerHTML;
          strPub = strPub.split(", ");
          strPub = strPub[1];
          let Pdate1 = strPub.substring(7, 11) + ". ";
          let Pdate2 = strPub.substring(3, 6);

          if ( Pdate2 == "Jan" ) { Pdate2 = "1. " }
          else if ( Pdate2 == "Feb" ) { Pdate2 = "2. " }
          else if ( Pdate2 == "Mar" ) { Pdate2 = "3. " }
          else if ( Pdate2 == "Apr" ) { Pdate2 = "4. " }
          else if ( Pdate2 == "May" ) { Pdate2 = "5. " }
          else if ( Pdate2 == "Jun" ) { Pdate2 = "6. " }
          else if ( Pdate2 == "Jul" ) { Pdate2 = "7. " }
          else if ( Pdate2 == "Aug" ) { Pdate2 = "8. " }
          else if ( Pdate2 == "Sep" ) { Pdate2 = "9. " }
          else if ( Pdate2 == "Oct" ) { Pdate2 = "10. " }
          else if ( Pdate2 == "Nov" ) { Pdate2 = "11. " }
          else if ( Pdate2 == "Dec" ) { Pdate2 = "12. " }

          let Pdate3 = Number(strPub.substring(0, 2)) + ".";

          let time1 = new Date(strPub);
          let time2 = new Date();
          let gap = time2.getTime() - time1.getTime();
          let date = gap / 1000 / 60 / 60;

          // 3일 이내에 작성되었으면
          if ( date <= 72 ) {
            let idx = Number(e[1]) + 1;
            e.setAttribute('class', 'new');
            e.setAttribute('data-title', strTitle);
            e.setAttribute('data-thumb', strImg);
            e.setAttribute('data-time', Pdate1 + Pdate2 + Pdate3);
            e.setAttribute('href', strLink);

            let mouseX, mouseY;
            document.addEventListener('mousemove', function(e) {
              mouseX = e.pageX - 340;
              mouseY = e.pageY
            });

            // 해당 링크에 마우스를 올리면 프리뷰 레이어를 보여주고
            e.addEventListener('mouseenter', function(){
              document.querySelector("body").insertAdjacentHTML("afterend", "<div id='link_preview'><div><img style='height:75%; width:auto' src='" + e.getAttribute("data-thumb") + "'><br><span class='title'>" + e.getAttribute("data-title") + "</span><br><span class='date'>" + e.getAttribute("data-time") + "</span></div></div>");

              document.querySelector('body').setAttribute('style', 'left:' + mouseX + 'px !important; top:' + (mouseY - (document.querySelector('#link_preview').clientHeight / 2) - 20) + 'px !important')
            });

            // 마우스를 내리면 프리뷰 레이어 삭제
            e.addEventListener('mouseleave', function(){
            	document.querySelector('#link_preview').remove()
            })
          }
      })
      .catch(console.error);
    }
  }
});

 

 

/* CSS - 스킨에 맞게끔 수정이 필요함 */

#link_preview div { position:absolute; width:240px; height:200px; text-align:center;
        font-size:16px; background-color:#000; color:#fff; padding:16px 12px; border-radius:6px;
        white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:1.4 }
#link_preview div .date { font-size: 12px; opacity:.6 }