Peribadikan halaman web dengan GreaseMonkey

GreaseMonkey adalah lanjutan dari penyemak imbas web Mozilla Firefox yang membolehkan pengguna memodifikasi laman web yang telah mereka kunjungi semasa melayari internet. Perisian unik ini membolehkan pengguna untuk memperibadikan halaman web mengikut keutamaan mereka, dengan meningkatkan atau memadam bahagian tertentu halaman. Sesetengah pengetahuan mengenai bahasa skrip dan bahasa pengaturcaraan diperlukan untuk menulis skrip GreaseMonkey kerana ia mengandungi elemen dari Javascript, DOM, HTML, CSS dan XPATH. Bagi mereka yang berminat untuk memperibadikan laman web menggunakan GreaseMonkey, manual bantuan diri keseluruhan boleh dimuat turun secara percuma dari internet bersama-sama dengan sumber berguna yang lain.

Apakah GreaseMonkey?

GreaseMonkey adalah pelanjutan untuk Firefox yang membolehkan anda tweak pada halaman web yang terbang yang anda lawati.

Iaitu, ia akan mengubah halaman secara langsung dalam penyemak imbas.

Ini membolehkan anda menukar pada semua halaman mana-mana laman web yang anda inginkan: menghapus item yang anda tidak suka, edit HTML, tambahkan kod HTML, tukar / tambah / keluarkan javascript, tukar warna, menambah ciri, tambah atau mengurangkan saiz meja, bentuk dan sebagainya ...

Contoh 1

Skrip ini akan mengubah suai halaman Kioskea untuk memperbesar bidang mesej di forum.

/ / Skrip ini berada dalam domain awam.

//

// == UserScript ==

// @name KIOSKEA-Forums

// @namespace WEBSITE

// @description Ubah suai laman web ccm

// @include //ccm.net/*

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

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

// == / UserScript ==

