“현재 생활에서 우리는 엔터테인먼트 및 검색 목적, 즉 'Google' 검색 엔진을 통해 일부 교육 주제를 조사하고 일반 지식도 얻기 위해 소셜 미디어 앱과 Google 검색 엔진을 사용하는 데 더 열심입니다. Google 검색 엔진을 사용하여 무언가를 검색하려면 휴대전화, 랩톱 또는 개인용 컴퓨터에 일부 브라우저가 이미 설치되어 있어야 합니다. 오늘날 가장 많이 사용되고 효율적인 브라우저 중 하나는 확장 유틸리티와 함께 많은 좋은 기능을 제공하는 '구글 크롬' 브라우저입니다. '확장'은 웹사이트 및 다양한 기능을 제한하거나 허용하기 위해 모든 브라우저에서 발견되는 플러그인입니다. 이러한 확장은 일반적으로 내장되어 있지 않습니다. 필요할 때마다 브라우저에 각 확장 프로그램을 별도로 추가해야 합니다. 기술에 대한 약간의 전문가라면 매니페스트 JSON 파일을 사용하여 몇 단계로 확장을 만들고 추가하는 방법을 알고 있을 것입니다. 따라서 이 기사에서는 Chrome 브라우저에서 새 확장 프로그램을 만드는 모든 단계를 다룹니다.
확장 프로그램을 만드는 방법을 살펴보기 전에 Google 크롬 브라우저가 이미 실행되었고 'Google' 검색 엔진에 배경이 포함되어 있지 않은지 확인해야 합니다. 아래 첨부된 이미지는 검색엔진 'Google.com'에 대한 배경이 없는, 즉 흰색 배경만 있는 것을 볼 수 있습니다.
확장 폴더 추가
Windows 시스템의 앱에서 Visual Studio Code 도구를 빠르게 엽니다. Visual Studio Code를 제대로 열고 사용하도록 설정하는 데 최대 1분이 걸릴 수 있습니다. 제대로 실행되고 사용할 준비가 되면 아래에 표시된 상단 작업 표시줄의 '파일' 메뉴 목록을 통해 이미 생성된 폴더 '확장'을 추가했습니다. 'Extension' 폴더를 만든 후 브라우저에서 확장 프로그램의 아이콘으로 사용할 이미지가 포함된 'image'라는 다른 폴더를 추가했습니다. 그와 함께 'manifest.json' 파일 하나와 'script.js'라는 자바스크립트 파일 하나를 추가하여 새 확장을 만들고 브라우저에 추가했습니다. manifest.json 파일을 더블 클릭하여 JSON에서 작업을 시작하고 확장 프로그램을 만들고 사용하여 'Google'의 배경을 변경해 보겠습니다.
매니페스트 파일 생성
manifest.json 파일 내에서 아래에 표시된 'JSON' 코드를 추가해야 합니다. 이 코드는 Google Chrome 브라우저에 확장 프로그램을 만들고 추가하기 위한 실제 구성 스크립트입니다. 이 JSON 코드는 변수 매니페스트 버전을 '2'로 초기화하고 생성할 확장 이름, 즉 '배경 변경'으로 시작했습니다. 그런 다음 'description' 변수 내에 확장에 대한 간단한 설명을 추가했습니다.
이와 함께 확장 버전을 '1.0'으로 추가했습니다. '확장'에 대한 모든 기본 구성이 생성된 후에는 확장의 아이콘으로 사용할 이미지 아이콘에 대한 경로를 추가해야 합니다. 'browser' 변수는 Google 크롬 브라우저의 상단 작업 표시줄에 대한 확장 아이콘을 설정하기 위해 정의되었습니다. 그런 다음 브라우저에서 매번 다른 파일을 사용할 수 있도록 크기가 다른 3개의 이미지 파일에 대한 경로를 추가했습니다.
이와 함께 구글 크롬 상단 작업표시줄의 '확장 프로그램' 아이콘을 클릭하면 어떤 이미지를 보여줄지 'page_action' 변수를 사용했다. 'Default_icon' 변수는 각 다시 로드에서 아이콘으로 사용될 이미지에 대한 세 가지 경로 값과 함께 사용되었습니다. 이를 위해 세 가지 다른 이미지 파일이 사용됩니다. 마지막 content_scripts 변수는 총 2개의 새로운 변수, 즉 일치 및 CSS를 사용합니다. 'matches' 변수에는 이 새 확장을 사용한 후 변경할 웹 사이트의 경로가 포함됩니다. 이와 함께 'CSS' 변수에는 확장을 적용한 후 Google.com의 스타일 지정에 사용할 CSS 파일의 이름이 포함됩니다. 이제 이 코드가 완성되어 사용할 준비가 되었으므로 빠르게 저장하고 'main.css' 파일로 이동합니다.
main.css CSS 파일 내에서 생성할 매니페스트 파일 확장자에 대한 스타일을 추가했습니다. 스타일은 html 'body' 태그를 사용하여 적용됩니다. 즉, 매니페스트 파일의 전체 'body' 영역에 적용됩니다. 우리는 검색 엔진에서 이미지 파일의 'URL'을 사용하여 Google.com에 대한 새로운 배경을 설정했습니다. 이제 무엇보다 먼저 코드를 저장하십시오.
필요한 코드(예: manifest.json 및 main.css 파일)를 완료한 후 새 탭에서 URL chrome://extensions'를 통해 Google 크롬 브라우저에서 Extensions 유틸리티를 열어야 합니다. 확장 유틸리티 영역이 열립니다. 개발자 모드에서 로컬 시스템에서 압축을 푼 'Extension' 폴더를 로드하여 아래 이미지에 표시된 'unpackaged 로드' 버튼을 통해 확장해야 합니다. 확장 프로그램은 표시된 대로 Chrome 브라우저에 효과적으로 추가되었습니다. 완전히 작동하려면 오류를 제거하십시오.
'확장' 아이콘에서 '배경 변경' 확장을 선택하여 작업 표시줄에 표시합니다(예: 'C' 아이콘 확장).
Google.com을 다시 로드한 후 이 확장을 사용하여 배경이 업데이트되었습니다.
결론
Windows 시스템에서 브라우저를 사용하는 것에 대한 설명을 시작으로 모든 브라우저에서 확장의 중요성에 대해서도 논의했습니다. 확장 프로그램에 대한 간략한 설명 후에 매니페스트 JSON 파일을 사용하여 Chrome 브라우저용 확장 프로그램을 만드는 방법과 이를 사용하여 'Google.com' 검색 엔진의 배경을 변경하는 방법에 대해 설명했습니다. Google 크롬에서 확장 프로그램을 로드한 후 배경을 변경하기 위해 Google.com에서 확장 프로그램을 사용했습니다.