브라우저의 모든 이미지를 짤방으로 바꾸는 크롬확장기능 만들기

참고영상

https://youtu.be/pIQmxUk_FdI

영상의 방법을 응용해서,
똑같은 페페 사진을 뿌리는 것이 아닌
여러 개의 짤방을 뿌리는 크롬확장기능을 만들어서
동생 컴퓨터에 심어버리고 싶었다 ⬅ 가장 큰 이유

 

죠죠를 좋아하는 동생... 모든 이미지가 죠죠로 바뀐다면 분명 즐거워하겠지.

 

처음에는 영상을 따라 똑같이 만들어 보았다.

 let imgs = document.querySelectorAll("img");
  imgs.forEach((a,i)=>{
   a.src = "jojo1.gif"
  })

당연히 이러한 화면이 되었다. 같은 사진으로 쫙 도배되었다.

수 많은 카쿄인

여기서 배열을 만들어 다양한 짤방 이미지를 넣고,
거기서 랜덤으로 가져오는 기능을 만들었다.

let jojoGifs = [
"jojo1.gif",
"jojo2.gif",
"jojo3.gif",
"jojo4.gif",
"jojo5.gif"
];

let imgs = document.querySelectorAll("img");
// 브라우저의 모든 img를 찾아 순회하고
imgs.forEach((a,i)=>{  
// 위의 jojoGifs 배열 길이만큼의 랜덤숫자를 뽑아서 randomJojo에 저장했다.
var randomJojo = Math.floor(Math.random() * jojoGifs.length);
 a.src = jojoGifs[randomJojo];
})

• 처음에 randomJojo를 let을 이용해 선언했더니,
  재할당은 가능하지만 재선언은 불가능해서 계속 같은 이미지를 뿌렸다. 그래서 var로 선언하였다.
• 랜덤숫자를 뽑을 때, 숫자가 아닌 .length를 활용하는 방법을 익혔다. 나중에 배열에 이미지를 많이 추가하더라도 일일이 숫자를 수정하지 않아도 되서 편리하다고 느꼈다.
• 배열[인덱스] 형태로 배열 안의 값을 불러와서 기존 이미지 경로에 할당했다.

 

하지만 Javascript는 페이지 로드시 단 한번만 실행되기 때문에,
스크롤을 아래로 내리면 여전히 기존 이미지들이 살아있었다.

 

영상에서 나온대로 setInterval() 함수를 사용하여,
정해진 시간마다 반복해서 Javascript 코드를 실행하게 만들어 보았다.

문제가 생겼다...

let jojoGifs = [
"jojo1.gif",
"jojo2.gif",
"jojo3.gif",
"jojo4.gif",
"jojo5.gif"
];

setInterval(()=>{
    let imgs = document.querySelectorAll("img");
    imgs.forEach((a,i)=>{
    var randomJojo = Math.floor(Math.random() * jojoGifs.length);
     a.src = jojoGifs[randomJojo];
    })
},500)

이미 짤방으로 바뀐 이미지들도 정신없이
정해진 시간에 맞춰 계속 변경되고 있었다.

 

기존에 바뀐 이미지는 그대로 냅두고, 새로 로드되는 이미지만 짤방으로 변경하고 싶었다.
아직 Javascript에서 아는건 if else 밖에 없으니 그걸 활용했다.

let jojoGifs = [
"jojo1.gif",
"jojo2.gif",
"jojo3.gif",
"jojo4.gif",
"jojo5.gif"
];

setInterval(()=>{
  let imgs = document.querySelectorAll("img");
  imgs.forEach((a,i)=>{
  // 만약 현재 이미지의 경로와 같은 값이 배열에 포함되어있다면 그냥 냅두고
  if (jojoGifs.includes(a.src))
  { return }
  // 배열에 포함된 이미지가 아니라면 배열의 이미지 중 하나로 바꿔버린다
  else {
    var randomJojo = Math.floor(Math.random() * jojoGifs.length);
    a.src = jojoGifs[randomJojo];
  }
})
},500)

• includes() 함수활용법을 알았다. 배열.includes(비교할 단일값); 형태로 사용해서 단일값과 같은 값이 배열에 포함되어 있으면 true를 반환한다.

 

드디어~ 

모든 이미지를 짤방으로 바꿔버리는 크롬확장기능을 만들었다.
(이미 바뀐 이미지는 그대로 두고, 안바뀐 이미지만 골라서 변환한다.)

동생의 반응이 정말 궁금하다.