GreaseMonkey로 웹 페이지 맞춤 설정

GreaseMonkey는 Mozilla Firefox 웹 브라우저의 확장 기능으로 사용자는 인터넷 서핑을하는 동안 방문한 웹 페이지 를 수정할 수 있습니다. 이 고유 한 소프트웨어를 사용하면 페이지의 특정 부분을 향상 또는 삭제하여 사용자가 선호하는 방식대로 웹 페이지 를 개인화 할 수 있습니다. 스크립트 언어 및 프로그래밍 언어에 대한 지식은 Javascript, DOM, HTML, CSS 및 XPATH의 요소가 포함 된 GreaseMonkey 스크립트 를 작성하는 데 필요합니다. GreaseMonkey를 사용하여 웹 페이지를 개인화 하는 데 관심이있는 사용자 는 인터넷에서 무료로 다운로드 할 수 있습니다.

GreaseMonkey 란 무엇입니까?

GreaseMonkey는 방문한 웹 페이지를 조작 할 수있는 Firefox 용 확장 프로그램입니다.

즉, 브라우저에서 직접 페이지를 변경합니다.

이렇게하면 원하는 사이트의 모든 페이지를 마음대로 바꿀 수 있습니다. 마음에 들지 않는 항목 제거, HTML 편집, HTML 코드 추가, 자바 스크립트 변경 / 추가 / 제거, 색상 변경, 기능 추가, 증가 또는 감소 테이블, 양식 등의 크기를 줄이십시오.

예제 1

이 스크립트는 키오케아 페이지를 수정하여 포럼에서 메시지 필드를 확대합니다.

/ /이 스크립트는 공개 도메인에 있습니다.

//

// == UserScript ==

// @name KIOSKEA-Forums

// @namespace 웹 사이트

// @description ccm의 웹 페이지 수정

// @include //ccm.net/*

// @include //www.commentcamarche.com/*

// @include //www.commentcamarche.net/*

// == / UserScript ==

