크롬확장프로그램 만들기 - 가이드라인! 확장프로그램 구조 설명 !

> - 확장 프로그램 신원 확립:
>name, version, description 필드에 기본 정보가 들어간다.
이 정보로 사용자와 Chrome 웹 스토어가 프로그램을 식별한다.


- 권한 선언:
>permissions 배열에 필요한 권한이 나열된다.
이는 사용자의 프라이버시와 보안을 지킨다.


- 리소스 정의:
>icons, action 등에 시각적 요소의 위치가 지정된다.
사용자 인터페이스 관련 파일들의 경로가 여기에 있다.


- 백그라운드 로직 설정:
>background 섹션에 서비스 워커나 백그라운드 페이지가 정의된다.
확장 프로그램의 '두뇌' 역할을 하는 스크립트가 여기에 지정된다.


- 콘텐츠 스크립트 선언:
>content_scripts 섹션에 웹 페이지에 삽입될 스크립트가 정의된다.
이를 통해 확장 프로그램이 웹 페이지와 상호작용한다.


- 보안 정책 설정:
>content_security_policy에 확장 프로그램의 보안 정책이 정의된다.
XSS 공격 등으로부터 확장 프로그램을 보호한다.


- API 버전 명시:
>manifest_version에 사용하는 manifest 파일의 버전이 지정된다.
이에 따라 Chrome이 확장 프로그램을 해석하고 실행한다.


- 웹 접근 범위 정의:
>host_permissions에 접근 가능한 웹 사이트가 지정된다.
사용자의 동의 하에 특정 도메인에 대한 접근 권한이 부여된다.


- 국제화 지원:
>default_locale과 관련 리소스 파일로 다국어를 지원한다.
이를 통해 전 세계 사용자를 위한 현지화가 가능하다.


- 웹 접근성 기능:
>commands 섹션에 키보드 단축키가 정의된다.
이로써 사용자 경험이 향상되고 접근성이 개선된다.

// manifest.json
{
  "name": "Simple Change Color",
  "description": "현재 탭의 배경색을 변경하고 텍스트를 추가하는 간단한 MV3 확장 프로그램",
  "version": "1.0.0",
  "manifest_version": 3,
  "permissions": [
      "activeTab",
      "scripting"
  ],
  "host_permissions": [
      "<all_urls>"
  ],
  "action": {
      "default_popup": "popup.html"
  },
  "content_scripts": [
      {
          "matches": [
              "<all_urls>"
          ],
          "js": [
              "contentScript.js"
          ],
          "run_at": "document_idle"
      }
  ]
}

// popup.html
<!DOCTYPE html>
<html>

<head>
  <title>Change background Color</title>
</head>


<body>
  <button id="changeColor">background Color change</button>
  <button id="addText">text add</button>
  <script src="popup.js"></script>
</body>

</html>

// popup.js
document.getElementById('changeColor').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
    return;
  }
  if (tab && !tab.url.startsWith("chrome://")) {
    try {
      await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: setPageBackgroundColor,
      });
      console.log("Script executed successfully");
    } catch (error) {
      console.error("Error executing script:", error);
    }
  } else {
    console.error("Cannot execute script on this page");
  }
});

function setPageBackgroundColor() {
  document.body.style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
}

document.getElementById('addText').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
    return;
  }
  if (tab && !tab.url.startsWith("chrome://")) {
    try {
      const response = await chrome.tabs.sendMessage(tab.id, {action: "addText"});
      console.log("Message sent successfully", response);
    } catch (error) {
      console.error("Error sending message:", error);
      // Content Script가 로드되지 않았을 수 있으므로, 스크립트를 주입하고 다시 시도합니다.
      try {
        await chrome.scripting.executeScript({
          target: { tabId: tab.id },
          files: ["contentScript.js"]
        });
        const response = await chrome.tabs.sendMessage(tab.id, {action: "addText"});
        console.log("Message sent successfully after injecting content script", response);
      } catch (injectError) {
        console.error("Error injecting and executing content script:", injectError);
      }
    }
  } else {
    console.error("Cannot send message to this page");
  }
});

// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('배경색 변경기가 설치되었습니다.');
});

// contentScript.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "addText") {
    const newElement = document.createElement('div');
    newElement.textContent = '이 텍스트는 확장 프로그램에 의해 추가되었습니다!';
    newElement.style.position = 'fixed';
    newElement.style.top = '10px';
    newElement.style.right = '10px';
    newElement.style.backgroundColor = 'yellow';
    newElement.style.padding = '10px';
    newElement.style.zIndex = '9999';
    document.body.appendChild(newElement);
    sendResponse({status: "Text added successfully"});
  }
  return true;  // 비동기 응답을 위해 필요합니다.
});