콘텐츠 스크립트 작성을 위한 초보자 가이드-JS 튜토리얼-php.cn

콘텐츠 스크립트 작성을 위한 초보자 가이드

王林

풀어 주다： 2024-07-27 15:27:42

원래의

835명이 탐색했습니다.

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

이 글은 콘텐츠 스크립트가 무엇이고 어떻게 작동하는지 소개하는 것을 목표로 합니다. 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": ["<all_urls>"],
        "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");
});

로그인 후 복사

The styling can be changed to suit your preference however a styling template has been included in the code repository.

here is a picture of its implementation.

chrome extension
Here is the link to the source code containing the code styling.

Advanced Techniques and Use Cases

So far we have completed the project. However to advance one's knowledge, here are some of the advanced techniques and best practices you can also implement while building content scripts.