오늘, 우리는 Firefox 가이드를 가지고 있습니다.누구나 탐색 툴바에서 사용자 정의 버튼을 만들 수 있습니다. 탐색 도구 모음에 표시되는 버튼과 함께 Firefox에 제공되는 다른 기능을 가진 다른 버튼 목록이 있으며 이는 도구 모음의 어느 곳에 나 추가 할 수 있으며 필요에 따라 사용자 지정할 수 있습니다. 별도의 지식 없이도 버튼의 위치와 동작을 변경할 수 있기 때문에 지시에 따라 동작하고 정의 된 위치에 앉으면 서 사용자 정의 할 수있는 새로운 확장 프로그램을 쉽게 만들 수 있습니다. 이 게시물에서는 간단한 기능을 제공하는 도구 모음 단추 인 간단한 확장을 만드는 방법을 설명합니다.
시작하려면 먼저 알아야합니다 확장 폴더 (Firefox 프로파일 폴더에있는 폴더). Windows 7 및 Windows Vista 사용자는이 폴더를 여기에서 찾을 수 있습니다.
C : 사용자 << 사용자 이름 >> AppDataRoamingMozillaFirefox 프로필 << 프로필 이름 >> 확장
그러나 Windows XP를 사용하는 경우 다음을 입력하십시오. % AppData % Windows Run 콘솔에서 Enter 키를 누릅니다.
이제 Firefox 폴더를 연 다음 프로필 –> <프로필 이름>-> 확장 폴더를 엽니 다.
일단 확장 폴더가 열리면 [email protected] 초기화합니다.
새로 작성된 폴더를 열고 새 디렉토리를 작성하십시오. 크롬, 두 개의 파일과 함께 – chrome.manifest 과 install.rdf. 이제 텍스트 편집기에서 이러한 파일을 편집 할 것입니다. Windows 내장 메모장과 같이 utf-8을 지원하는 편집기를 사용하는 것이 좋습니다.
먼저 오픈 chrome.manifest 파일을 작성하고 다음 코드 줄을 삽입하십시오. 아래에 제공된 코드는 Thunderbird 메일, 작성 및 주소록 창 및 Sunbird에서도 작동합니다. 그러나 Firefox에서만 단추를 사용해야하는 경우 Thunderbird 및 Sunbird 용 코드 줄을 제외 할 수 있습니다.
content custombutton chrome/ style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css # Firefox overlay chrome://browser/content/browser.xul chrome://custombutton/content/button.xul # Thunderbird mail overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul # Thunderbird compose overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul # Thunderbird address book overlay chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul # Sunbird overlay chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul
코드가 파일에 삽입되면 변경 사항을 저장 한 후 닫습니다. 이제 편집 install.rdf 파일, 다음 코드 줄을 삽입해야합니다그 안에. 버튼 일반 설명을 변경하고 코드의 6, 7, 8 번째 줄에 텍스트를 추가 할 수 있으며 (큰 따옴표로 묶어야 함) 버튼 이름, 설명 텍스트 및 작성자 이름을 입력 할 수 있습니다.
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest" em:name="AT" em:description="AddictiveTips" em:creator="Usman" em:id="[email protected]" em:version="1.0" em:homepageURL="http://developer.mozilla.org/en/docs/Custom_Toolbar_Button" em:iconURL="chrome://custombutton/content/icon.jpg" > <em:targetApplication><!-- Firefox --> <Description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minVersion="1.4" em:maxVersion="99" /> </em:targetApplication> <em:targetApplication><!-- Thunderbird --> <Description em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" em:minVersion="1.4" em:maxVersion="99" /> </em:targetApplication> <em:targetApplication><!-- Sunbird --> <Description em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" em:minVersion="0.2.9" em:maxVersion="99" /> </em:targetApplication> <em:file> <Description about="urn:mozilla:extension:custombutton" em:package="content/custombutton/" /> </em:file> </Description> </RDF>
설명을 변경 한 후 변경 사항을 저장하고 파일을 닫으십시오. 새로 만든 폴더를 기억하십시오 (크롬)에서 3 개의 파일을 만들고 2 개의 이미지를 삽입합니다. 먼저 다음 이름을 가진 3 개의 파일을 작성하십시오.
- button.css
- button.xul
- button.js
이제 버튼에 스타일을 적용하고여기서 복잡한 것은 아니지만 버튼 디자인에 기본 스타일을 적용합니다 (이미지 크기 정의 및 버튼에 마우스 오버 효과 지정). CSS 파일 (Cascading Style Sheet) 디자인에 익숙하다면, 값과 효과를 변경하는 것은 매우 어려운 일이지만, 이름을 처음 듣는 경우 다음 스타일 코드를 삽입하십시오. button.css 파일이 완료되면 변경 사항을 저장하고 닫습니다.
#custom-button-1,
#wrapper-custom-button-1
{list-style-image: url("chrome://custombutton/content/button-1.jpg");}
/* common style for all custom buttons */
.custombutton {-moz-image-region: rect( 0px 24px 24px 0px);}
.custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);}
[iconsize="small"] .custombutton
{-moz-image-region: rect( 0px 40px 16px 24px);}
[iconsize="small"] .custombutton:hover
{-moz-image-region: rect(24px 40px 40px 24px);}이제 button.xul 텍스트 편집기에서 파일을 작성하고 다음 줄을 삽입하십시오.코드 우리는 썬더 버드 및 썬 버드에 대한 코드도 제공하고 있음을 기억하십시오. Firefox에 대해서만이 가이드를 따랐다면 썬더 버드 및 썬 버드 관련 행을 제외 할 수 있습니다.
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!DOCTYPE overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- Firefox --> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Thunderbird mail --> <toolbarpalette id="MailToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Thunderbird compose --> <toolbarpalette id="MsgComposeToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Thunderbird address book --> <toolbarpalette id="AddressBookToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- Sunbird --> <toolbarpalette id="calendarToolbarPalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- button details --> <toolbarbutton id="custom-button-1" label="Custom" tooltiptext="My custom toolbar button" oncommand="CustomButton[1]()" class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" /> </overlay>
이제 이름을 가진 두 개의 이미지 파일을 삽입해야합니다 button-1.jpg 과 Icon.jpg 크기가 각각 40 × 48 및 48 × 48 인최상의 결과를 얻으십시오. 그러나 너비와 길이가 48px를 초과하지 않는 크기의 이미지를 만들 수 있습니다. 아래에서 우리가 사용하는 버튼 이미지를 볼 수 있습니다 – button-1.jpg 이미지는 각각의 크기 (큰 크기 및 작은 크기)를 가진 도구 모음 버튼이며 호버 효과는 두 기본 이미지 크기 아래에서 볼 수 있습니다. Icon.jpg 이미지는 기본 확장 아이콘 이미지 (Firefox 확장 갤러리에 표시되는 이미지)를 나타냅니다.
button-1.jpg
Icon.jpg
생성되면 5 번째 파일로 이동 – button.js. 이 JavaScript 파일은 매우 중요합니다.버튼의 주요 기능을 정의합니다. 기능을 테스트하라는 메시지를 표시하는 샘플 스크립트를 추가하거나 원하는대로 수행 할 고급 스크립트를 사용할 수 있습니다. 또한 요구 사항을 충족시키기 위해 특별히 고안된 많은 스크립트가 있으며 여기에서 간단하지만 유용한 스크립트를 확인할 수도 있습니다. 이 가이드는 초급 사용자를위한 것이므로 지정된 웹 사이트를 여는 간단한 책갈피 항목을 만듭니다. 를 엽니 다 button.js 파일을 추가하고 다음 코드 줄을 삽입하여 책갈피 도구 모음을 만듭니다 (Firefox 도구 모음에 표시).
CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}이제 잘가요, 우리는 당신이언급 된 파일에 삽입 한 코드를 확인하고 이미지 크기를 다시 확인하십시오. 새로 만든 확장을 설치하려면 실행중인 Firefox 인스턴스를 모두 닫은 다음 시작하십시오. 모든 것이 제대로 작동하면 확장 기능이 성공적으로 설치되었음을 나타내는 새로운 추가 기능 설치 메시지가 표시 될 수 있습니다.
탐색 도구 모음에 새로 작성된 단추를 표시하려면보기 메뉴의 도구 모음 하위 메뉴에서 사용자 정의를 클릭하십시오.
어디에서나 툴바 사용자 정의 대화 상자가 나타납니다.새로 만든 버튼을 탐색 도구 모음 위로 드래그해야합니다. 삽입 한 후 원하는 위치로 드래그하여 위치를 변경할 수도 있습니다.
이제 버튼을 클릭하여 JavaScript 파일에 삽입 된 기능을 확인하십시오.
결과 버튼의 기능은사용자가 정의한 기능에 따라 얼마나 많은 기능을 교정 할 수 있는지는 기술에 달려 있습니다. 초보 사용자는 바로 가기를 만들고, 응용 프로그램을 연결하고, 책갈피를 디자인 할 수 있으며, 평균 수준과 전문가 수준 사이의 림보 사용자는 확실히 더 많이 사용하고 기본 JavaScript 파일에 필요한 기능을 추가 할 수 있습니다.
코멘트