첫 번째 Chrome 확장 구축: IMDb 찾기

28204 단어 extensionsbeginnerstutorialjavascript
원문.

링크 소개


브라우저 확장은 브라우저 환경을 수정하고 향상시킬 수 있는 프로그램입니다.소형 UI에서 자동화에 이르기까지 다양한 용례를 사용하고 구축할 수 있습니다.본고에서 우리는 크롬 확장을 구축하는 지침을 점차적으로 이해할 것이다.
우리는 무엇을 짓고 있습니까?우리의 확장에는 두 가지 작업이 있을 것이다. 첫 번째 작업은 상하문 메뉴(우클릭 메뉴)에서 영화에 대한 상세한 정보를 얻는 것이다. 다음과 같다.
IMDb
두 번째는 웹 페이지와의 상호작용을 보여 주는 것이기 때문에 확장 단추를 누르면 홈페이지에서 IMDb 등급을 받습니다. 아래와 같습니다.
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"
  },
}
name과description는 자술적이며, 확장을 발표할 때, 크롬 네트워크 상점에서 동일합니다.
백엔드 스크립트는 모든 페이지의 백엔드에서 실행되는javascript 파일입니다.현재 웹 페이지에 액세스할 수 없으므로 읽기 또는 작업을 위해 DOM에 액세스할 수 없지만 모든 페이지 에 액세스할 수 있습니다.크롬 chrome APIs 에 새 항목을 만들어야 하기 때문에, 배경 스크립트를 사용할 것입니다.browser_action는 주소 표시줄 오른쪽에 있는 Google Chrome 주 도구 모음에 아이콘을 배치하는 데 사용됩니다.작업 디렉토리에 일부 파일icon.png을 추가해야 합니다.

manifest_version 1 is deprecated by chrome and hence should start with 2.


명세서가 준비된 상태에서 background.js 파일을 만들어서 작업이 정상적인지 테스트합시다.
//background.js
alert("Did it work?")

연관 메뉴 확장 실행


지금까지 구축된 확장을 실행하려면 chrome://extensions/ 모드로 이동하여 Developer mode 모드를 엽니다.Load unpacked를 클릭하고 확장자를 포함하는 디렉토리를 찾습니다.

성공했어!
코드를 변경할 때마다 확장 카드에 있는 다시 불러오기 단추를 누르면 크롬은 모든 변경 사항을 포함합니다.

배경 확장 구축


