정보실

웹학교

정보실

javascript 첫 번째 Chrome 확장 프로그램 빌드 : IMDb 조회

본문

소개 


브라우저 확장 프로그램은 탐색 환경을 수정하고 향상 시킬 수 있는 프로그램입니다. 

작은 UI 향상에서 자동화에 이르기까지 다양한 사용 사례에 확장을 사용하고 빌드 할 수 있습니다. 

이 기사에서는 크롬 확장 프로그램을 빌드 하는 단계별 가이드를 살펴 보겠습니다.


https://www.arbazsiddiqui.me/building-your-first-chrome-extension-imdb-lookup/ 


우리는 무엇을 만들고 있습니까? 확장 프로그램에는 두 가지 작업이 있습니다. 

먼저 컨텍스트 메뉴 (오른쪽 클릭 메뉴)에서 모든 영화의 IMDb 세부 정보를 다음과 같이 가져옵니다.


The Dude Abides 


두 번째는 웹 페이지와의 상호 작용을 보여주기 때문에 확장 버튼을 클릭하면 Rotten Tomatoes 홈 페이지에서 IMDb 등급을 가져 오는 것입니다.


IMDb ratings on Rotten Tomatoes 


확장 프로그램 아이콘을 클릭 한 후 모든 영화 제목에 ({imdbRating})이 추가되는 방법에 주목하십시오.


이중 목적의 이유는 백그라운드 확장 (백그라운드 스크립트)을 작성하는 방법, 활성 웹 페이지 (콘텐츠 스크립트)와 상호 작용하는 확장 및 두 메시지 사이의 통신 방법 (메시지 전달)을 설명하기 위한 것입니다.


전체 코드는 여기에서 찾을 수 있습니다.


설정 


모든 크롬 확장 프로그램에는 manifest.json 파일이 필요합니다. 이 확장을 처리하는 방법을 크롬에 알려주는 구성 파일로 생각하십시오. 다음과 같이 기본 매니페스트 파일을 만듭니다.


{ "name": "IMDb Lookup", "description": "Display IMDb rating from context menu and on rotten tomatoes", "version": "0.1", "manifest_version": 2 "background": { "scripts": ["background.js"] }, "browser_action": { "default_icon": "icon.png" }, } 


이름과 설명은 설명이 포함되어 있으며 확장 프로그램을 게시 할 때 크롬 웹 스토어에서 동일합니다.


백그라운드 스크립트는 모든 페이지에서 백그라운드에서 실행될 자바 스크립트 파일입니다. 

현재 웹 페이지에 액세스 할 수 없으므로 읽기 또는 조작을 위해 DOM에 액세스 할 수 없지만 모든 크롬 API에 액세스 할 수 있습니다. Chrome의 상황에 맞는 메뉴에서 새 항목을 만들어야 하므로 백그라운드 스크립트를 사용하게 됩니다.


browser_action은 기본 Chrome 툴바의 주소 표시 줄 오른쪽에 아이콘을 배치하는 데 사용됩니다. icon.png 파일을 작업 디렉토리에 추가해야 합니다.


manifest_version 1은 크롬에서 더 이상 사용되지 않으므로 2로 시작해야 합니다. 


매니페스트가 준비되면 background.js 파일을 만들어 작동하는지 테스트하십시오.


//background.js alert("Did it work?") 



확장 실행 


지금까지 구축 한 확장 프로그램을 실행하려면 chrome://extensions/로 이동하여 개발자 모드 모드를 켜십시오. 압축 풀기로드를 클릭하고 확장명이 포함 된 디렉토리를 찾으십시오.


Running the extension 


코드를 변경할 때마다 확장 카드에서 새로 고침 버튼을 클릭하면 크롬에 모든 변경 사항이 통합됩니다.


백그라운드 확장 빌드 


우리의 사례는 텍스트를 강조 표시하고 마우스 오른쪽 버튼을 클릭하면 선택된 컨텍스트 또는 선택된 텍스트에 대한 IMDb 세부 정보 가져 오기라는 새로운 메뉴가 표시되고 이 메뉴를 클릭하면 등급 및 연도와 같은 IMDb 세부 정보가 표시됩니다 팝업에.


이를 위해 Chrome의 컨텍스트 메뉴 API를 사용합니다. 먼저 manifest.json에 다음을 추가하여 권한을 추가해야 합니다.


