브라우저 확장 프로그램은 사이트에 미학을 추가하고 최적의 사용자 경험을 제공하는 데 사용되는 브라우저의 추가 기능입니다.
확장 개발에서 콘텐츠 스크립트의 개념은 브라우저 확장의 사용 사례를 크게 확장하므로 개발자 모두가 습득할 수 있는 매우 유용한 지식입니다.

이 글은 콘텐츠 스크립트가 무엇인지, 어떻게 작동하는지 소개하는 것을 목표로 합니다. Chrome 확장의 기본 사항을 논의하고 확장에서 간단한 콘텐츠 스크립트를 사용하는 데모 프로젝트도 있을 것입니다. 이제 시작하겠습니다.

콘텐츠 스크립트 이해

먼저 콘텐츠 스크립트란 무엇일까요? 콘텐츠 스크립트는 브라우저 확장을 통해 웹페이지와 상호 작용할 때 실행되어 웹페이지를 수정하는 JavaScript 코드입니다.

웹페이지 문서 개체 모델과 상호 작용하여 이를 쉽게 달성합니다. 웹 페이지 문서 개체 모델은 해당 웹 페이지의 원시 구조입니다. Chrome 콘텐츠 스크립트가 문제의 웹페이지를 수정하는 방식을 일반적으로 주입이라고 합니다.

콘텐츠 스크립트에 대해 간략하게 소개한 후 웹페이지에 이를 구현해 보겠습니다. 하지만 그 전에 스크립트를 구동할 브라우저 확장을 설정해야 합니다.

Chrome 확장 프로그램 설정

Chrome 확장 파일 설정은 매우 간단합니다. 추가 참조 건물 확장을 위해 아래에 Chrome 확장 문서 페이지 링크가 첨부되어 있습니다.
이상적인 Chrome 확장 프로그램에는 Chrome 확장 프로그램에 대한 기본 배경 정보를 제공하는 매우 상세한 매니페스트.json 파일이 포함되어야 합니다.
또한, 실행할 적절한 JS 파일도 포함되어 있습니다. 기타 추가 파일(HTML 및 CSS)은 확장 프로그램에 미적 감각을 더하는 데 도움이 됩니다.
이제 콘텐츠 스크립트 삽입을 통합하여 확장 기능을 구축해 보겠습니다. 우리가 탐색하는 모든 활성 웹 페이지에 오버레이되는 버튼을 표시하는 Chrome 확장 프로그램을 만들어 콘텐츠 스크립트의 강력한 기능을 설명하겠습니다.

매니페스트 파일 작성

이 섹션에서는 매니페스트 파일의 일부를 강조 표시하고 논의합니다. 다음은 프로젝트의 매니페스트 파일에 대한 코드입니다.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

매니페스트 버전: 일반적으로 매니페스트 버전이 요청됩니다. 기본적으로 버전 2보다 훨씬 더 나은 업그레이드이므로 3으로 설정됩니다.
이름: 확장 이름은 매니페스트 파일에도 입력됩니다. 제 경우에는 프로젝트 이름이 Add 버튼입니다. 이는 사용자의 취향에 맞게 조정할 수 있습니다.
Chrome 확장 프로그램의 버전도 입력됩니다. 우리의 경우 이것은 확장의 첫 번째 버전이므로 이름은 1.0입니다. 이 확장의 후속 개선 사항은 파일을 수정하여 각각 버전을 늘릴 수 있습니다.
설명: 확장 프로그램의 기능에 대한 설명은 기술적인 지식이 없는 확장 프로그램 사용자에게 Chrome 확장 프로그램에 대한 신뢰도를 제공합니다.

다음에 제기된 사항은 콘텐츠 스크립트를 작성하는 데 매우 타당합니다.

권한 개체는 콘텐츠 스크립트 실행 경로를 강조표시합니다. 이는 또한 콘텐츠 스크립트가 예기치 않은 탭과 웹 페이지에서 실행되는 것을 방지합니다. 이를 통해 Chrome 확장 프로그램에 필요할 수 있는 모든 권한을 나열할 수 있습니다. 일부 Chrome 확장 프로그램은 브라우저 저장소, 기타 Chrome API 및 문제의 일부 사이트에 액세스해야 할 수 있습니다. 이 프로젝트의 경우 Chrome 확장 프로그램을 사용 중인 활성 브라우저 탭으로 제한합니다. Chrome 확장 프로그램이 Chrome 브라우저의 사용하지 않는 다른 부분을 손상시킬 위험을 줄이려면 이 기능을 갖추는 것이 중요합니다.

그런 다음 매니페스트 파일에서 콘텐츠 스크립트 필드를 구성합니다.
콘텐츠 스크립트 필드는 웹 페이지에 삽입하려는 다양한 코드 파일을 지정합니다.
여기에는 작동할 웹페이지 URL을 지정하는 일치 하위 필드가 포함되어 있습니다. 사용 편의성을 위해 우리가 액세스하는 모든 웹 페이지에서 작동할 수 있도록 모든 URL을 포함했습니다. 그러나 하위 필드 값에 삽입하려는 URL을 지정할 수 있습니다. 예: www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

주입 코드가 포함된 JS 파일도 지정됩니다. 우리의 경우에는
JS 파일 이름은 Content script.js입니다. 또한 이 프로젝트의 스타일을 지정하는 데 사용되는 CSS 파일도 지정했습니다.

이를 통해 우리 프로젝트의 매니페스트 파일을 축소하여 구현했습니다. 그런 다음 계속해서 다음 섹션

콘텐츠 스크립트 만들기

간단함을 유지하기 위해 클릭하면 경고 메시지가 표시되는 간단한 버튼을 만들겠습니다. 이 버튼은 기존 웹페이지에 오버레이될 것으로 예상됩니다.
아래 코드는 다음과 같습니다.

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

스타일은 원하는 대로 변경할 수 있지만 스타일 템플릿이 코드 저장소에 포함되어 있습니다.

여기에 구현 사진이 있습니다.

다음은 코드 스타일이 포함된 소스 코드에 대한 링크입니다.

고급 기술 및 사용 사례

지금까지 프로젝트를 완료했습니다. 그러나 지식을 향상시키기 위해 콘텐츠 스크립트를 작성하는 동안 구현할 수 있는 몇 가지 고급 기술과 모범 사례는 다음과 같습니다.

• 브라우저 백그라운드 스크립트와의 교차 상호작용
• 동적 스크립팅을 허용하는 데이터 상태 관리자 구현
• 다른 외부 API를 통합하면 데이터 조작 및 분석이 가능합니다.
• 확장 프로그램 성능을 최적화하기 위해 캐싱 전략 사용
• 서비스 워커와 콘텐츠 스크립트 통합

결론

또한 내 블로그에서 나와 소통하고 여기에서 내 다른 기사를 확인할 수도 있습니다. 다음 시간까지 코딩을 계속하세요!