Firefox용 Jetpack을 사용하면 우리가 마스터한 프런트 엔드 기술(HTML/CSS/JS)만 사용하여 Firefox 플러그인을 쉽게 만들 수 있습니다. 더욱 흥미로운 점은 Jetpack이 jQuery 프레임워크도 통합한다는 것입니다.
Adobe Air, Web OS, Jetpack 등 적어도 프런트엔드의 가치가 기회를 통해 점점 더 입증될 것이라는 점은 확신해 봅시다.
첫 번째 Firefox Jetpack 확장 프로그램을 만드는 방법을 단계별로 살펴보겠습니다.
1단계: Jetpack 플러그인 설치
Jetpack 플러그인 주소: https://jetpack.mozillalabs.com/install.html
Jetpack 플러그인을 설치한 후 주소 표시줄에 jetpack 정보 를 입력하여 Jetpack 로컬 인터페이스에 액세스할 수 있습니다.
2단계: planabc.js 파일을 생성합니다.
planabc.js 의 자세한 코드는 다음과 같습니다.
jetpack .statusBar . 추가 ( {
HTML : '<img src="http://www.planabc.net/favicon.ico"/>' ,
너비 : 16 ,
준비 중 : 함수 ( 위젯 ){
$ ( 위젯 ) .click ( 함수 (){
jetpack .focused .contentWindow . "http://www.planabc.net/" ;
});
}
}); jetpack .statusBar .append 는 JavaScript 개체를 실행합니다(JavaScript 개체 에는 html, url, width 및 onReady의 네 가지 속성이 있습니다).
- html 속성: 상태 표시줄에 표시될 초기 HTML을 정의합니다. 이 예에서는 간단한 IMG 요소가 표시됩니다.
- url 속성: 상태 표시줄에 표시될 외부 HTML 콘텐츠의 URL을 정의합니다. 이 예에서는 이 속성이 사용되지 않습니다.
- width 속성: 상태 표시줄의 콘텐츠 너비를 정의합니다(단위: 픽셀). 이 예에서는 IMG 요소 자체의 너비인 16픽셀로 정의됩니다.
- onReady 속성: 호출할 함수를 정의합니다(이 함수는 상태 표시줄이 생성되면 호출됩니다). Jetpack은 jQuery 프레임워크를 통합하므로 jQuery의 속성과 메서드를 직접 사용할 수 있습니다. 이 예 에서는 Jetpack 확장 프로그램을 클릭 하면 jetpack tabs .contentWindow 속성 이 http://www.planabc.net/ 으로 수정 됩니다 . jetpack .
