Chrome 사용자 인 경우 하나 이상의 확장 프로그램을 사용하고있을 가능성이 있습니다. 광고를 차단하든 기능을 추가하든 확장 프로그램은 브라우저에 많은 유틸리티를 추가합니다. Chrome 확장 프로그램을 만들 수 있다면 멋지지 않습니까? 그것이 바로 여기에 여러분에게 보여줄 것입니다.
또한 최고의 터치 스크린 크롬 북 기사를 참조하십시오.
고객을 위해 웹 사이트를 유지 관리 할 때 페이지로드와 관련하여 각 사이트의 실적을 알고 싶습니다. Google은 이제 SEO 계산에로드 시간을 사용하므로 사이트를 최적화 할 때 페이지로드 속도 또는 속도를 아는 것이 중요한 지표입니다. 이것은 모바일 웹 사이트를 최적화 할 때 더욱 그렇습니다. Google에서 높은 점수를 얻으려면 가볍고 빠르며 오류가 없어야합니다.
또한 SitePoint의 진취적인 사람이 페이지 속도, GTmetrix를 확인하는 데 사용하는 것과 동일한 웹 사이트를 사용하고 확인하기 위해 Chrome 확장 프로그램을 개발했다는 사실을 확인했습니다.
크롬 확장
Chrome 확장 프로그램은 핵심 브라우저에 기능을 추가하는 미니 프로그램입니다. 그것들은 우리가 만들려는 것만 큼 간단하거나 보안 암호 관리자 또는 스크립트 에뮬레이터처럼 복잡 할 수 있습니다. HTML, CSS 및 JavaScript와 같은 호환 가능한 언어로 작성된이 파일은 브라우저와 함께있는 독립적 인 파일입니다.
필연적으로 대부분의 확장 프로그램은 특정 작업을 수행하는 간단한 아이콘 클릭 실행입니다. 이 작업은 말 그대로 Chrome에서 원하는 모든 작업이 될 수 있습니다.
나만의 Chrome 확장 프로그램 만들기
약간의 연구만으로도 확장 프로그램을 조정하여 원하는대로 할 수 있지만 버튼 속도 검사 하나의 아이디어가 마음에 듭니다.
일반적으로 사이트 속도를 확인할 때 현재 페이지의 URL을 GTmetrix, Pingdom 또는 어디에나 붙여넣고 분석을 누르십시오. 몇 초 밖에 걸리지 않지만 브라우저에서 아이콘을 선택하여 사용할 수 있다면 좋지 않습니까? 이 학습서를 완료 한 후에는이를 수행 할 수 있습니다.
모든 것을 보관하려면 컴퓨터에 폴더를 만들어야합니다. manifest.json, popup.html 및 popup.js라는 세 개의 빈 파일을 만듭니다. 새 폴더 내부를 마우스 오른쪽 단추로 클릭하고 새 파일 및 텍스트 파일을 선택하십시오. 선택한 텍스트 편집기에서 세 파일을 각각 엽니 다. popup.html이 HTML 파일로 저장되고 popup.js가 JavaScript 파일로 저장되어 있는지 확인하십시오. 이 자습서의 목적으로 만 Google에서이 샘플 아이콘을 다운로드하십시오.
manifest.json을 선택하고 다음을 붙여 넣으십시오.
{ "manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "설명": "GTmetrix를 사용하여 웹 사이트 페이지 로딩 속도 분석", "version": "1.0", "browser_action": { "default_icon" : "icon.png", "default_popup": "popup.html"}, "권한":}
보시다시피 제목과 기본 설명을 제공했습니다. 또한 브라우저 바 및 popup.html에 표시되는 Google에서 다운로드 한 아이콘이 포함 된 브라우저 동작을 호출했습니다. Popup.html은 브라우저에서 확장 아이콘을 선택할 때 호출됩니다.
popup.html을 열고 다음을 붙여 넣습니다.
GTMetrix를 사용하는 Pagespeed Analyzer
Popup.html은 브라우저에서 확장 아이콘을 선택할 때 호출됩니다. 팝업 이름을 지정하고 버튼을 추가했습니다. 버튼을 선택하면 다음에 완성 할 파일 인 popup.js가 호출됩니다.
popup.js를 열고 다음을 붙여 넣습니다.
document.addEventListener ( 'DOMContentLoaded', function () {var checkPageButton = document.getElementById ( 'checkPage'); checkPageButton.addEventListener ( 'click', function () {chrome.tabs.getSelected (null, function (tab) {d = 문서; var f = d.createElement ( 'form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( '입력'); i.type = '숨김'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, 거짓);
JavaScript를 아는 척하지 않기 때문에 SitePoint가 이미 파일을 가지고있는 것이 편리합니다. 내가 아는 것은 GTmetrix가 현재 Chrome 탭에서 페이지를 분석하도록 지시한다는 것입니다. 'chrome.tabs.getSelected'라고 표시된 경우 확장 프로그램은 활성 탭에서 URL을 가져 와서 웹 양식에 입력합니다. 그것은 내가 할 수있는 한입니다.
Chrome 확장 프로그램 테스트
이제 기본 프레임 워크가 준비되었으므로 작동 방식을 테스트해야합니다.
- Chrome을 열고 추가 도구 및 확장을 선택하십시오.
- 사용하도록 설정하려면 개발자 모드 옆의 확인란을 선택하십시오.
- 압축이 풀린 확장자로드를 선택하고이 확장자에 대해 작성한 파일로 이동하십시오.
- 확장을로드하려면 확인을 선택하면 확장 목록에 나타납니다.
- 목록에서 사용 옆의 확인란을 선택하면 브라우저에 아이콘이 나타납니다.
- 팝업창이 나타나도록 브라우저에서 아이콘을 선택하십시오.
- 버튼을 선택하십시오, 지금이 페이지를 확인하십시오!
GTmetrix에서 확인중인 페이지와 성능 보고서가 표시됩니다. 기본 이미지에서 내 사이트에서 볼 수 있듯이 새로운 디자인 속도를 높이기 위해 약간의 작업을 수행했습니다!
앞으로 확장
나만의 Chrome 확장 프로그램을 만드는 것은 그리 어렵지 않습니다. 약간의 코드를 아는 것으로 시작하는 데 확실히 도움이되었지만, 이를 보여줄 수있는 수백 가지 리소스가 온라인에 있습니다. 또한 Google은 방대한 정보, 자습서 및 연습을 제공합니다. 이 확장 프로그램에 도움을주기 위해 Google 개발자 사이트에서이 페이지를 사용했습니다. 이 페이지는 확장 프로그램 작성의 모든 부분을 안내하고 이전에 사용한 아이콘을 제공합니다.
충분한 조사를 통해 브라우저가 할 수있는 모든 작업을 수행하는 확장을 만들 수 있습니다. Chrome 스토어에서 제공하는 최고의 확장 프로그램 중 일부는 회사가 아닌 개인이 만든 것이므로 실제로 직접 만들 수 있음을 증명합니다.
오리지널 가이드에 대한 SitePoint의 John Sonmez에게 모든 크레딧을 제공합니다. 그는 열심히 일했고, 나는 그것을 조금 재구성하고 약간 업데이트했습니다.
자신 만의 Chrome 확장 프로그램을 만들었습니까? 그것을 홍보하거나 공유하고 싶습니까? 당신이 할 경우 아래에 알려주십시오!