(function () {

// XPath가 문서에서 제공되는 모든 요소를 ​​제거합니다.

//

// 예 : CSS 클래스 'toto'를 사용하는 모든 테이블을 제거합니다.

// removeElement ( "// table [@ class = 'toto']");

함수 removeElement (ElementXpath)

{

var alltags = document.evaluate (ElementXpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

for (i = 0; i

{

요소 = alltags.snapshotItem (i);

element.parentNode.removeChild (element); //이 요소를 부모 요소에서 제거합니다.

}

}

// XPath가 제공되는 모든 요소에서 속성을 제거합니다.

// (이 요소의 모든 항목이 처리됩니다.)

//

// 예 : 모두의 bgcolor를 제거합니다.

:

// removeAttributeOfElement ( 'bgcolor', "// table [@bgcolor]")

// 모든 테이블 또는 셀의 고정을 제거합니다. ::

// removeAttributeOfElement ( 'width', "// table [@width] | // td [@width]")

함수 removeAttributeOfElement (attributeName, ElementXpath)

{

var alltags = document.evaluate (ElementXpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

for (i = 0; i

alltags.snapshotItem (i) .removeAttribute (attributeName);

}

// 모든 요소의 속성을 지정된 값으로 설정합니다.

//이 속성의 이전 값은 무시됩니다.

// (이 요소의 모든 항목이 처리됩니다.)

//

// 예 : 모든 texteareas에서 80 열로 설정 :

// setAttributeOfElement ( 'cols', 80, "// textarea")

함수 setAttributeOfElement (attributeName, attributeValue, ElementXpath)

{

var alltags = document.evaluate (ElementXpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

for (i = 0; i

alltags.snapshotItem (i) .setAttribute (attributeName, attributeValue)

}

// 페이지에 자신의 CSS를 삽입하십시오.

// 예 : 링크에 밑줄을 긋지 않습니다.

// injectCSS ( "a {text-decoration : none;}")

함수 injectCSS (cssdata)

{

head = document.getElementsByTagName ( "head") [0];

style = document.createElement ( "style");

style.setAttribute ( "type", 'text / css');

style.innerHTML = cssdata;

head.appendChild (style);

}

시험

{

// 메시지 필드의 확대 setAttributeOfElement ( 'rows', '40', "// textarea [@ name = 'message']");

setAttributeOfElement ( 'cols', '120', "// textarea [@ 이름 = '메시지']");

// 토론 목록에서 아무런 응답도받지 않은 토론을 굵게 표시합니다. setAttributeOfElement ( 'style', 'font-weight : bold;', // td [text () = '0'] /../ td [1] / a ");

}

캐치 (e)

{

경고 ( "UserScript 예외 : \ n"+ e);

}

}) ();

스크립트의 가장 중요한 부분은 다음과 같습니다.

 setAttributeOfElement ( 'rows', '40', "// textarea [@ name = 'message']"); setAttributeOfElement ( 'cols', '120', "// textarea [@ 이름 = '메시지']");

이 두 줄은 메시지 (이름 = "메시지"로 식별 됨)를 입력하는 데 사용되는 텍스트 상자 (텍스트 영역)의 크기 (행, 열)를 변경합니다.

XPath (/ / textarea ...)를 사용하여 작동 할 요소를 선택합니다.

XPath는 HTML 페이지의 특정 요소를 지정하는 방법이지만 사용은 필수는 아닙니다.

전통적인 DOM 메소드 (.GetElementsByTagName ()을 수행 한 다음 for 루프 등)를 수행 할 수 있습니다.

예제 2

이 스크립트에는 다음 행도 포함되어 있습니다.

 setAttributeOfElement ( 'style', 'font-weight : bold;', // td [text () = '0'] /../ td [1] / a "); }

포럼의 토론 영역에서는 응답하지 않은 토론에 대담한 제목을 추가합니다.

XPath :

- 텍스트 "0"을 포함하는 표 셀을 선택하십시오 (td [text () = '0']).

- 평준화

( / .. )

- 우리는 처음으로

그리고 /에서 다음 날짜들.
셀 (제목이 들어 있음) ( / td [1] )

-이 링크에 포함 된 모든 링크 (/ a)를 굵게 표시합니다.

.

XPath

몇 가지 예 :

- 모든 이미지 선택 : // img

- 테두리없는 모든 이미지 선택 : // img [@ border = '0']

- Google을 가리키는 모든 링크 선택 : // a [@ href = '//google.com']

- Google에 대한 모든 링크를 선택하고 'Google에 연결 : // a [@ href ='//google.com '및 (., 'Google에 연결 ') 텍스트가 포함 된 텍스트 포함]

- 모든 링크를 선택하십시오 : / / a

- 링크 된 이미지 만 선택하십시오. / / a / img

- 테이블 셀에 직접 배치 된 링크 만 선택 : // td / a

- 테이블 셀에 직접 배치 된 첫 번째 링크 만 선택하십시오. // td / a [1]

- 테이블 셀에 직접 배치 된 마지막 링크 만 선택 : // td / a [last ()]

- 정확한 텍스트 "Hello"가 포함 된 모든 표 셀을 선택하십시오. // td [text () = 'Hello']

- "Hello"라는 단어를 (텍스트의 어딘가에) 포함하고있는 모든 표 셀을 선택하십시오 : // td [contains (., 'Hello')]

- "Hello"텍스트로 시작하는 모든 표 셀을 선택하십시오 : // td [starts-with (., 'Hello')]

- "foo"라는 단어가 들어있는 셀을 포함하는 모든 테이블을 선택하십시오 : / / td [contains (., 'Hello')] /../ .. (첫 번째 /

)

- 테이블의 두 번째 열에있는 모든 셀을 선택하십시오 : / / tr / td [2]

- 테이블의 마지막 열에있는 모든 셀을 선택하십시오 : // tr / td [last ()]

- 열 1, 2 및 3 테이블의 셀을 선택하십시오. / / tr / td [position () <= 3]

- 하나 이상의 속성을 가진 모든 테이블을 선택하십시오 : // table [@ *]

- width 속성을 가진 모든 테이블을 선택하십시오 : // table [@ width]

- 너비가 400px 인 모든 표를 선택하십시오. // 표 [@ width = '400px']

- 셀의 직녀 인 모든 태그를 선택하십시오. / / td / *

- 셀의 아들 인 모든 링크를 선택하십시오 : / / td / a

- 셀의 직계 아들 인 두 번째 링크를 선택하십시오 : / / td / a [1]

- 셀에서 첫 번째 태그를 선택하십시오 : // td / * [1]

- onload 속성을 가진 첫 번째 태그를 선택하십시오 : // td / * [@ onload]

- h 코드에서 p 다음에 오는 태그를 선택하십시오 : / / p / following :: a

- 바로 태그 태그를 선택합니다 : p / / p / a

- ap 태그에 포함 된 태그를 선택합니다 (깊이에 상관없이). / / p / descendant :: a

- p 태그 뒤에 있지만 같은 레벨의 모든 태그를 선택하십시오. // / p / following-sibling :: a

Firefox에서는 DOM Inspector를 사용하여 선택할 요소를 찾을 수 있습니다 (Ctrl + Shift + I).

확장을 사용하여 XPath 표현식 XPath를 테스트 할 수도 있습니다.

유용

ccm.user.js 스크립트에는 인생을 더 편리하게 만들어주는 4 가지 클래스의 유틸리티가 들어 있습니다.

removeElement (path) : 페이지에서 항목을 제거합니다.

removeAttributeOfElement (nomattribut Road) : 요소의 속성을 제거합니다.

etAttributeOfElement (nomattribut, value, path) : 요소의 속성을 추가 또는 수정합니다.

injectCSS () : 자신의 CSS를 페이지에 삽입하십시오.

Path는 XPath 요소의 경로입니다.

예 :

removeElement () 

 ...
...

쓰레기를 지우려면 다음과 같습니다. removeElement ( '/ / td / span [@ class ='comment ']');

해당 blabla를 포함하는 셀 (td)을 삭제하려면 : removeElement ( '/ / td / span [@ class ='comment '] / ..');

모든 주석을 삭제하려면 표 셀에 없어도 다음과 같습니다. removeElement ( '/ / span [@ class ='comment ']');

removeAttributeOfElement () 

 ...
블래 블라 블라
...

이 테이블에 표시된 크기를 제거하려면 removeAttributeOfElement ( 'width', '// table [@ bgcolor ='# ffe ']');

setAttributeOfElement () 

 ...
...

setAttributeOfElement ( 'width', '100 %', '// 테이블 [@ bgcolor ='# ffe ']');

injectCSS ()

웹 페이지에서 기본 글꼴을 변경하려면 다음과 같이하십시오.

injectCSS ( 'body (font-family : Verdana, sans-serif;)');

모래밭

GreaseMonkey 확장 프로그램 : //addons.mozilla.org/fr/firefox/addon/748

GreaseMonkey 매뉴얼 : //diveintogreasemonkey.org/

참고 : 스크립트 작성 GreaseMonkey는 항상 쉬운 것은 아닙니다 (자바 스크립트, DOM, HTML, CSS 및 XPath를 선택적으로 포함해야 함).

오리너구리 는 자동으로 스크립트를 생성 할 수있는 Firefox 확장 기능입니다. GreaseMonkey :

//addons.mozilla.org/fr/firefox/addon/737

그러나 오리너구리는 다소 느리고 성가신 자바 스크립트 코드를 생성하는 경향이 있습니다.

이전 기사 다음 기사

톱 팁