Інтернет через рожеві окуляри

Тимофій Бабич, mozilla.org.ua

20 березня 2010

На початку…

Розвиток ідеї: Greasemonkey

Що таке Greasemonkey?

  • Додаток до Firefox
  • Керівник скриптами
  • Щоб змінити сайт президента достатньо текстового редактора

Що можна?

  • Чинити поламані сайти
    • чи відкочувати назад дурні редізайни
  • Додавати потрібні можливості
  • Додавати посилання на інші сайти
  • Вилучати непотрібні елементи
  • Змінювати посилання (affiliate, tiny)
  • Ламати бізнес-моделі

Як саме

// ==UserScript==
// @name My script
// @namespace my_script
// @description Does cool thing on unian.net
// @include http://.unian.net/
// ==/UserScript==

Далі власне ваш епохальний код

Додаткові пряники

GM_xmlhttpRequest
запит будь-куди, коли завгодно
GM_log
повідомлення в консоль
GM_setValue, GM_getValue
запис та читання локальних даних ( > ніж куки)
GM_registerMenuCommand
створення нових пунктів меню в Firefox
GM_openInTab
відкрити нову вкладку

Тож якщо чого невистачає — доточи

Що читати

Ідея пішла в масси: Firefox

Ідея пішла в масси: Opera

Ідея пішла в масси: Chrome

До серця Safari ще не зовсім дійшла, але

Але в інших браузерах без пряників

  • Бо надати ці фічі так, щоб зловмисник не вкрав ваші дані дуже важко
    • Кража API
    • Локальний файловий доступ
  • І писати скрипти через цю систему безпеки теж не мед
    • Sandboxing
    • XPCNativeWrapper

Та чи багато хто від цього страждає?

www.greasespot.net/2009/11/greasemonkey-api-usage.html

Дві типові задачі можна вирішувати простіше

  • Знищення небажаних елементів
  • Зміна зовнішнього вигляду

Нищення: довірте це Адблоку

Механіка процесу

  • Adblock чудово прибирає ворожий вміст сторінки
  • Але ще він вміє ховати непотрібні куски сторінки
  • Особлива, адбоківська магія
  • Element Hiding Helper
  • adblockplus.org/en/elemhidehelper

uaportal.com##DIV[class=ad_760] site.com##A[href^=http://yellow.com]

Редизайн: Stylish йде на допомогу!

Все просто

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http://linux.org.ua/cgi-bin/yabb/YaBB.pl) {

.message {font-size: 12px !important ;}

}

Весь CSS3 до ваших послуг

  • Шрифти
  • Ґрадієнти
  • Творчі рамки
  • Кілька зображень тла
  • Селектори
  • data urls

Майбутнє

Mozilla Jetpack

  • Простий javascript-овий файл змінює поведінку браузера
  • Можна писати цілі додатки
  • Оновлюється
  • JQuery вбудована!
  • Для зміни сторінок є пряник

Jetpack pagemod

jetpack.future.import("pageMods");
var callback = function(document){ Епічний код тут };
var options = {};
options.matches = ["http://.reddit.com/",
"http://bloglines.com/*"];
jetpack.pageMods.add(callback, options);

Дякую за увагу

  • Questions?
  • Ideas?