(fungsi () {

// Menghapuskan semua kejadian elemen yang XPath disediakan dari dokumen itu.

//

// Contoh: Alih keluar semua jadual yang menggunakan kelas CSS 'toto':

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

fungsi removeElement (ElementXpath)

{

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

untuk (i = 0; i

{

elemen = alltags.snapshotItem (i);

element.parentNode.removeChild (element); / / Buang elemen ini dari ibu bapanya.

}

}

// Mengalih keluar atribut dari semua kejadian elemen yang XPath disediakan.

// (Semua kejadian elemen ini diproses.)

//

// Contoh: Keluarkan bgcolor semua

:

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

// Keluarkan tetap dengan semua jadual atau sel ::

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

fungsi removeAttributeOfElement (attributeName, ElementXpath)

{

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

untuk (i = 0; i

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

}

// Menetapkan atribut dari semua kejadian unsur ke nilai yang ditentukan.

// Nilai sebelumnya dari atribut ini dibuang.

// (Semua kejadian elemen ini diproses.)

//

// Contoh: Tetapkan dengan hingga 80 lajur pada semua texteareas:

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

fungsi setAttributeOfElement (attributeName, attributeValue, ElementXpath)

{

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

untuk (i = 0; i

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

}

// Tolak CSS anda sendiri dalam halaman.

// Contoh: Jangan menggariskan pautan:

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

fungsi injectCSS (cssdata)

{

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

style = document.createElement ("gaya");

style.setAttribute ("taip", 'teks / css');

style.innerHTML = cssdata;

head.appendChild (gaya);

}

cuba

{

/ / Memperbesar bidang mesej setAttributeOfElement ('baris', '40', "// textarea [@ name = 'message']");

setAttributeOfElement ('cols', '120', "// textarea [@ name = 'message']");

// Dalam senarai perbincangan, kami membahaskan perbincangan yang belum mendapat balasan. setAttributeOfElement ('gaya', 'font-weight: bold;', "// td [text () = '0'] /../ td [1] / a");

}

menangkap (e)

{

amaran ("pengecualian UserScript: \ n" + e);

}

}) ();

Bahagian paling penting skrip ialah:

 setAttributeOfElement ('rows', '40', "// textarea [@ name = 'message']"); setAttributeOfElement ('cols', '120', "// textarea [@ name = 'message']");

Kedua baris ini mengubah saiz (baris, kol) kotak teks (kawasan teks) yang digunakan untuk menaip mesej (dikenali dengan nama = "mesej").

Ia menggunakan XPath (/ / textarea ...) untuk memilih elemen yang hendak bertindak.

XPath adalah cara untuk menentukan unsur-unsur tertentu dari halaman HTML, tetapi penggunaannya tidak wajib.

Anda boleh melalui kaedah tradisional DOM (.GetElementsByTagName () dan kemudian buat gelung, dll.).

Contoh 2

Skrip ini juga mengandungi baris ini:

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

Dalam bidang perbincangan forum, ini akan menambah tajuk yang berani untuk perbincangan yang belum dijawab.

XPath:

- Pilih sel jadual yang mengandungi teks "0" (td [text () = '0'])

- Kembali ke tahap

( / .. )

- Kami pergi pada yang pertama

dan / .. tarikh berikut di
sel (yang mengandungi tajuk) ( / td [1] )

- Kami masukkan semua pautan (/ a) yang terkandung dalam ini

.

XPath

Beberapa contoh:

- Pilih semua imej: / / img

- Pilih semua imej tanpa sempadan: / / img [@ border = '0']

- Pilih semua pautan yang menunjuk ke Google: / / a [@ href = '//google.com']

- Pilih Semua pautan ke Google dan mengandungi teks "Pautan ke Google: / / a [@ href = '//google.com' dan mengandungi (., 'Pautan ke Google')]

- Pilih semua pautan: / / a

- Pilih hanya imej yang menghubungkan: / / a / img

- Pilih hanya pautan yang dimasukkan ke dalam sel jadual: / / td / a

- Pilih hanya pautan pertama yang diletakkan langsung dalam sel jadual: / / td / a [1]

- Pilih hanya pautan terakhir yang diletakkan langsung dalam sel jadual: / / td / a [last ()]

- Pilih semua sel jadual yang mengandungi teks tepat "Hello": / / td [text () = 'Hello']

- Pilih semua sel jadual yang mengandungi (tempat di dalam teks) perkataan "Hello": / / td [contains (., 'Hello')]

- Pilih semua sel jadual bermula dengan teks "Hello": / / td [ start -with (., 'Hello')]

- Pilih semua jadual yang mengandungi sel yang mengandungi perkataan "foo": / / td [contains (., 'Hello')] /../ .. (Yang pertama / .. kembali dalam

)

- Pilih semua sel dalam lajur kedua jadual: / / tr / td [2]

- Pilih semua sel dalam lajur terakhir jadual: / / tr / td [last ()]

- Pilih sel-sel dalam lajur 1, 2 dan 3 jadual: / / tr / td [position () <= 3]

- Pilih semua jadual dengan sekurang-kurangnya satu atribut: / / table [@ *]

- Pilih semua jadual dengan lebar atribut: / / table [@ width]

- Pilih semua jadual dengan lebar 400px: / / table [@ width = '400px']

- Pilih semua tag yang anak perempuan langsung sel: / / td / *

- Pilih semua pautan yang langsung anak sel: / / td / a

- Pilih pautan kedua ialah anak langsung dari sel: / / td / a [1]

- Pilih tag pertama dalam sel, apakah itu: / / td / * [1]

- Pilih tag pertama dengan atribut onload: / / td / * [@loadload]

- Pilih tag sebagai tag selepas p dalam kod html: / / p / berikut :: a

- Pilih tag yang segera tag tag perempuan: / / p / a

- Pilih mana-mana tag yang terkandung dalam tag ap (tidak kira kedalaman) / / p / keturunan :: a

- Pilih semua tag yang selepas tag p, tetapi pada tahap yang sama: / / p / adik-adik: a

Di Firefox, anda boleh menggunakan Inspektor DOM untuk membantu anda mencari elemen untuk memilih (CTRL + SHIFT + I).

Anda juga boleh menggunakan pelanjutan untuk menguji XPath ekspresi XPath anda.

Utiliti

Skrip ccm.user.js mengandungi 4 kelas utiliti untuk memudahkan hidup anda:

removeElement (path) : alih keluar item dari halaman.

removeAttributeOfElement (Road nomattribut) : alih keluar atribut elemen.

s etAttributeOfElement (nomattribut, nilai, jalan) : menambah atau mengubah suai sifat elemen

injectCSS () : menyuntik CSS anda sendiri dalam halaman.

Jalan adalah laluan elemen XPath.

Contoh:

removeElement () 

 ...
...

Untuk memadam sampah, ia akan menjadi: removeElement ('/ / td / span [@ class =' ​​comment ']');

Untuk memadam sel (td) yang mengandungi blabla: removeElement ('/ / td / span [@ class =' ​​comment '] / ..');

Untuk memadam semua komen, walaupun mereka tidak berada dalam sel jadual, ia akan: removeElement ('/ / span [@ class =' ​​comment ']');

removeAttributeOfElement () 

 ...
blablabla
...

Untuk mengalih keluar saiz yang ditunjukkan dalam jadual ini: removeAttributeOfElement ('width', '// table [@ bgcolor =' #ffe ']');

setAttributeOfElement () 

 ...
...

Untuk memaksa lebar jadual: setAttributeOfElement ('lebar', '100%', '// table [@ bgcolor =' # ffe ']');

injectCSS ()

Untuk menukar font lalai pada halaman web:

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

Pautan

Extension GreaseMonkey: //addons.mozilla.org/fr/firefox/addon/748

Manual GreaseMonkey: //diveintogreasemonkey.org/

Nota : Skrip penulisan GreaseMonkey tidak selalu mudah (ia mesti mengandungi Javascript, DOM, HTML, CSS dan XPath secara pilihan).

Platypus adalah pelanjutan Firefox yang membolehkan secara automatik menghasilkan skrip GreaseMonkey:

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

Tetapi Platypus mempunyai kecenderungan untuk menghasilkan kod Javascript yang agak lambat dan rumit.

Artikel Sebelumnya Artikel Seterusnya

Tip-Tip Utama