댓글 검색 목록

[html] chrome extention - 1.확장이란 무엇입니까?

페이지 정보

작성자 운영자 작성일 20-11-01 16:10 조회 819 댓글 0

확장 프로그램은 검색 환경을 사용자 지정하는 작은 소프트웨어 프로그램입니다. 이를 통해 사용자는 Chrome 기능과 동작을 개인의 필요 또는 선호도에 맞게 조정할 수 있습니다. HTML, JavaScript 및 CSS와 같은 웹 기술을 기반으로 합니다.

확장은 좁게 정의되고 이해하기 쉬운 단일 목적을 충족해야 합니다. 모든 것이 공통 목적에 기여하는 한 단일 확장에는 여러 구성 요소와 다양한 기능이 포함될 수 있습니다.

https://developer.chrome.com/extensions

사용자 인터페이스는 최소한이고 의도가 있어야 합니다. 오른쪽에 표시된 Google Mail Checker 확장 프로그램 A screenshot of an extension's icon in the browser bar 과 같은 간단한 아이콘에서 전체 페이지를 재정의 하는 것까지 다양합니다.

확장 파일은 사용자가 다운로드하고 설치하는 단일 .crx 패키지로 압축됩니다. 즉, 확장 프로그램은 일반 웹 앱과 달리 웹의 콘텐츠에 의존하지 않습니다.

확장 프로그램은 Chrome 개발자 대시 보드를 통해 배포되고 Chrome 웹 스토어에 게시됩니다. 자세한 정보는 상점 개발자 문서를 참조하십시오.

Hello 확장

이 빠른 Hello Extensions 예제를 사용하여 확장에 대한 작은 단계를 수행하십시오. 확장 파일을 저장할 새 디렉토리를 생성하거나 샘플 페이지에서 다운로드하십시오.

다음으로 manifest.json이라는 파일을 추가하고 다음 코드를 포함합니다.

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2
  }

모든 확장에는 매니페스트가 필요하지만 대부분의 확장은 매니페스트만으로 많은 작업을 수행하지 않습니다. 이 빠른 시작을 위해 확장 프로그램에는 browser_action 필드 아래에 선언 된 팝업 파일과 아이콘이 있습니다.

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

여기에서 hello_extensions.png를 다운로드 한 다음 hello.html이라는 파일을 만듭니다.

  <html>
    <body>
      <h1>Hello Extensions</h1>
    </body>
  </html>

이제 확장 프로그램은 아이콘을 클릭 할 때 hello.html을 표시합니다. 다음 단계는 바로 가기 키를 활성화하는 명령을 manifest.json에 포함하는 것입니다. 이 단계는 재미 있지만 필수는 아닙니다.

  {
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    },
    "commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }
  
  }

마지막 단계는 로컬 컴퓨터에 확장을 설치하는 것입니다.

브라우저에서 chrome://extensions로 이동합니다. 검색 주소창의 오른쪽 상단에 있는 Chrome 메뉴를 클릭하고 추가 도구 위로 마우스를 가져간 다음 확장 프로그램을 선택하여 이 페이지에 액세스 할 수도 있습니다.
개발자 모드(Developer Mode) 옆의 체크 박스를 선택합니다.
압축 해제 된 확장로드(Load Unpacked Extension)를 클릭하고 "Hello Extensions"확장에 대한 디렉토리를 선택하십시오.

축하합니다! 이제 hello_world.png 아이콘을 클릭하거나 키보드에서 Ctrl + Shift + F를 눌러 팝업 기반 확장을 사용할 수 있습니다.