위키백과:사용자 스크립트/가이드

전제조건

사용자 스크립트를 작성하려면 사용자 스크립트가 작성되는 프로그래밍 언어 중 적어도 일부를 배워야 한다: JavaScript.

다음 링크를 사용해 보십시오.

또한, 만약 당신이 우리의 스크립트하나를 사용하려고 시도해서 그것을 작동시킨다면, 그것은 분명히 도움이 될 것이다. 이 튜토리얼의 나머지 부분은 다양한 것들이 어디에 있는지 알고 있다고 가정한다(모든 것은 위키백과에서 설명됨:사용자 스크립트#사용자 스크립트를 설치하는 방법?)

기존 스크립트 찾기

처음부터 새 스크립트를 처음부터 새로 만드는 것보다 기존 스크립트를 원하는 대로 수정하는 것이 더 쉬울 수 있다. 이것을 "포킹"이라고 한다. 이렇게 하려면 스크립트를 사용자 페이지의 ".js"[n. 1]로 끝나는 하위 페이지로 복사하십시오. 그런 다음 새 페이지를 일반 사용자 스크립트처럼 설치하십시오.

처음부터 대본 쓰기

common.js 페이지 또는 skin.js(예: 벡터.js) 페이지에서 스크립트를 직접 작성할 수 있지만, 일반적으로 제목은 스크립트의 이름인 YourUserName/title.js 형식으로 스크립트에 대한 새 하위 페이지를 작성하는 것이 좋다. 이렇게 하면 기본 js 페이지가 복잡해지는 것을 방지할 수 있으며, 이것은 여러 스크립트를 설치할 때 유용하다. 새 사용자 스크립트도 설치하십시오.

헬로월드

Hello 월드 프로그램을 만들려면 다음 코드를 사용자:YourUserName/common.js 파일.

가져오기스크립트('사용자:YourUserName/hello-world.js'); 

다음으로, 사용자: 페이지를 작성하십시오.사용자 이름/hello-world.js를 입력하고 이 코드를 삽입하십시오.

$('#bodyContent').앞장을 서다('헬로 월드!</p>."); 

이것은 당신이 코드를 제거할 때까지 모든 페이지의 제목 아래에 "Hello world!"라고 쓸 것이다. 이것은 JQuery를 사용하지만, 당신은 이것을 순수한 자바스크립트로 쓸 수도 있다. #bodyContent 우리가 원하는 HTML 요소를 선택하는 CSS 코드 입니다. prepend 의 하위 항목으로 HTML 코드 삽입 #bodyContent 원소, 처음부터.

첫 번째 스크립트

우리는 당신의 js를 수정하여 독립된 모듈을 쓸 예정이니, 당신은 우리의 모듈 템플릿을 얻기를 원할 것이다. 본 자습서의 목적을 위해, 우리는 간단한 버전의 퀵 위키피디아 모듈을 작성할 것이다. {{Wikify}} 물품에 대한 유지관리 템플릿 시작하려면 변경하십시오. MODULE_NAME 모듈 템플릿에서 "Qwikify"를 참조하십시오. 템플릿의 모양은 다음과 같아야 함:

// Qwikify $(문서화하다).준비가 되어 있는( 기능을 하다 () {     모듈_코드; } ); 

MODULE_CODE, "Wikify" 탭을 추가하고 싶으므로 addPortletLink 기능을 사용할 것이다(이 기능에는 ""가 필요함).mediawiki.util"모듈). 대체하다 MODULE_CODE 이 기능에 대한 호출로 그런 다음 이 링크를 클릭하면 이름이 지정된 다른 함수를 호출하도록 이벤트 핸들러를 바인딩할 것이다. doQwikify() 실제로 코드를 실행할 수 있을 겁니다name 탭에 표시되는 항목이므로 "Wikify". 대부분의 탭에는 "ca-(the name)"의 ID가 있으므로 ID를 다음으로 설정하십시오. "ca-wikify"제목(마우스오버 또는 롤오버 텍스트라고도 함)은 다음과 같아야 한다. "Mark for wikification". 마지막으로, 우리는 jQuery의 .click()를 사용하여 이 링크를 클릭할 때, 그리고 그 때 함수를 실행한다. 우리가 전화한 후에 doQwikify(), 라고 쓰여 있다. event.preventDefault(). 링크를 클릭했으므로 브라우저에 기본 동작(Url로 이동하는 '#')을 방지하도록 지시해야 한다. 우리는 페이지가 있는 그대로 유지되기를 바라며, 그래서 브라우저가 링크를 따라가지 못하도록 우리는 그것을 방지하고 우리만의 사용자 지정 작업을 한다.

전체적으로 새로운 기능은 다음과 같아야 한다.

// 유틸리티 모듈이 로드되었는지 확인하십시오(아직 로드되지 않은 경우에만 로드됨). mw.짐을 싣다.사용.( 'mediawiki.util', 기능을 하다 () {      // 페이지가 구문 분석될 때까지 대기     $( 문서화하다 ).준비가 되어 있는( 기능을 하다 () {           //아래 "포틀렛" 하위섹션 참조         시합을 하다 연결하다 = mw.이용하다.addPortletLink( 'p-causes', '#', '위키파', 'ca-cautify', '위키화 표시');          $( 연결하다 ).찰칵찰칵 소리를 내다( 기능을 하다 ( 사건 ) {             사건.preventDefault();             도큐위키파();          } );     } ); } ); 

이제, 우리는 우리의 실제적인 것을 써야 한다. doQwikify() 기능을 하다 편집상자가 편집되니까 그것과 양식의 이름을 알아야 해. 페이지 원본을 보면 양식의 이름이 지정되어 있음을 알 수 있다. editform 그리고 텍스트 상자의 이름은 wpTextbox1, 즉 실제 텍스트는 document.editform.wpTextbox1.value.{{wikify}}(및 두 개의 새로운 선)을 추가하기 위해 간단히 다음과 같이 한다.

문서화하다.편집 양식.wpTextbox1.가치를 매기다 = "{" + "{{wikify}}\n\n" + 문서화하다.편집 양식.wpTextbox1.가치를 매기다; 

(위키에 이 코드를 쓸 때 확장되지 않도록 위키 템플릿 앞에 있는 "{" 괄호 두 개를 분리한다.)

마지막으로, 우리는 사용자를 위해 양식을 제출하고 싶다. 다행히 자바스크립트에는 이 이름만을 위한 기능이 내장되어 있다. submit()편집 양식을 제출하려면 document.editform.submit()코드 모양은 다음과 같아야 한다.

기능을 하다 도큐위키파() {     문서화하다.편집 양식.wpTextbox1.가치를 매기다 = "{" + "{{wikify}}\n\n" + 문서화하다.편집 양식.wpTextbox1.가치를 매기다;     문서화하다.편집 양식.제출하다(); } 

그게 다야! common.js를 저장하고 하드 리프레쉬를 한다. 페이지를 편집하십시오(나는 샌드박스를 사용함). 어떻게 되는지 보십시오![1]

로드/문서 준비 기능

개인용 "사용자" 모듈( 및 선택적으로 현재 피부에 대한 피부별 파일)과 가젯은 모든 페이지에 로드된다. 대부분의 스크립트는 페이지의 요소를 조작하고자 할 것이다. 그렇게 하려면 페이지가 준비되어야 한다(모듈을 로드할 때 그렇지 않을 수 있음). 우리는 특별한 기능을 사용하여 코드의 실행을 연기할 수 있다. jQuery에서 가장 흔하게.

// 주요 기능 정의 기능을 하다 myscript() {   // ... 코드... };  // HTML 페이지를 구문 분석 후 실행되도록 예약 $( 문서화하다 ).준비가 되어 있는( myscript );  // 이 속기도 유효하다. jQuery( myscript ); 

이 기능은 한 번만 호출되기 때문에 많은 사용자는 익명 함수로 이 코드를 단축하기를 선호한다.

$( 문서화하다 ).준비가 되어 있는( 기능을 하다 () {   // ... 코드... } );  // 또는 jQuery( 기능을 하다 () {   // ... 코드... } ); 

참고: $ 그리고 jQuery 같은 목적이다; 그들 사이에서 선택하는 것은 순전히 의견의 문제다.

많은 스크립트는 단순히 포틀렛의 링크와 같은 일부 스크립트 인터페이스를 추가하기 위해 이 기능을 사용한다. 그리고 나서 코드의 주요 부분은 사용자가 해당 링크를 클릭한 후에 실행된다.

기본 제공 스크립트

모든 위키백과 페이지는 일부 내장 미디어위키 자바스크립트 코드를 포함하며, 사용자 스크립트에서 사용할 수 있는 변수와 함수를 포함한다. 특정 코드는 본 페이지와 현재 사용자에 따라 달라지며, 자세한 내용은 위키백과:CSS 클래스 카탈로그#스타일시트자바스크립트.

대부분의 관심사는 다음과 같다.

개발 및 테스트

다음과 같은 개발 환경을 사용하여 스크립트를 개발하고 테스트할 수 있다.

기본

  • 미리 보기 단추 사용: /common.js 페이지에서 직접 스크립트를 편집한 후 [미리보기 표시]를 클릭하면 미리보기 페이지에서 바로 새 코드가 실행된다. 사용자 스크립트를 MediaWiki 소프트웨어 설치에 추가하려면 LocalSettings를 열어야 함을 참고하십시오.사용자 스크립트를 허용하도록 설치를 구성하려면 php 및 $wgAllowUserJs:를 설정하십시오.
$wgAllowUserJs = 진실의; 
  • 저장: 미리보기 페이지에 필요한 요소가 없는 경우(예: 스크립트가 기록 페이지에 작업을 수행하는 경우), 스크립트를 저장하여 테스트하십시오. 그러나, 이것은 편리하지 않고 페이지 기록에 불필요한 항목을 만든다.
  • 브라우저의 JavaScript 콘솔에서 실행: 모든 최신 브라우저는 자바스크립트 콘솔과 다른 개발 도구와 함께 제공된다. 거기에 코드를 입력하거나 붙여넣고 실행할 수 있으며, 스크립트 오류와 경고도 여기에 표시된다. 콘솔을 여는 방법은 브라우저에 따라 다름:
    • Google Chrome 및 Internet Explorer(인터넷 익스플로러)에서 다음을 누르십시오.
    • Firefox에서 ++⇧ ShiftK를 누르십시오.
    • Safari에서 ++AltI를 누르십시오.
    • 오페라에서 ++Shift-.를 누르십시오.
현재 다른 창이 열려 있는 경우 콘솔 탭을 누르십시오. 오페라에서 멀티라인 코드를 실행하려면 +를 눌러야 한다.↵ Enter Firefox의 경우 Firebug 추가 기능을 설치하십시오.

별도의 로컬 HTML 파일 사용

  • 모든 해당 .css 및 .js 파일을 포함하여 Wikipedia 페이지를 로컬 하드 드라이브에 저장하십시오. 자세한 내용은 브라우저에 따라 달라진다.
  • 편집기에서 저장된 페이지 열기, 스크립트 코드 삽입 <script></script> 또는 태그가 있는 별도의 로컬 파일로 <script src="file://C://you_local_path/name.js"></script>.
  • 브라우저에서 저장된 페이지를 열고 결과를 미리 보십시오.

이것은 사용자 스크립트를 신속하게 개발하기 위한 매우 현명한 방법이다. 그러나 다음과 같은 단점이 있다.

  • 브라우저에서 로컬 파일에서 Ajax 쿼리를 테스트할 수 없음
  • 테스트에 필요한 페이지(이력 등)에 따라 다른 페이지를 저장해야 함
  • MediaWiki 변경 사항과 동기화하려면 모든 .js 파일을 정기적으로 다시 저장해야 함
  • 위키피디아를 검색하는 동안 스크립트를 "일상적으로" 테스트하려면 여전히 다른 테스트 방법을 사용해야 한다.

로컬 호스트 웹 서버에서 로드 중

개발 중에 JavaScript 파일을 로드하는 가장 좋고 가장 권장되는 방법은 로컬 웹 서버(웹 서버를 쉽게 설치하는 방법은 아래 참조)이다. 이 문자열을 /common.js:

mw.짐을 싣다.짐을 싣다( 'csvps://localhost/authietest.js' ); 

어떤 환경에서는 다음과 같이[2] 작성해야 한다.

mw.짐을 싣다.짐을 싣다( '1998://1980.0.0.1/1980dietest.js' ); 

그런 다음 컴퓨터에서 웹 서버를 실행하고 해당 폴더에 파일을 만드십시오. 이 파일 안에 있는 코드는 마치 당신의 개인 스크립트 안에 있는 것처럼 실행될 것이다.

어떤 텍스트 편집기로든 파일을 편집할 수 있으며, 구문 강조 표시와 기타 편리한 기능을 사용하여 파일을 저장하고 Wikipedia 페이지를 간단히 다시 로드하여 결과를 볼 수 있다. (기다릴 필요도 없고, 웹 서버가 좋거나 올바르게 설정되었다면 브라우저 캐시를 우회할 필요도 없다.)

Windows에서는 디스크에 100kbyte 미만이고 설치가 필요 없는 TinyWeb을 예로 들 수 있다. 예를 들어 에 저장 및 압축을 풀고 에 바로 가기를 만든 다음 바로 가기 속성에서 인수를 추가하십시오. 즉, 폴더 경로 및 파일(필수). 이 바로 가기로 TinyWeb을 시작하고 작업 관리자를 사용하여 웹을 언로드하십시오.

추가 보안 제한으로 인해 Opera 9.50(이상 버전)에서는 이 방법이 작동하지 않는다는 점에 유의하십시오. Windows changelog의 경우 Opera 9.50: "로컬 서버는 원격 리소스를 사용할 수 있지만 그 반대의 경우는 사용할 수 없음"을 참조하십시오. Chrome에서는 SSL을 활성화해야 하는데 그렇지 않으면 스크립트가 로드를 거부하게 된다.

브라우저별

일부 브라우저에서는 특정 웹 페이지에서 JavaScript 코드를 자동으로 실행할 수 있다. 이렇게 하면 위키피디아에 로그인할 필요가 없다. 그 예로는 Tampermonkey가 있다. 그러나 이러한 확장자 중 하나로 사용자 스크립트를 작동시키려면 스크립트 코드를 수정해야 할 수 있다.

실행 중인 코드 조각

이미 로드된 페이지에서 코드 조각(예: 브라우저 주소 필드: javascript: var s = document.title; alert(s); void 0

또는 북마클릿 «JavaScript Shell »을 사용할 수 있다. 코드를 붙여넣거나 입력하여 현재 페이지의 컨텍스트에서 실행할 수 있는 새 브라우저 창을 연다.

그러나 전면적인 자바스크립트 디버거는 훨씬 편리하다.

출판

사용자 스크립트 코드를 완료하면 다른 사용자가 가져올 수 있도록 페이지로 저장할 수 있다. 관례에 따라 스크립트는 사용자 공간에 있으며 ".js"[n. 1]로 끝나는 제목이 "사용자:사용자 이름여기/MyCoolScript.js". 그러면 다른 사람들은 새 스크립트를 설치할 수 있다.

텍스트 편집기 및 디버깅

텍스트 편집기

간단한 텍스트 편집기에서 더 많은 기능이 포함된 코드 편집기 또는 IDE에 이르기까지 모든 것을 사용할 수 있다. 다음은 권장되는 몇 가지 기능:

  • 컬러 코드 자바스크립트 코드
  • 표준 ↵ EnterJavaScript 키워드 및 메서드를 +로 빠르게 삽입
  • 모든 기능의 목록을 표시하고 모든 기능으로 빠르게 이동
  • 코드 폴딩
  • 비 ASC를 사용하려는 경우문자열의 II 문자, 텍스트 편집기는 UTF-8을 지원해야 한다.

다음은 운영 체제별 권장 편집기 몇 가지 입니다.

자바스크립트 디버거

이러한 기능은 일반적으로 DevTools 창에서 브라우저에 내장되어 있다. 디버거를 사용하면 디버깅(JavaScript 코드별로 이동, 변수 위에 마우스를 올려 놓으면 값을 볼 수 있음 등)을 할 수 있다.

  • Firefox - 모든 JavaScript 및 CSS 오류를 표시하는 Tools → [n. 2]JavaScript Console 사용
  • ChromeChromium - Tools → Developer Tools 사용
  • Safari - Safari → Preferences → Advanced 및 "메뉴 바에서 개발 메뉴 표시" 옵션을 활성화한다. 그런 다음 Development → Show Web Inspector를 사용하여 개발 도구를 여십시오.
  • Opera - 모든 JavaScript 및 CSS 오류를 보여주는 Tools → Advanced [n. 3]→ Error Console 사용
  • Internet Explorer에서 디버깅하려면 Internet Explorer 8의 JScript 디버거를 참조하십시오.
  • 버전 8 이전 Internet Explorer에서 디버깅하려면 IEBlog: Internet Explorer에서 스크립팅 디버깅을 참조하십시오.

기본기법

요소 찾기

모든 HTML 요소는 다음 HTML 페이지에서 스크립트가 요소에 액세스할 수 있도록 하는 DOM 모델의 노드다.

<>형체를 이루다 이름을 붙이다="frmname" id="frmid">  <>텍스트 영역 이름을 붙이다="txtname" id="txtid"></텍스트 영역>  <>입력하다 id="neighbor" /> </형체를 이루다> 

다음 요소를 찾을 수 있다.

  • 사용: $( '#txtid' )
  • 동일한 모든 요소의 배열에서: $( 'textarea' )
  • 옆에 있는 요소 사용: $( '#neighbor' ).prev()
  • 부모의 자식인 경우: $( '#frmid' ).children( 'form' )
  • 폼 요소로, 사용: $( '#frmid [name="txtname"]' )

jsFiddle의 예

jQuery API 참조는 문서화의 훌륭한 출처다.

현재 페이지 확인

많은 스크립트는 일부 페이지에서만 작동하도록 되어 있다. 확인할 수 있는 항목:

  • 페이지 유형
만일 ( mw.구성.얻다( 'wgAction' ) === '역사' ) {  // 기록 페이지에서만 계속하십시오. 
만일 ( mw.구성.얻다( 'wgCanonicalNamespace' ) === 'User_talk') {  // User_talk 페이지에서만 계속하십시오. 
만일 ( mw.구성.얻다( 'wgPageName' ) === '조항_이름' ) {  // "기사명"에 대해서만 계속하십시오. 
  • 요소 존재 여부(스크립트의 두 번째 및 세 번째 부분에만 해당)
기능을 하다 func_start() {    만일 ( $( '#editForm' ).길이 == 0  ) 돌아오다; //편집 양식 없음? 종료    // … 

포틀렛(메뉴 및 탭)

포틀렛은 미디어상단 표시줄과 사이드바에 위치한 링크 그룹의 Wiki 이름. 여기 포틀렛 ID의 도표가 있다.

MediaWiki portlet names.

포틀렛 목록

    • p-personal - 페이지 오른쪽 맨 위에 있는 링크. "개인용"은 "개인용 도구"를 의미한다.
    • p-namespaces - 절대 무너지지 않는 왼쪽 탭. 추천도 안 되고, 공간도 별로 없어. 기사 및 토크 탭은 여기에 있다.
    • p-views - 절대 무너지지 않는 가운데의 탭. 추천도 안 되고, 공간도 별로 없어. 가장 좋아하는 페이지별 탭이 여기에 있다.
    • p-caues - "More" 탭의 드롭다운 메뉴에 있는 항목. "causes"는 "content actions"를 의미한다.
    • p-search - 여기에 항목을 추가하면 검색 상자의 모양이 엉망으로 된다. 권장되지 않음.
  • 왼쪽
    • p-logo - 여기에 물건을 추가하면 로고의 외관이 엉망이 된다. 권장되지 않음.
    • p-beat
    • p-상호작용 - "Contribute"라는 제목을 가지고 있다.
    • p-tb - "도구"라는 제목이 있음. TB는 툴박스를 의미한다.
    • p-coll-print_export - "인쇄/내보내기"라는 제목이 있음. 이건 인쇄와 수출용이어야 하기 때문에, 물건을 추가하기에 좋은 장소는 아니다.
    • p-wikibase-other projects - "다른 프로젝트에서"라는 제목이 있음. 이것은 Wikisource, Wikibooks 등과 같은 다른 프로젝트와의 링크만을 위한 것이기 때문에, 무언가를 추가하기에 좋은 장소는 아니다.
    • p-lang - "Language"라는 제목을 가지고 있다. 더하기 좋은 장소는 아니야, 왜냐하면 이곳은 언어만을 위한 곳이어야 하기 때문이야.

포틀렛 구조

<div id="p-myname" class="portlet"><h5>헤더</h5><div class="body"><li id="…><a …> //Links <li id="…. 

요소 추가

mediawiki.util.js에는 포틀렛에 사용자 자신의 링크를 추가하는 프로세스를 단순화하는 특별한 기능이 있다.

mw.util.addPortletLink()

  • portletType,
  • linkURL, - 페이지를 열 필요가 없고 대신 JavaScript 수신기를 사용하려면 #로 설정
  • 링크텍스트,
  • 요소ID, (선택사항) - ca-, pt-, n- 또는 t-와 같은 접두사를 사용할 것을 제안한다.
  • 도구 설명, (선택사항)
  • 건반을 치다바로 가기 키, (선택사항) - 필요하지 않은 경우 null로 설정 [1]
  • nextNode(선택 사항) - 앞에 추가할 요소

);

// 포틀렛 링크의 몇 가지 예  // 도구 상자에 js 파일에 링크 추가. tb = 도구 상자 mw.이용하다.addPortletLink ( 'p-tb', mw.이용하다.겟술( '특수:myPage/common.js' ), '나의 JS', 'pt-myvector', 'js 파일을 방문하십시오.');  // 개인 링크의 Notes 편집 페이지에 링크 추가 // 참고: 우리는 짧은/예쁜 URL이 ?action과 함께 사용되고 있다고 가정하며, 이상적으로는 당신이 그것을 확인할 것이다. mw.이용하다.addPortletLink ( 'p-personal', mw.이용하다.겟술( '특수:MyPage/Notes' ) + '?action=edit', '내 노트', 'pt-mynotes', '개인 노트 편집' );  // 도구 상자에 현재 페이지의 접두사 색인에 링크 추가 mw.이용하다.addPortletLink ( 'p-tb', mw.이용하다.겟술( '특수:접두사 색인/' + mw.구성.얻다( 'wgPageName' ) ), '프리픽스 인덱스', 'tb-tb-dex');  // 계정에 대한 로그에 링크 추가 mw.이용하다.addPortletLink ( 'p-personal', mw.이용하다.겟술( '특수:로그/' + mw.구성.얻다( 'wgUserName' ) ), '내 로그', 'pt-mylogs'); 

아니면 JQuery를 사용할 수도 있다. 그냥 다른 곳에 붙이면 돼. .append(), .prepend(), .before()또는 .after(). [2][3]

// 편집 요약 위에 있는 문서 편집 페이지에서 클릭 가능한 버튼을 추가하십시오. $('.editOptions').앞장을 서다('[button type="button" id="my-custom-button"]Do Things[/button]');  // 당신의 버튼에 청취기를 추가하라. 버튼이 클릭되었을 때 어떤 작용을 한다. $('#my-custom-button').찰칵찰칵 소리를 내다(기능을 하다(e) {  // 일을 하다 }); 

요소 제거

요소를 숨기려면 JQuery의 함수를 사용하십시오.

// 예: 편집 페이지에서 특수 문자 도구 모음 제거 $( '#edit-page-specialchars' ).숨기다();  // 또는 CSS를 직접 수정 $( '#edit-page-specialchars' ).css( '표시', 'none' ); 

또는 코드를 common.css:

#페이지별 특집 기사를 편집하다 {  전시하다:없는; } 

편집

기사 Wikicode가 있는 텍스트 영역

편집 페이지에서 가장 중요한 요소는 문서 텍스트가 들어 있는 a이다. 참조할 수 있다.

시합을 하다 $textbox = $( '#wpTextbox1' ); 

jquery.textSelection ResourceLoader 모듈을 사용하여 조작할 수 있다.

시합을 하다 $textbox = $( '#wpTextbox1' ); $textbox.텍스트선택( '설정 내용', '이거 대담하군!' ); $textbox.텍스트선택( '선택', { 출발하다: 8, 종지부를 찍다: 12 } ); $textbox.텍스트선택( 'EncapsulateSelection', { 미리: '[<b>], 우편으로 부치다: '[/b]' } ); // 결과: 텍스트 상자 앞에 커서가 있는 '이것은 </bold!>가 들어 있다. 

아니면 잡을 수도 있다. <textbox>의 텍스트, 문자열을 만들고 수정한 다음 다시 쓰십시오. 참고: textSelection api 대신 이 방법론을 사용하면 다른 편집 도구가 변경 내용을 인식하지 못하거나 충돌을 일으킬 수 있음.

// 값을 구하십시오. 하게 하다 가치를 매기다 = $('#wpTextbox1').발랄하게 하다();  // 코드가 여기에 입력됨. 가치 있는 일을 하다. RegEx, .replace(), concatenate 등  // 그럼 다시 쓰세요. $('#wpTextbox1').발랄하게 하다(가치를 매기다); 

도구 모음 편집

이제 기사 소스 코드를 편집할 때 WikiEditor가 기본 도구 모음이지만, 일부 사용자는 여전히 원래 도구 모음을 사용하고 있다. 기본 설정에서 "편집 도구 모음 사용" 확인란을 선택하고 선택 취소하여 WikiEditor를 설정하거나 해제할 수 있다.[n. 4][n. 5]

에디툴스

텍스트 영역 아래에 또 다른 편집 패널이 있다. 일반적으로 MediaWiki에서 생성됨:확장자별 Edittools:CharInsert 및 많은 JavaScript 링크로 구성됨. 영어 위키백과에서 이 접근법은 미디어위키로 대체되었다.Gadget-charinsert.jsMediaWiki:가젯-charinsert-core.js.

다른 사용자 스크립트 이후에 작업 수행

때때로 당신은 DOM에서 무언가를 추가하거나 제거하고 싶을 수도 있지만, 다른 사용자 스크립트는 DOM의 동일한 영역을 편집한다. 사용자 스크립트가 먼저 완료되는 것은 무작위로 레이싱 조건을 만들 수 있다. 이것을 피하는 한 가지 방법은 DOMNodeInserted 또는 DOMNodeRemoved 다른 사용자 스크립트가 완료될 때 수신할 이벤트(사용자 스크립트가 마지막으로 실행되는지 확인).

$('몸').에 관하여('DOMNodeInserted', '.dvs-link.link', 기능을 하다() {     // 일을 하다 } 

사용자 설정

사용자가 수동으로 구성 변수를 설정할 수 있도록 하려면 한 가지 방법을 사용하여 구성 변수를 배치하십시오. window.scriptNameSettingName = 'value here'; 공통 js 파일로. 그런 다음 사용자 스크립트 내에서 이 값을 if ( window.scriptNameSettingName == 'value here' ).

"scriptName"은 변수 이름의 일부 중 하나라는 점에 유의하십시오. 이것은 변수가 고유한지 확인하는 데 도움이 된다.

사용 안 함 let scriptNameSettingName = 'value here'; common.js 파일로. 사용자가 설정을 잊어버린 경우 보고되지 않은 변수 오류가 발생할 수 있다.

사용자 스크립트가 실행되는 동안 구성 설정을 쓰고 저장하도록 하려면 사용자 공간에 있는 자신의 .js 파일에 쓰도록 하십시오. 예는 twinkleoptions.js 또는 redwarnConfig.js를 참조하십시오.

버그 방지

<노와키> 태그

코멘트로 사용자 스크립트의 맨 위와 맨 아래에 다음 코드를 배치하십시오. 이렇게 하면 다음과 같은 벌레를 예방하는 데 도움이 될 것이다. ~~~~ 코드를 업데이트할 때 서명으로 변환할 수 있다.

//<노위키>  당신의 부호를 붙이다 여기에.  //[/nowiki] 

함수 범위

글로벌 네임스페이스에 명명된 함수를 선언하지 마십시오. 예를 들어, 이는 나쁘다.

기능을 하다 제출편집() {/* 작업 수행 */}  $(기능을 하다{/* 여기 메인 코드 */}); 

사용자 스크립트 중 다른 스크립트가 다음 작업을 선언하는 경우 submitEdit() 기능, 하지만 코드를 수정하셨나요? 이것은 인종적 조건과 추적하기 어려운 벌레로 이어질 수 있다. 대신 스크립트 이름을 딴 클래스를 사용하거나 모든 기능을 다음 위치에 배치하십시오. $(function {});. JavaScript는 중첩된 기능을 허용한다.

$(기능을 하다{     기능을 하다 제출편집() {/* 작업 수행 */}          /* 여기 메인 코드 */ }); 

아약스

AJAX(비동기 JavaScriptXML)는 전체 페이지를 재로드하지 않고 서버를 쿼리하거나 콘텐츠를 가져오는 웹 프로그래밍 기법의 인기 있는 이름이다.

AJAX 프로그래밍은 복잡할 수 있지만, 기능의 라이브러리는 훨씬 더 쉽게 할 수 있다. 1.16 출시 이후 미디어위키는 jQuery 라이브러리와 함께 제공되어 아약스 요청을 쉽게 할 수 있는 편리한 프레임워크를 제공한다.

일반적인 문제

  • AJAX 프로그래머들은 AJAX의 비동기성을 설명하지 않으면 보통 문제에 부딪친다. 만약 당신이 다른 페이지의 내용이 들어 있는 상자를 팝업하려고 한다면, 당신은 거의 확실히 그 안에 들어 있는 상자를 팝업할 것이다. null. 쿼리가 완료되지 않았는데도 스크립트가 계속되었기 때문에 발생하는 현상.

    문제를 해결하려면 콜백 기능을 사용해야 한다. 쿼리 후 코드의 다음 부분을 함수에 넣고 쿼리가 완료되면 함수를 호출하십시오. jQuery는 이것을 매우 쉽게 한다.

  • AJAX 스크립트는 다른 서버의 페이지(예: google.ca 또는 en)에 연결할 수 없다.en에서 wikisource.org.wikipedia.org). 그렇게 하려고 하면 오류가 있든 없든 스크립트가 중지될 것이다. 이것은 현재 서버의 프록시를 사용하여 우회할 수 있지만 Wikimedia 사용자 스크립트에는 사용할 수 있는 것이 없다.

기본 예시

MediaWiki는 일부 모듈에 API를 사용할 수 있는 도우미 기능을 제공한다. 사용 가능한 주요 모듈은 다음과 같다.

스크립트가 이러한 모듈에서 제공하는 메서드 또는 코드를 사용하는 경우 MediaWiki에서 해당 정의에 mw.loader.using 또는 가젯의 경우 다음 항목으로 종속성을 표시하십시오.가젯-definfinition.

이 API는 특히 POST 요청을 처리할 때 몇 가지 장점이 있다. 자동 토큰 새로 고침 및 재시도 기능을 제공하고, 다양한 오류 상황을 처리하며, 수정본 롤백과 같은 몇 가지 일반적인 사용 사례에 대한 매개 변수 요청 작성을 수행한다.

페이지 내용 가져오기

페이지 내용 가져오기 작업은 GET를 사용하여 수행할 수 있다.

$.아약스({  url: mw.이용하다.겟술( '위키피디아:샌드박스' ) }) .끝냈다(기능을 하다( 자료 ) {  빈틈이 없는( '원격 페이지에 다음이 있음:\n' + 자료 ); }) .실패하다(기능을 하다() {  빈틈이 없는( '아약스 요청 실패.' ); }); 

페이지의 Wikitext 가져오기

모듈 사용 mediawiki.api

참고: 종속성에 "mediawiki.api"를 추가하십시오!

기능을 하다 doSomethingWithText( 위키텍스트 ) {  /* .. */  빈틈이 없는( '페이지의 위키백트는:\n\n'이다. + 위키텍스트 ); } 기능을 하다 doSomethingInCaseOfError () {  /* .. */  위로하다.통나무를 하다( 'err' ); } (새로운 mw.api()).얻다( {  받침대: 'revisions',  rvprop: '내용',  rvlimit: 1,  색인 페이지: 진실의,  직함: '위키피디아:샌드박스' } ) .끝냈다( 기능을 하다 ( 자료 ) {  시합을 하다 q = 자료.질의하다,   id = q && q.페이지 기사들 && q.페이지 기사들[0],   pg = id && q.페이지 && q.페이지[ id ],   rv = pg && pg.수정 사항;  만일 ( rv && rv[0] && rv[0]['*'] ) {   doSomethingWithText( rv[0]['*'] );  } } ) .실패하다( doSomethingInCaseOfError ); 
일반 jQuery 사용
$.getJSON(  mw.이용하다.위키스크립트('api'),  {   형식을 갖추다: 'json',   액션: 'query',   받침대: 'revisions',   rvprop: '내용',   rvlimit: 1,   직함: '위키피디아:샌드박스'  } )  .끝냈다(기능을 하다 ( 자료 ) {   시합을 하다 페이지를 매기다, 위키텍스트;   해보다 {    을 위해 ( 페이지를 매기다  자료.질의하다.페이지 ) {     위키텍스트 = 자료.질의하다.페이지[페이지를 매기다].수정 사항[0]['*'];     doSomethingWithText( 위키텍스트 );    }   } 잡히다 ( e ) {    doSomethingInCaseOfError();   }  })  .실패하다( doSomethingInCaseOfError ); 

페이지 및 기타 일반 작업 편집

스크립트는 API를 통해 일반적인 작업(편집, 보호, 차단, 삭제 등)을 수행할 수 있다. 이러한 작업에는 편집 토큰이 필요하며, 편집 토큰은 동일한 세션 동안 모든 작업에 유효하다. (단, 나중에 변경될 경우 다른 작업에 대한 토큰을 새로 구해야 한다.)

아래 코드는 페이지를 편집하는 방법을 보여주지만 API 설명서를 읽으면 다른 작업에 쉽게 적응할 수 있다.

// 페이지 편집(POST를 통해 수행되어야 함) // "text: info.text" 라인이 통화의 원인이 됨  // 전체 페이지 내용을 제공된 데이터로 대체. // 또는 다음을 사용하여 페이지에 데이터를 추가하거나 미리 추가할 수 있다. // "context: info.text" 또는 "context: info.text" 대신. // "문자"를 사용할 때, 텍스트를 특정 섹션에 추가할 수 있다. // 선택적 필드 "섹션"을 설정함. 기능을 하다 편집페이지( 정보 ) {  $.아약스({   url: mw.이용하다.위키스크립트( 'api' ),   타자를 치다: 'POST',   dataType: 'json',   자료: {    형식을 갖추다: 'json',    액션: '편집',    칭호를 붙이다: 정보.칭호를 붙이다,    문자 메시지를 보내다: 정보.문자 메시지를 보내다, // 전체 페이지 내용을 대체함    요약: 정보.요약,    토큰: mw.사용자.토큰.얻다( 'csrfToken' )   }  })  .끝냈다 (기능을 하다( 자료 ) {   만일 ( 자료 && 자료.편집하다 && 자료.편집하다.결과 && 자료.편집하다.결과 == '성공' ) {    빈틈이 없는( '페이지 편집!' );   } 다른 {    빈틈이 없는( '편집 쿼리가 오류를 반환했다. =(' );   }  })  .실패하다 ( 기능을 하다() {   빈틈이 없는( '아약스 요청 실패.' );  }); } 편집페이지({  칭호를 붙이다: '사용자:' + mw.구성.얻다( 'wgUserName' ) + '/샌드박스',  문자 메시지를 보내다: '멋지다! 됐다! :-)~~' + '~~',  요약: '내 샌드박스 편집 시도 중 [프로젝트:사용자 스크립트/AJAX]를 사용한 Guide/Ajax]..." }); 

Wiki 페이지에서 JavaScript 로드

보안 경고: .js로 끝나지 않는 위키백과 페이지를 이 방법을 사용하여 스크립트에 로드하지 마십시오. 이 페이지들은 누구나 편집할 수 있기 때문이다.

하게 하다 칭호를 붙이다 = "사용자:YourName/YourScript.js"; mw.짐을 싣다.짐을 싣다( "https://en.wikipedia.org/w/index.php?title="+칭호를 붙이다+"&action=raw&ctype=text/them" ); 

Wiki 페이지에서 JSON 로드

JSON은 복잡한 데이터를 스크립트로 가져올 때 유용하다. 예를 들어, 위키 페이지에 정기적으로 특정 데이터를 게시하는 봇이 있을 수 있으며 스크립트가 해당 데이터를 읽도록 하십시오.

조심해 ctype로 설정하다. raw 일반 위키 페이지 및 application/json 템플릿 편집기 또는 관리자가 컨텐츠 모델을 JSON으로 설정한 페이지.

하게 하다 jsonData; 하게 하다 칭호를 붙이다 = "사용자:YourName/YourData.json"; $.getJSON(mw.구성.얻다('wgScriptPath')+'/index.php?action=raw&ctype=응용프로그램/json&message='+칭호를 붙이다, 기능을 하다(자료){  jsonData = 자료; }), 

CSS 작업

일부 사용자 스크립트는 일부 CSS 코드를 사용하거나 CSS만으로 작성되기도 한다. 그런 다음 CSS 코드를 코드화하고 테스트해야 한다. 그것은 당신의 , 그러나 그것은 느리고 지저분하다.

대신 로컬 웹 서버에서 CSS 파일을 로드할 수 있다(설치가 쉬운 웹 서버는 이전 섹션 참조). 이 줄을 /common.css:

@수입하다 "ntp://localhost/authediatest.css"; 

노트! 그런 @import 진술서는 CSS의 다른 선언보다 먼저 나와야 한다. 하지만 있을 수 있다. /* comments */ 그들 위에

다른 방법은 Javascript 파일에 다음 줄을 대신 넣는 것이다.

mw.짐을 싣다.짐을 싣다( '1998://localhost/authediatest.css', 'text/css' ); 

CSS 파일 게시

CSS 코드를 완료한 후에는 개인 용도로만 사용할 수 있는 경우 CSS 코드를 붙여 넣으십시오. 또는 다른 사용자가 사용할 수 있는 경우 User(사용자):이름/yourscript.css. 그러면 다른 사용자들은 그들의 파일에 다음 줄을 넣어 그것을 가져올 수 있다. 참고로, 그것은 그들의 ".js"에 있는 것이지 그들의 ".css"에 있는 것이 아니다.

importStylesheet( '사용자:yourname/yourscript.css' ); 

만약 CSS가 JavaScript로 작성된 사용자 스크립트와 함께 사용되어야 한다면, 당신은 사용자들이 쉽게 사용할 수 있다. 사용자 스크립트의 JavaScript 코드에 위의 줄을 입력하면 사용자는 JavaScript를 "설치"하기만 하면 된다.

완전성을 위해, 누군가가 궁금해 할 경우에 대비해서, 사용자들도 당신의 것을 그들로부터 가져올 수 있다. 이는 물론 사용자가 자바스크립트를 사용하지 않도록 설정했더라도 작동한다는 장점이 있다. 약간 복잡한 코드 라인이 필요하지만:

@수입하다 "/w/index.php?title=사용자:이름/yourscript.css&action=raw&ctype=text/css"; 

참고 항목

노트

  1. ^ Jump up to: a b 실제 요구사항은 페이지에 "자바스크립트" 컨텐츠 모델이 있다는 것이다. 제목이 ".js"로 끝나는 페이지를 만들면 자동으로 해당 내용 모델이 제공되며 페이지에 JavaScript가 포함되어 있음을 독자들에게 알려준다.
  2. ^ 편리한 디버깅을 위해 파이어버그를 강력히 추천한다.
  3. ^ 편리한 디버깅을 위해서는 잠자리가 강력히 추천된다.
  4. ^ mw:확장기: 참조WikiEditor 사용자 정의 방법에 대한 정보를 위한 WikiEditor/Toolbar 사용자 정의
  5. ^ 사용자가 사용 중인 두 도구 모음 중 어느 하나에든 단추를 쉽게 추가할 수 있는 스크립트는 사용자:V111P/js/addToolbarButtons를 참조하십시오.

참조

  1. ^ 이 섹션은 원래 Raylu에 의해 쓰여졌다. 이 튜토리얼을 개선하는데 도움을 준 모든 사용자들에게 감사한다!
  2. ^ https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
  3. ^ https://lists.wikimedia.org/pipermail/mediawiki-l/2010-June/034396.html