Chorme Extensions 업비트

코인 종목들의 시세변화를 보여주는 확장 프로그램을 개발 중 이슈

 

업비트의 Open Api 호출 제한( 1초 10회 )으로 횟수를 초과하면 업비트 서버에서 에러로 처리

const suspendFlag = requestQueue.length > 0;

  let requestCount = 0;
  while (requestQueue.length > 0 && requestCount < 3) {
    const popItem = requestQueue.pop();
    if (popItem) {
      requestMarketInfo(marketList, popItem.market, popItem.korean_name, minute, popItem.index);
      ++requestCount;
    }
  }
  if (!suspendFlag) {
    marketList.slice(marketIndex, marketIndex + 3).forEach((marketInfo, index) => {
      requestMarketInfo(marketList, marketInfo.market, marketInfo.korean_name, minute, marketIndex + index, true);
    });

    // upbit rest api 1초당 10개 제한
    marketIndex = marketIndex + 3 >= marketList.length ? 0 : (marketIndex += 3);
  }

 

- 일정시간마다 종목정보를 요청하는 부분이 있음

- 실패한 요청은 requestQueue에 쌓아두고 requestQueue에 데이터가 있으면 기존요청은 잠시중단하고 requestQueue의 데이터를 서버에 요청

- 1초에 10개 이상의 요청을 하면 무조건 요청이 실패하므로 너무 많은 요청을 보내지 않도록해야한다.

 

const [marketCandle, marketPrice] = await Promise.all([getMarketCandle(market, minute), getMarketPrice(market)]);

  if (marketCandle && marketPrice) {
    const find = targetMarketList.findIndex((item) => item.name === name);

    const newItem: targetMarketInfo = {
      market: market,
      name: name,
      prevPrice: marketCandle[1].trade_price,
      curPrice: marketCandle[0].trade_price,
      gapPercent: ((marketCandle[0].trade_price - marketCandle[1].trade_price) / marketCandle[0].trade_price) * 100,
      accTradePrice24h: marketPrice[0].acc_trade_price_24h,
    };

    if (find === -1) {
      targetMarketList.push(newItem);
    } else {
      targetMarketList[find] = newItem;
    }
  } else {
    if (retry) requestQueue.push({ ...marketList[index], index });
  }

 

requestQueue에 계속해서 실패한 요청이 들어갈수도 있으므로 retry 변수를 통해서 조절할 수 있다.
현재는 boolean 값으로 한번만 retry하고 있지만 필요에 의하면 number 변수로 retry count를 설정할 수도 있다.

 

 

chrome 확장프로그램은 크게 3가지 파일로 동작한다.

그 중 popup과 contentScript간 데이터 처리에 대한 이슈가 있었다.
popup은 확장 프로그램 아이콘 클릭 시 나타나는 ui의 동작을 구현하며

contentscript은 현재 페이지에 있는 DOM을 조작하는 역할을 한다.

 

popup ui 변경 시

사진에서 보이는 빨간배경의 list item들 정보들을 clear하려 했는데 동작을 하지 않았다.

 

popup이 관리자 페이지가 따라 나오는걸로 봐서 서로 다른 페이지에서 동작하는 것으로 유추됬고,

그렇다면 서로 다른 메모리 공간을 가지고 있기 때문에 서로 변수에 대한 직접적인 접근이 불가능하기 때문에 다른 방법을 찾아야 했다.

 

export const getStorage = async (key: string) => {
  const storage = await chrome.storage.local.get([key]);
  return storage;
};

export const setStorage = async (key: string, value: any) => {
  await chrome.storage.local.set({ [key]: value });
};

 

찾아보니 chorme storage라는 브라우저간 데이터를 공유할 수 있는 저장소로 key값을 저장하고, contentScript에서 이를 주기적으로 감지하여 list item을 clear해주는 로직을 구현했다. local storage를 사용해도 무관할 것으로 보인다.

 

https://chromewebstore.google.com/detail/hnjekbfjeongcjipokedmkkjpgffpjop?hl=ko&authuser=0