여기서 사용하는 예는 텍스트를 강조 표시하고 마우스 오른쪽 버튼으로 클릭하면 선택한 텍스트에 대한 IMDb 세부 정보 가져오기 또는 다른 내용이 표시되는 새 메뉴가 나타납니다. 이 메뉴를 클릭하면 평가 및 연도와 같은 IMDb 세부 정보가 팝업 창에 표시됩니다.
이를 위해 Chrome의 API 를 사용합니다.우선, 우리는 그것을 우리의 목록에 추가함으로써 허가를 받아야 한다.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}`)
    }
});
확장을 다시 불러오고 테스트합니다!
context menu
따라서 강조 표시된 텍스트를 이벤트 프로세서로 보내고 API 호출을 자유롭게 할 수 있습니다.IMDb에 대한 자세한 내용은 를 참조하십시오.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)
    }
});

I am putting my own OMDb's api key here so that you can follow the tutorial with least friction. However if this breaks the internet 🤞and this api key usage reaches the limit, you can claim your free api key from here.


우리는 간단한 GET 호출을 위해fetch를 사용하고 결과를 표시하고 있습니다.이거 한번 해볼게요.
OMDb API
그렇습니다.우리는 이미 교정의 첫 부분을 성공적으로 완성했다.

웹 페이지와 상호 작용


다음 용례를 살펴보겠습니다. 즉, 홈페이지에서 영화 제목 옆에 IMDb 등급을 표시합니다.이 작업은 background.js 파일에서 수행할 수 없습니다. 활성 웹 페이지에 접근할 수 없기 때문에 DOM에 접근할 수 없습니다.이를 위해 우리는 반드시 작성해야 한다Rotten Tomatoes.내용 스크립트는 웹 페이지 상하문에서 실행되는 파일입니다.DOM에 액세스하여 읽거나 조작할 수 있습니다.다음 내용을 사용자에게 추가합니다manifest.json
"content_scripts": [{
    "matches": [
      "https://www.rottentomatoes.com/*"
    ],
    "js": ["content.js"]
  }],
이 설정은 현재 웹 페이지의 URL이 일치하기만 하면 content.js 파일을 웹 페이지에 불러옵니다.따라서 우리는 https://www.rottentomatoes.com/* 파일의 웹 DOM에 접근할 수 있다.content.js 파일을 만들고 다음 행을 추가합니다.
//content.js
alert("Did it work?")
이게 효과가 있는지 확인해 봅시다.
content scripts
그것은 확실히 효과가 있었다.우리가 부패한 토마토 사이트가 아니라 다른 사이트에 있을 때만 경보가 나온다.

컨텐츠 스크립트 구축


DOM 작업이 필요하므로 우리도 사용할 수 있습니다 .필요는 없지만 크롬 확장에서 라이브러리를 어떻게 사용하는지 아는 것은 좋은 생각입니다.이를 위해 jQuery CDN에서 jQuery 버전을 다운로드하여 확장 디렉터리에 넣으십시오.그것을 불러오려면 목록에 추가하십시오.제이슨 이전content.js.당신의 기말고사content.js는 다음과 같습니다.
{
  "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"]
  }]
}
현재, 우리는 manifest.json 에서 다음과 같은 조작을 실행할 수 있다
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 호출로 등급을 얻습니다.테스트해 봅시다.
jQuery
봐라!우리는 지금 썩은 토마토에 대한 IMDb의 등급을 볼 수 있다.
하지만 잠깐만, 우리가 원하는 게 아니야.DOM은 기본적으로 도구막대에서 확장 아이콘을 클릭할 때만 동작해야 합니다.
우리 지금 문제가 있어요.확장된 아이콘을 누르는 것은 크롬 이벤트이기 때문에 저희 content.js 는 접근할 수 없기 때문에 content.js 기능을 터치할 수 없습니다.우리의 fetchRatings 파일은 크롬 이벤트에 접근할 수 있지만, DOM에 접근할 수 없기 때문에 조작할 수 없습니다.
만약 우리가 background.js촉발content.js에서 어떤 방법을 찾을 수 있다면, 우리는 필요한 행위를 실현할 수 있을 것이다.

메시지 전달


는 백그라운드 스크립트와 내용 스크립트 간의 통신 방식이다.백엔드 스크립트에서 이벤트를 터치하고 내용 스크립트에 이벤트 탐지기를 적용할 수 있습니다. 반대로도 마찬가지입니다.
도구막대에서 확장 아이콘을 클릭할 때마다 이벤트를 먼저 터치합니다.우리는 크롬의 Message Passing 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"
        });
    });
});
우리는 background.js 를 듣고 browserAction.onClicked 실행 중인 활동 옵션 카드에 유효한 하중을 발사합니다.이벤트 탐지기로 교체하자content.js:
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.message === "start_fetching_ratings") {
            alert("Message Received!")
        }
    }
);
확장을 다시 불러오고 테스트합니다.
Browser Action
소식을 받다!그래서 우리는 트리거를 배경에서 전망으로 전달하는 방법을 찾았다.마지막 흐름은 크롬 이벤트 > 배경이 됩니다.js>내용.js.마지막으로, 우리는 우리의 논리를 이벤트 처리 프로그램에 통합시켜서 우리의 최종 내용을 만들 수 있다.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})`
    })
}
우리의 최종 제품을 시험해 봅시다.

그렇습니다.우리는 이미 우리가 원하는 확장을 세웠다.

결론


브라우저 확장 기능이 매우 강력하여 우리가 인터넷을 조회하는 방식을 바꿀 수 있다.오늘날, 진정으로 성공한 몇몇 회사들은 처음에는 단지 하나의 확장에 불과했다.본고에서 우리는 백그라운드 확장을 구축하는 방법, 조작 UI의 확장을 구축하는 방법, 그리고 양자 간의 통신을 통해 혼합 확장을 구축하는 방법을 배웠다.전체 코드 를 찾을 수 있습니다.
이거 좋아요?
트위터에서 더 많은 정보를 찾을 수 있습니다.
또는 내 방문here
또는 가입website
읽어주셔서 감사합니다!
Linux는 scp 원격 전송 명령을 사용하여 서버 파일 상호 전송(아리운 서버)
RPC 분산 서비스 프레임워크 - Dubbo 로드 밸런싱

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage