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

노마드 코더님의 유튜브 영상을 보고 갑자기 확장 프로그램을 한번 만들어 보고 싶어졌다.

만들 프로그램은 브라우저에서 클릭시 그 주변으로 파장을 일으키는 확장프로그램이다.

먼저 ChatGPT에게 물어봤다.

request

크롬 확장앱 만들어줘

response

안녕하세요! 크롬 확장앱을 만들어주는 것은 가능합니다. 하지만 어떤 종류의 확장앱을 만들고자 하는지에 따라서 구체적인 작업 내용과 복잡도가 상이할 수 있습니다.
일반적으로 크롬 확장앱은 HTML, CSS, JavaScript 등의 웹 기술을 사용하여 제작됩니다. 확장앱 제작을 위해선 기본적인 프로그래밍 지식과 웹 개발에 대한 지식이 필요합니다.
만약 구체적인 요구사항이나 아이디어가 있으시다면, 그에 따라 더 구체적인 조언과 안내를 제공할 수 있을 것입니다. 먼저 어떤 종류의 크롬 확장앱을 만들고자 하는지에 대해 알려주시면 도움을 드리겠습니다.

request

브라우저에서 클릭하면 커서 주변으로 파장이 퍼져나가는 확장 프로그램을 만들고 싶어

response

그러한 효과를 가진 확장 프로그램은 상호작용적이며 시각적인 효과를 사용하기 때문에 JavaScript와 CSS를 사용하여 만들 수 있습니다. 아래는 해당 확장 프로그램을 만드는 방법에 대한 간략한 지침입니다.
먼저, Chrome에서 작동하는 JavaScript 코드를 포함한 새 파일을 만듭니다.
예를 들어, "main.js"와 같은 파일 이름을 선택할 수 있습니다.
"main.js" 파일에서는 브라우저에서 클릭하는 이벤트를 감지하고
이벤트가 발생한 위치에 div를 추가하여 효과를 적용합니다.
다음은 이벤트 리스너를 등록하는 방법의 예입니다.

document.addEventListener('click', function(event) {
    // 클릭된 위치를 포함하는 div 생성
    var circle = document.createElement('div');
    circle.style.position = 'absolute';
    circle.style.borderRadius = '50%';
    circle.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
    circle.style.width = circle.style.height = '10px';
    circle.style.left = (event.pageX - 5) + 'px';
    circle.style.top = (event.pageY - 5) + 'px';

    // 생성된 div 추가
    document.body.appendChild(circle);

    // div가 확장되는 애니메이션 효과 추가
    setTimeout(function() {
        circle.style.width = circle.style.height = '100px';
        circle.style.opacity = 0;
    }, 50);
});

이제 "manifest.json" 파일을 만들어 확장 프로그램을 등록합니다.
다음은 "manifest.json" 파일의 내용 예시입니다.

{
    "name": "파장 확장 프로그램",
    "version": "1.0",
    "manifest_version": 2,
    "description": "브라우저에서 클릭하면 커서 주변으로 파장이 퍼져나가는 효과를 보여주는 확장 프로그램입니다.",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
    ]
}

마지막으로 "popup.html" 파일을 만들어 확장 프로그램 팝업 창을 구성합니다. 해당 예시에서는 팝업 창이 필요하지 않으므로, 빈 파일로 남겨둘 수 있습니다.
이러한 지침을 따라 크롬 확장 프로그램을 만들 수 있습니다.
코드의 세부사항은 사용자 요구사항에 따라 다를 수 있습니다.

이후 개발자 모드로 확장 프로그램을 올려보니 icon.png가 없어서 못 올라갔다.

그래서 미드저니를 이용해 아이콘을 생성

discord를 활용해 /imagine 명령과 keyword로 이미지를 생성해 주는데 결제가 안되어있어 생성이 안된다.

다른사람이 만들어 놓은 AI 이미지중 wave 키워드를 가진 이미지를 활용