이미지 1 4
브라우저 작업 필드에는 다양한 추가 옵션이 있습니다.
확장 프로그램의 버튼 이미지에는 icon.png를 사용하고 기본 레이아웃, 디자인 및 동작 코드에는 displaypane.html을 사용하도록 Chrome에 지시합니다. 이 텍스트를 모두 매니페스트.json 파일에 복사하고 시작 및 끝 대괄호를 생략하지 않도록 주의하세요.
확장의 본체는 HTML 및 JavaScript 파일에 포함되어 있습니다. 여기서는 가장 기본적인 HTML 페이지 구조를 채우려면 단일 HTML 파일(displaypane.html)만 필요합니다. 머리글 및 제목 태그, HTML의 모양을 규정하는 CSS 코드가 포함된 스타일 태그, HTML 한 줄 암호.
여기서 하는 일은 Wikipedia의 모바일 웹사이트 콘텐츠를 iframe 태그에 직접 로드하는 것뿐이지만 이렇게 단순하게 유지할 필요는 없습니다. 예를 들어 JavaScript를 사용하여 원격으로 호스팅되는 XML 페이지에서 가져온 동적 콘텐츠를 만드는 등 훨씬 더 많은 작업을 수행할 수 있습니다.
Chrome 브라우저 작업 확장의 최대 높이는 600픽셀입니다. 그러나 두 개의 스크롤 막대(브라우저 작업용 하나와 iframe용 하나)가 표시되는 것을 방지하기 위해 높이를 580으로 약간 더 짧게 설정했습니다.
이제 코드를 이해했으므로 확장 프로그램을 설치하고 실행할 준비가 되었습니다. 위의 코드를 폴더의 displaypane.html 문서에 복사하고 저장하면 됩니다.
Chrome 확장 프로그램 작성: 확장 프로그램 로드
일반적으로 Chrome 확장 프로그램은 단일 CRX 파일로 패키지화되어 있지만 아직 작업 중입니다. 코드를 사용하여 – 실험해 보시기 바랍니다 – 우리는 모든 것을 분리하여 유지하고 싶습니다. 편집 가능.
'압축해제된' 확장 프로그램을 설치하려면 Chrome을 개발자 모드로 전환해야 합니다. 검색주소창 주소 표시줄에 chrome://extensions를 입력하여 확장 프로그램 설정 페이지로 이동한 다음 다음에 나타나는 웹 페이지의 오른쪽 상단을 보고 개발자 모드를 선택하세요. 체크박스.
확장 기능을 로드하려면 "압축이 풀린 확장 프로그램 로드..." 버튼을 클릭하고 확장 파일이 있는 폴더로 이동한 후 확인을 클릭하세요. 이전에 디자인한 아이콘으로 장식된 확장 프로그램은 이제 검색주소창 주소 표시줄 옆 도구 모음에 표시됩니다.
아이콘을 클릭하면 현재 읽고 있는 페이지를 떠나지 않고도 Wikipedia의 모바일 웹사이트를 검색하고 찾아볼 수 있습니다.
Chrome 확장 프로그램 작성: 추가 읽기
이 시점에서는 코드를 가지고 놀면서 모든 것이 어떻게 작동하는지 확인하는 것이 좋습니다.
하지만 좀 더 체계적인 방식으로 배우고 싶다면 온라인에 빠져들 수 있는 자료가 많이 있습니다.
Chrome 확장 프로그램에 대해 배우기 가장 좋은 곳은 Google의 자체 개발자 웹사이트입니다. 전체 문서와 함께 튜토리얼과 코드 샘플을 많이 찾을 수 있습니다. 머리 좀 더 심층적인 입문서를 보려면 여기를 클릭하세요., 그리고 Chrome JavaScript API의 전체 기술 세부정보는 여기를 참조하세요..
