크롬 플러그인을 빌드하는 방법

5747 단어 codenewbiejavascript
Chrome 플러그인은 재미있고 하루를 시작하는 유용하고 개인화된 방법이 될 수 있습니다.

가장 중요한 부분은 실제로 비교적 간단하다는 것입니다.

html, css, js만 있으면 됩니다.

기본 설정



기본 설정이 너무 기본적이어서 내 컴퓨터를 쳐다보며 무슨 말을 하고 있는 나 자신을 발견했습니다.

Create manifest.json 파일chrome's documentation은 자세히 알아보고 싶은 경우 실제로 훌륭하고 깊이 있지만 이 플러그인의 경우 매니페스트는 기본이 됩니다.

{
  "manifest_version": 2,
  "name": "Chrome plugin template Devto",
  "description": "Chrome plugin template Devto",
  "version": "1",
  "author": "Jenny Judova",
  "browser_action": {
    "default_title": "Fun with Flags"
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}


Hello World 인쇄



이제 작업을 수행하고 'Hello World'를 인쇄해 보겠습니다.

manifest.json chrome_url_overrides에서 우리는 새 탭 재정의 html 파일이 newtab.html이라고 명시했으므로 해당 파일을 만들 수 있습니다.

newtab.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>


이것은 훌륭하지만 작동하는지 어떻게 확인합니까? 우리는 이것을 위해 실제로 localhost에 갈 수 없습니다. 대신 다음을 수행하십시오.
1 - chrome://extensions/로 이동합니다.
2 - 개발자 모드 토글이 켜져 있는지 확인
3 - 압축 풀기 버튼 클릭
4 - 프로젝트가 있는 폴더 선택
5 - '선택'을 클릭합니다.
6 - 새 탭 열기




팔!

이제 이 확장이 국기 및 국가 표시와 같은 작업을 수행하도록 합시다. 플래그로 재미를 판단하지 마십시오 토큰이 필요하지 않기 때문에 플래그 API를 선택했습니다.

API 호출 방법



newtab.js라는 파일을 만들고 다음을 추가하여 newtab.html에 연결해 보겠습니다.

<script type="text/javascript" src="newtab.js"></script>


본문 태그를 닫기 직전입니다. 온전한 검사를 하고 newtab.js에 추가해 봅시다.

function init() {

  console.log('HI')

}

window.addEventListener('DOMContentLoaded', init)


간단한 .fetch는 API 호출을 위한 트릭을 수행해야 합니다. 이렇게:

  function getAllFlags() {
    fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
      .then(response => response.json())
      .then(response => {
        flags = response
        chrome.storage.local.set({ data: flags });
      })
      .catch(err => console.log(err))


이제 플래그에 대한 정보가 있으므로 이를 표시하는 기능과 일부 css를 추가하여 UI에 플래그를 표시할 수 있습니다. 이를 위해 project's github 을 살펴볼 가치가 있습니다.

chrome.storage.local 사용 방법



현재 확장 기능이 작동하는 방식은 새 탭을 열 때마다 새 API 호출이 발생한다는 것입니다. 우리 대부분이 매시간 12개의 탭을 여는 것을 고려하면 요청 응답을 chrome.storage.local에 저장하고 API 호출을 실행하기 전에 데이터가 있는지 확인하는 것이 더 효율적일 수 있습니다.

이를 달성하려면 다음을 사용해야 합니다.
chrome.storage.local.set 및 chrome.storage.local.get

또한 이 일반적인 함정을 피해야 합니다. manifest.json에 다음이 있는지 확인하세요.

  "permissions": [
    "storage"
  ]


로컬 스토리지에 무언가를 저장하려면 가져오기 요청에 이 행을 추가할 수 있습니다.
chrome.storage.local.set({ data: flags });
전체가 다음과 같이 표시됩니다.

fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          console.log('empty')
          flags = response
          chrome.storage.local.set({ data: flags });
        })
        .catch(err => console.log(err))


로컬 저장소를 확인하는 기능을 추가해 보겠습니다.

  function checkLocalStorage() {
    chrome.storage.local.get('data', function (result) {
      result.data == undefined ? isLocalStorageFull = false : isLocalStorageFull = true
      getAllFlags(isLocalStorageFull)
    });
  }


또한 getAllFlags 함수를 다음과 같이 업데이트해 보겠습니다.

  function getAllFlags(isLocalStorageFull) {
    if (isLocalStorageFull) {
      chrome.storage.local.get('data', function (result) {
        flags = result.data
        displayFlags(flags)
      })
    } else {
      fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          flags = response
          chrome.storage.local.set({ data: flags });
          displayFlags(flags)
        })
        .catch(err => console.log(err))
    }
  }


본질적으로 이것은 플러그인이 완료되었습니다. 완성된 앱here에서 자신의 css를 추가하거나 복사하여 붙여넣을 수 있습니다.

이것이 우리가 끝내는 것입니다.

Socket 프로그래밍으로 서버의 몇 문자를 읽고 로컬 디스플레이에 쓰기
C#에서 서버 이미지 존재 여부 판단

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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