구글 확장 프로그램 만들어 보기 #2

이전 이야기

구글 확장 프로그램 만들어 보기 #1

 

manifest.json를 변경하고 js에서 style을 생성하여 모든 탭에서 원형 파장이 생겨나게 만들었다.

 

manifest.json

{
    "name": "wave",
    "manifest_version": 3,
    "description": "브라우저에서 클릭하면 커서 주변으로 파장이 퍼져나가는 효과를 보여주는 확장 프로그램입니다.",
    "version": "1.0",
    "icons": {
        "16": "images/16.png",
        "32": "images/32.png",
        "48": "images/48.png",
        "128": "images/128.png"
    },
    "action" : {
        "default_icon": "images/32.png",
        "default_title": "Wave",
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab",
        "<all_urls>"
    ],
    "content_scripts": [
        {
          "matches": [
            "<all_urls>"
          ],
          "js": [
            "script.js"
          ]
        }
      ]
      
}

permissions에 실행되는 탭과, 모든 url을 설정하여 어디서든 동작하도록 허가하였다.

content_scripts를 통해 웹 페이지 컨텍스트에서 독립적으로 실행하는 script를 만들었다.

 

script.js

document.addEventListener("click", function(e) {
    const wave = document.createElement("div");
    wave.className = "wave";
    document.body.appendChild(wave);
  
    wave.style.top = e.clientY + "px";
    wave.style.left = e.clientX + "px";
  
    wave.addEventListener("animationend", function() {
      document.body.removeChild(this);
    });
  });
  
  const style = document.createElement("style");
  style.textContent = `
    .wave {
      position: absolute;
      width: 0;
      height: 0;
      border-radius: 50%;
      background-color: rgba(125, 125, 125, 0.7);
      animation: ripple 1s linear;
    }
  
    @keyframes ripple {
      from {
        width: 0;
        height: 0;
        opacity: 0.5;
      }
      to {
        width: 400px;
        height: 400px;
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(style);

click 이벤트가 발생하면 div를 생성하고 wave라는 이름으로 클래스를 설정 body에 추가한다.

style element를 만들어서 wave 클래스를 정의해서 wave의 모양을 꾸며주었다.

 

동작 모습

---

References By

https://80000coding.oopy.io/34a2083b-c159-4524-b5f2-750d3ab4fbba

[Unsolved.wa 개발기 - 2] chrome extension 시작부터 끝까지