ChatGPT로 배우는 크롬 확장 프로그램

ChatGPT에 질문

크롬 확장 프로그램 중에는 구글과 네이버 사이트에서 chatGPT 검색 결과를 보여주는 프로그램이 있습니다. 크롬 익스텐션이 어떻게 사이트에 삽입될 수 있었나요?

 

Chrome 확장 프로그램이 Google 및 Naver와 같은 웹 사이트에 어떻게 삽입될 수 있는지에 대한 몇 가지 정보를 제공할 수 있습니다.

Chrome 확장 프로그램은 콘텐츠 스크립트라는 기술을 사용하여 확장 프로그램이 웹페이지의 콘텐츠를 수정하거나 상호작용할 수 있도록 합니다. 사용자가 웹사이트를 방문하면 콘텐츠 스크립트는 해당 웹페이지의 컨텍스트에서 실행되며 DOM(문서 객체 모델)에 액세스하고 상호작용할 수 있습니다.

Chrome 확장 프로그램을 Google이나 Naver와 같은 웹사이트에 삽입하려면 확장 프로그램 개발자가 해당 웹사이트의 특정 URL이나 도메인을 대상으로 하는 콘텐츠 스크립트를 생성해야 합니다. 콘텐츠 스크립트는 HTML, CSS 및 JavaScript 코드를 웹 페이지에 삽입하여 모양을 수정하거나 새 기능을 추가할 수 있습니다.

그러나 사용자의 동의나 인지 없이 웹사이트에 Chrome 확장 프로그램을 삽입하는 것은 일반적으로 윤리적이거나 허용 가능한 행동으로 간주되지 않는다는 점에 유의해야 합니다. 사용자는 확장 프로그램을 직접 설치하고 활성화할 수 있는 옵션을 제공받아야 하며 명시적인 동의 없이 웹사이트를 수정해서는 안 됩니다.

 

콘텐츠 스크립트로 html, css, javascript 코드를 웹 페이지에 삽입하면, 웹브라우저에서 inspect로 소스를 봤을때 html 코드가 변경되어있나요?

 

예, Chrome 확장 프로그램이 콘텐츠 스크립트로 웹 페이지에 HTML, CSS 또는 JavaScript 코드를 삽입하는 경우 브라우저의 개발자 도구 또는 검사 요소 기능을 사용하여 페이지 소스를 볼 때 이러한 변경 사항을 볼 수 있습니다.

콘텐츠 스크립트가 실행되면 페이지의 DOM(Document Object Model)을 동적으로 수정하여 필요에 따라 요소를 추가, 제거 또는 수정할 수 있습니다. 이러한 변경 사항은 브라우저의 개발자 도구에 표시되는 페이지 소스에 반영됩니다.

그러나 콘텐츠 스크립트에 의해 변경된 사항은 영구적이지 않으며 서버에 있는 페이지의 실제 HTML 코드에 영향을 주지 않는다는 점에 유의해야 합니다. 사용자 브라우저에 페이지가 표시되는 방식에만 영향을 미칩니다.

 

콘텐츠 스크립트는 어떤 언어로 작성되나요?

 

Chrome 확장 프로그램의 콘텐츠 스크립트는 일반적으로 웹 개발에 사용되는 것과 동일한 언어인 JavaScript로 작성됩니다.

JavaScript를 사용하면 콘텐츠 스크립트가 페이지의 DOM(Document Object Model)을 조작하고, 요소를 추가 또는 제거하고, 페이지 또는 브라우저 자체의 다른 부분과 상호 작용할 수 있습니다.

JavaScript 외에도 콘텐츠 스크립트는 HTML 및 CSS를 사용하여 페이지의 모양을 수정하거나 새 요소를 추가할 수도 있습니다.

전반적으로 JavaScript, HTML 및 CSS의 조합을 통해 콘텐츠 스크립트는 웹 페이지의 콘텐츠와 동작을 동적으로 수정하여 원래 페이지 소스에 없는 새로운 기능을 추가할 수 있습니다.

 

콘텐츠 스크립트를 사용하는 예를 보여주세요. 테스트까지 할 수 있게 방법도 자세히 알려주세요.

 

물론! 다음은 페이지에 있는 모든 단락의 배경색을 파란색으로 변경하는 콘텐츠 스크립트의 예입니다.

먼저 새 폴더를 만들고 다음 파일을 추가합니다.

manifest.json:

{
  "name": "Paragraph Background Changer",
  "version": "1.0",
  "description": "Changes the background color of all paragraphs to blue",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

 

content.js:

let paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.backgroundColor = 'blue';
}

 

이 manifest.json 파일은 확장 프로그램이 모든 URL에서 콘텐츠 스크립트(content.js)를 실행할 것임을 Chrome에 알립니다. content.js 파일은 페이지의 모든 단락 요소를 가져오고 배경색을 파란색으로 변경합니다.

