곧장 기부 사이트 크롬 확장 프로그램 개발

 

곧장기부 편의 기능 추가 - Chrome 웹 스토어 (google.com)

곧장기부 편의 기능 추가

 

 

곧장기부라는 곳을 이용해 기부를 시작했다 (tistory.com)

곧장기부라는 곳을 이용해 기부를 시작했다

이전에 포스팅 한 적이 있는데, 약 2달정도 전부터 곧장기부를 통해 기부 활동을 시작하게 되었다.

처음엔 그냥 돈만 내면 끝이겠거니 했는데 배송이 완료되니 각 모금함마다 해당 기관에서 후기를 올려주기 까지 하더라

 

이런 식으로 시설 운영자의 감사의 말과 상품 인증샷, 아이들의 사용 모습, 후기 등이 적혀서 올라온다

그런데 사진 비율이 고정 돼있어서 대부분의 사진이 일부분 잘려버린다...

사진 다운로드 기능은 제공하지만 하나하나 다운 받기도 그렇고 그냥 눌렀을 때 새창을 띄어주면 될 것 같은데 굳이 왜 그걸 안했을까 싶다...

 

 

그리고 또 하나

내가 기부한 내역을 볼 수는 있다

그런데 그 기부함으로 바로가는 기능이 부재

 

 

정확히는 해당 기부내역 누르면 영수증을 볼 수 있는데 기부확인하기 버튼은 존재하지만 눌르면 그냥 이전 페이지로 이동만 할 뿐이다

이건 문의해보니 제작 예정이라고 하는걸 보면 그냥 만들다 만 것같다...

 

이게 기부함 진행상황 알림은 잘 오는데( 과정마다 와서 후기 알림 찾기가 힘들다...) 정작 알림 페이지에서 그 모금함이 구분이 힘들어서 나중에 한번에 보러가기도 힘들고...

무언가 조치가 필요해

 

그래서 처음으로 확장 프로그램에 손 대보았다

전에 누구한테였나 들었을 때 어렵다, 복잡하다 해서 아예 찾아보지도 않았었는데 찾아보니 그냥 js파일을 읽어내는 거였다....

누구일까 어렵다고 했던게...

 

그래서 뚝딱뚝딱 제작

 

확장 추가 시 모금내역에 버튼이 생성 된다

누르면 뭐, 해당 모금함으로 바로 가진다

모금함은 상태에 따라 진행중/ 완료 모금함 주소로 나눠지는데 기부함 번호를 넣으면 틀려도 어느쪽이든 알림띄우고 알아서 이동해준다

버튼 이동 기준은 완료 모금함

 

 

후기사진도 그냥 누르면 새창에서 열게 만들었다. 

이건 내가 뭔가 했다는 느낌도 안난다... 이거 하나를 안해주다니

 

간단하고 별 거없지만 불편함은 많이 사라졌다 만족스럽다...

아쉽게도 모바일에선 적용이 안되지만 그건 이제 곧장기부쪽에서 해결해 주길 기대할뿐...

 

확장 프로그램은 단순하게 프로그램 정보, 환경 등을 알리는 manifest.json 파일과 작동할 코드인 index.js 파일로 이루어진다. ( 지식이 부족해서 설명이 어렵다... )

js파일명은 manifest에 직접 넣는 거니까 아마 뭐든 상관없을듯

{
    "name": "곧장기부 편의 기능 추가",
    "description": "곧장기부 기부내역 리스트 내에 기부함 바로가기 버튼 생성 및 모금함 내 이미지 클릭 시 새창에서 이미지 열기",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
      {
        "matches": ["https://thedirectdonation.org/*"],
        "js": ["index.js"]
      }
    ]
  }

이게 작성한 manifest.json

matches에 도메인 주소를 넣으면 해당 도메인에서만 작동한다고 한다.

manifest_version은 아마 3이 아니라 1을 넣어봤었는데 에러가 난걸 보니 3버전을 써야 하나보다

manifest V3 라고 하는 모양

 

{
  const articles = document.querySelectorAll('article');
  const imgDivs = document.querySelectorAll('.swiper-wrapper > div');

  imgDivs.forEach(f => {
    f.style.cursor = "pointer";
    f.addEventListener('click', () => {
      const style = getComputedStyle(f);
      const backgroundImage = style.backgroundImage;
      if (backgroundImage) {
        const url = backgroundImage.match(/"(.*?)"/)[1];
        window.open(url, "_blank");
      }
    })
  })

  articles.forEach((article) => {
    const input = article.querySelector('input[name="donate_idx"]');
    if (!input) return;

    const value = input.value;
    article.style.position = "relative";
    article.style.flexWrap = "wrap";

    const div = document.createElement('div');
    div.style.position = "relative";
    div.style.display = "flex";
    div.style.justifyContent = "flex-end";
    div.style.width = "100%";

    const button = document.createElement('button');
    button.style.backgroundColor = "#fbb200";
    button.style.borderRadius = "30px";
    button.style.padding = "8px 16px";
    button.style.border = "none"
    button.style.color = "white"
    button.style.marginTop = "16px"
    button.style.fontWeight = 700;
    button.textContent = '모금함 바로가기';

    button.addEventListener('click', () => {
      window.open(`https://thedirectdonation.org/index/donate_end/${value}`, "_blank")
    });
    div.appendChild(button)

    article.appendChild(div);
  });
}

이건 자스 코드

정말 단순 무식하고 간단...

크롬 개발자 툴의 콘솔에서 먼저 찍어보고 코드로 만들었다

코드에 대해선 할 말도 없다...

아마 저것보다 나은 코드를 만들 수도 있겠지만 코드가 너무 가벼워서 굳이 뭐...

 

암튼 간단히 불편함이 해소되니 기부니가 좋다

 

게시허가는 곧장기부측에 얻고 아이콘도 구걸해서 박아넣어서 게시하였다

 

 

그러자 감사하게도 선물을 다 주시더라...아이고 이게 뭐라고 

그래도 코드로 뭔가해서 무언가 받아보는 건 처음이라 만족감이 있다

솔직히 앞으로도 이런 일이 많았으면 좋겠다...

 

암튼 이제 크롬 확장 만드는 법도 알았고 개발자 수수료까지 냈으니 무언가 보이면 숑숑 만들어나 봐야지...