"permissions": ["contextMenus"], 


그런 다음 background.js 파일에 다음을 추가 할 수 있습니다.


//create a context menu chrome.contextMenus.create({ //string to display on menu 'title': 'Search IMDB for "%s"', //contexts here is selection as we want to extract the highlighted text. 'contexts': ['selection'], //the event handler 'onclick': (context) => { const name = context.selectionText; alert(`Highlighted texts is : ${name}`) } }); 


확장 프로그램을 다시 로드하고 테스트하십시오!


Get the highlighted text 


이제 이벤트 핸들러에 강조 표시된 텍스트를 가져올 수 있으며 API를 자유롭게 호출 할 수 있습니다. IMDb 세부 정보를 가져 오기 위해 OMDb API를 사용할 것입니다. background.js를 다음과 같이 변경하십시오.


//create a context menu chrome.contextMenus.create({ //string to display on menu 'title': 'Search IMDB for "%s"', //contexts here is selection as we want to extract the highlighted text. 'contexts': ['selection'], //the event handler 'onclick': async (context) => { const name = context.selectionText; const response = await fetch(`https://www.omdbapi.com/?t=${name}&apikey=e48e70b4`) const { Title, Year, Runtime, Genre, Actors, imdbRating } = await response.json() const newLine = "\r\n" let message = `Title : ${Title}` message += newLine message += `Year : ${Year}` message += newLine message += `Runtime : ${Runtime}` message += newLine message += `Genre : ${Genre}` message += newLine message += `Actors : ${Actors}` message += newLine message += `IMDb Rating : ${imdbRating}` alert(message) } }); 


마찰을 최소화하면서 튜토리얼을 따를 수 있도록 내 OMDb의 API 키를 여기에 넣었습니다. 그러나 인터넷 연결이 끊어 지고 이 API 키 사용이 한도에 도달하면 여기에서 무료 API 키를 요청할 수 있습니다. 


fetch를 사용하여 간단한 GET 호출을 한 다음 결과를 표시합니다. 시도해 봅시다.


The Dude Abides 


그게 다야. 튜토리얼의 첫 부분을 성공적으로 완료했습니다.


웹 페이지와 상호 작용 


다음 사용 사례, 즉 Rotten Tomatoes 홈페이지의 영화 제목 옆에 IMDb 등급 표시를 살펴 보겠습니다. 

background.js 파일에서는 활성화 된 웹 페이지에 액세스 할 수 없으므로 DOM에서 이 작업을 수행 할 수 없습니다. 

이를 위해 컨텐츠 스크립트를 작성해야 합니다. 컨텐츠 스크립트는 웹 페이지 컨텍스트에서 실행되는 파일입니다. 

DOM에 액세스 할 수 있으며 DOM을 읽고 조작 할 수 있습니다. manifest.json에 다음을 추가하십시오.


"content_scripts": [{ "matches": [ "https://www.rottentomatoes.com/*" ], "js": ["content.js"] }], 


이 구성은 현재 웹 페이지의 URL이 https://www.rottentomatoes.com/*와 일치 할 때마다 chrome에게 content.js 파일을 웹 페이지에 로드하도록 지시합니다. 그 결과 content.js 파일에서 웹 페이지의 DOM에 액세스 할 수 있습니다.


content.js 파일을 작성하고 다음 행을 추가하십시오.


//content.js alert("Did it work?") 



이것이 작동하는지 확인할 수 있습니다.


Alert on reload 


작동했습니다. 경고는 우리가 다른 웹 사이트가 아닌 썩은 토마토 웹 사이트에 있을 때만 나타납니다.


컨텐츠 스크립트 작성 


DOM을 조작해야 하므로 jQuery를 사용할 수도 있습니다. 전혀 필요하지는 않지만 크롬 확장 프로그램 내에서 라이브러리를 사용하는 방법을 아는 것이 좋습니다. 

이렇게 하려면 jQuery CDN에서 jQuery 버전을 다운로드하여 확장 프로그램 디렉토리에 넣으십시오. 

그것을 로드하려면 content.js 전에 manifest.json에 추가하십시오. 최종 manifest.json은 다음과 같아야 합니다.