이 확장 프로그램을 테스트하려면 다음 단계를 따르세요.

 

1. 구글 크롬을 엽니다.

2. 브라우저 창의 오른쪽 상단 모서리에 있는 세 개의 점을 클릭하고 "도구 더보기" -> "확장 프로그램"을 선택합니다.

3. 오른쪽 상단 모서리에 있는 "개발자 모드" 토글을 클릭합니다.

4. "압축해제된 확장 프로그램을 로드합니다." 버튼을 클릭하고 manifest.json 및 content.js 파일이 포함된 폴더를 선택합니다.

5. 이제 확장이 설치되고 활성화되어야 합니다. 단락이 있는 웹 페이지를 열면 배경색이 파란색으로 변경되는 것을 볼 수 있습니다.

특정 URL 또는 도메인에서 확장 프로그램을 테스트하려는 경우 해당 특정 URL에만 콘텐츠 스크립트를 적용하도록 manifest.json에서 "matches" 속성을 수정할 수 있습니다. 예를 들어 "matches": ["https://www.example.com/*"]로 변경하여 example.com 도메인 내의 페이지에만 콘텐츠 스크립트를 적용할 수 있습니다.

 

'Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.' 에러가 났습니다.

 

"매니페스트 버전 2는 더 이상 사용되지 않으며 2023년에 지원이 제거될 예정입니다."라는 오류 메시지는 생성한 manifest.json 파일이 더 이상 사용되지 않는 버전의 매니페스트 형식을 사용하고 있음을 알려줍니다.

Google 크롬은 매니페스트 버전 2를 단계적으로 중단하고 매니페스트 버전 3으로 이동하고 있으며 확장 시스템이 일부 변경되고 개선되었습니다.

이 오류를 수정하려면 Manifest 버전 3을 사용하도록 manifest.json 파일을 업데이트해야 합니다. 다음은 버전 3을 사용하는 업데이트된 manifest.json 파일입니다.

{
  "manifest_version": 3,
  "name": "Paragraph Background Changer",
  "version": "1.0",
  "description": "Changes the background color of all paragraphs to blue",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

 

필요한 유일한 변경 사항은 "manifest_version" 속성을 3으로 업데이트하는 것입니다. 이렇게 변경하고 확장 프로그램을 다시 로드하면 오류 메시지가 더 이상 나타나지 않아야 합니다.

 

특정 url에서만 동작하도록 할 수 있나요?

 

예, manifest.json 파일에서 "matches" 속성을 수정하여 콘텐츠 스크립트를 실행해야 하는 특정 URL 또는 도메인을 지정할 수 있습니다.

예를 들어 URL이 "https://www.example.com/"로 시작하는 페이지에서만 실행되도록 콘텐츠 스크립트를 수정하려면 manifest.json 파일의 "matches" 속성을 다음과 같이 변경할 수 있습니다.

"matches": ["https://www.example.com/*"]

 

이렇게 하면 "https://www.example.com/"으로 시작하는 URL이 있는 페이지에서만 콘텐츠 스크립트를 실행하도록 Chrome에 지시합니다. 별표(*)는 도메인 이름 뒤의 모든 문자와 일치하는 와일드카드입니다.

다음과 같이 쉼표로 구분하여 여러 URL 또는 도메인을 지정할 수도 있습니다.

"matches": ["https://www.example.com/*", "https://subdomain.example.com/*"]

 

이렇게 하면 "https://www.example.com/" 또는 "https://subdomain.example.com/"으로 시작하는 URL이 있는 모든 페이지에서 콘텐츠 스크립트를 실행하도록 Chrome에 지시합니다.

원하는 URL 또는 도메인으로 manifest.json 파일을 업데이트했으면 확장 프로그램을 다시 로드하고 특정 페이지에서 테스트하여 의도한 대로 작동하는지 확인합니다.

 

 

구글 크롬 브라우저에서 테스트

1. test 폴더를 생성하고, manifest.json, content.js 파일을 생성합니다.

manifest.json

{
    "manifest_version": 3,
    "name": "Paragraph Background Changer",
    "version": "1.0",
    "description": "Changes the background color of all paragraphs to blue",
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }

 

content.js

let paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.backgroundColor = 'blue';
}

 

2. 브라우저 창의 오른쪽 상단 모서리에 있는 세 개의 점을 클릭하고 "도구 더보기" -> "확장 프로그램"을 선택합니다.

 

3. 오른쪽 상단 모서리에 있는 "개발자 모드" 토글을 클릭합니다.

4. "압축해제된 확장 프로그램을 로드합니다." 버튼을 클릭하고, manifest.json 및 content.js 파일이 포함된 폴더를 선택합니다.

 

5. 확장 프로그램이 설치된 것을 볼 수 있습니다.

 

6. 웹 브라우저에서 마우스 오른쪽 키 -> 검사(inspect) 클릭 -> p 태그에 "background-color: blue;"가 추가된 것을 확인할 수 있습니다.