{ "name": "IMDb Lookup", "description": "Display IMDb rating from context menu and on rotten tomatoes", "version": "0.1", "manifest_version": 2, "background": { "scripts": ["background.js"] }, "browser_action": { "default_icon": "icon.png" }, "permissions": ["contextMenus"], "content_scripts": [{ "matches": [ "https://www.rottentomatoes.com/*" ], "js": ["jquery-2.2.4.min.js", "content.js"] }] } 

이제 content.js에서 다음을 수행 할 수 있습니다.


const fetchRatings = () => { $(".media-lists__td-title").map(async function () { const name = this.innerText; const response = await fetch(`https://www.omdbapi.com/?t=${name}&apikey=e48e70b4`) const {imdbRating} = await response.json() this.innerText = `${name} (${imdbRating})` }) } fetchRatings(); 



등급을 가져 오기 위해 jQuery 마술과 동일한 OMDb API 호출이 있습니다. 이것을 시험해 봅시다.


IMDb ratings on reload 


짜잔! 이제 Rotten Tomatoes에서 IMDb 등급을 볼 수 있습니다.


그러나 이것은 우리가 원하는 것이 아닙니다. DOM은 툴바에서 확장 기능 아이콘을 클릭 할 때만 조작되었으며 기본적으로는 아닙니다.


문제가 생겼습니다. 확장 프로그램 아이콘을 클릭하면 Chrome 이벤트이므로 content.js에 액세스 할 수 없으므로 fetchRatings 함수를 트리거 할 수 없습니다. background.js 파일은 크롬 이벤트에 액세스 할 수 있지만 DOM에 액세스 할 수 없으므로 조작 할 수 없습니다.


background.js에서 content.js를 트리거 할 수 있는 방법을 찾으면 원하는 동작을 달성 할 수 있습니다.


메시지 전달 


Message Passing은 백그라운드 스크립트와 콘텐츠 스크립트 간의 통신 방법입니다. 백그라운드 스크립트에서 이벤트를 발생시키고 컨텐츠 스크립트에 이벤트 리스너를 적용하거나 그 반대로 할 수 있습니다.


툴바에서 확장 프로그램 아이콘을 클릭 할 때마다 먼저 이벤트를 시작합니다. Chrome의 브라우저 액션 API를 사용하여 클릭을 듣고 이벤트를 시작합니다. background.js에 다음을 추가하십시오.


// Called when the user clicks on extension icon chrome.browserAction.onClicked.addListener(function (tab) { chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { const activeTab = tabs[0]; // Send a message to the active tab chrome.tabs.sendMessage(activeTab.id, { "message": "start_fetching_ratings" }); }); }); 


browserAction.onClicked를 듣고 content.js가 실행 중인 활성 탭에 페이 로드를 발생시킵니다. content.js를 이벤트 리스너로 대체 할 수 있습니다.


chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) { if (request.message === "start_fetching_ratings") { alert("Message Received!") } } ); 


확장을 다시 로드하고 테스트하십시오.


Message received 


메시지 받음 ! 따라서 백그라운드에서 포 그라운드로 트리거를 전달하는 방법을 찾았습니다. 

마지막 흐름은 chrome event> background.js> content.js가 됩니다. 마지막으로 로직을 이벤트 핸들러에 통합하여 최종 content.js가 됩니다.


chrome.runtime.onMessage.addListener( function (request, sender, sendResponse) { if (request.message === "start_fetching_ratings") { fetchRatings() } } ); const fetchRatings = () => { $(".media-lists__td-title").map(async function () { const name = this.innerText; const response = await fetch(`https://www.omdbapi.com/?t=${name}&apikey=e48e70b4`) const {imdbRating} = await response.json() this.innerText = `${name} (${imdbRating})` }) } 

최종 제품을 테스트 할 수 있습니다.


IMDb ratings on Rotten Tomatoes 


원하는 확장을 만들었습니다.


결론 


브라우저 확장 프로그램은 매우 강력하며 인터넷 검색 방식을 바꿀 수 있습니다. 

오늘날 실제로 성공한 일부 회사는 확장으로 시작했습니다. 이 기사에서는 백그라운드 확장을 작성하는 방법, UI를 조작하는 확장을 작성하는 방법 및 이 둘 사이의 통신을 통해 하이브리드 확장을 작성하는 방법을 학습했습니다. 

전체 코드는 여기에서 찾을 수 있습니다.



페이지 정보

조회 16회 ]  작성일20-05-22 14:29

웹학교