Оглавление

Что такое букмарклет

Букмарклет — это специальная закладка. От обычной закладки букмарклет отличается тем, что содержит не ссылку на документ, а специальный JavaScript-код.

Чтобы создать букмарклет, надо просто завести соответствующую закладку. Чтобы запустить букмарклет на выполнение, надо перейти по этой закладке. При этом выполнится соответствующий JavaScript-код, который в большинстве случаев, вызовет не переход на другую страницу, а некоторые манипуляции с текущей открытой в браузере web-страницей.

Важной особенностью букмарклета является то, что JavaScript-код выполняется в контексте страницы. То есть, вызов букмарклета эквивалентен внедрению соответствующего кода прямо в страницу.

Букмарклеты имеют существенное ограничение: они не работают на страницах, загруженных по HTTPS. Это ограничение предусмотрено в брузерах из соображений безопасности.

Разновидности букмарклетов

Простейшие букмарклеты полностью умещаются в текст «ссылки»

Вот простейший пример — букмарклет, подсчитывающий количество ссылок на странице.

javascript:alert(document.getElementsByTagName('a').length)

Вы можете добавить его в закладки, используя эту ссылку: количество ссылок.

К сожалению, большинство браузеров не позволяют сделать закладку, не перейдя по ссылке, а перейти по ссылке букмарклета, естественно, нельзя. Поэтому, чтобы создать букмарклет, вам придётся воспользоваться меню управления закладками вашего браузера.

Бкумарклет, удаляющий все картинки на странице

javascript:Array.prototype.slice.call(document.getElementsByTagName('img')).forEach(function(e) {e.parentNode.removeChild(e);});

Бывает полезен при чтении на мобильном устройстве или планшете. Большие картинки на многих сайтах не несут какой-то особой смысловой нагрузки, но приводят к разъезжанию контента на маленьких экранах. Этот букмарклет решает проблему.

Сделать картинки принудительно маленькими

javascript:Array.prototype.slice.call(document.getElementsByTagName('img')).forEach(function(e){var x=e.style;x.width='50px';x.float='right';x.clear='both';});

Этот букмарклет поступает с картинками довольно радикально: назначает им всем одинаковую ширину и отправляет их все плавать вправо. Часто это делает страницу на много читабильней на устройствах с маленьким экраном. Хотя шарм может пострадать.

Загружаемые букмарклеты

Для реализации сложной функциональности, требующей объёмного JavaScript-кода, удобно использовать загружаемые букмарклеты.

При этом букмарклет-загрузчик может выглядеть так

javascript:(function(a){a.body.appendChild(a.createElement("script")).src="адрес"})(document);

Data-букмарклеты

Это не совсем букмарклеты в классическом понимании. Они не содержат JavaScript-кода, или содержат его косвенно.

Такой букмарклет содержит полный документ. Хороший пример — редактор в окне браузера в одну строку:

data:text/html,<html contenteditable>

Сделайте этот код адресом закладки и простой редактор всегда под рукой.

Букмарклеты для разработчика

Сразу предупреждаю: эти букмарклеты я написал для себя, для упрощения отладки web-страниц, с которыми мне приходится работать.

Возможно, они не делают каких-то вещей. Может быть они работают не во всех браузерах. Если это так, а вам хотелось бы не так, — пожалуйста обращайтесь.

Надеюсь, они будут вам полезны, возможно с некоторыми модификациями, или как отправная точка для создания чего-то совершенно другого. Может быть вам помогут закомментированные строки.

Второе предупреждение: все букмарклеты — внешние. Мне это удобно, они просто лежат у меня на сайте. Вы может можете ими пользоваться, как внешними, или скопировать их куда-нибудь на свои сервера. С файловой системы букмарклеты не загрузятся — нужен именно HTTP-сервер.

Я предлагаю и настоятельно советую вам загружать минифицированные версии кода. Полный, не сжатый, код я выкладываю на этой странице.

Букмарклет, показывающий URL текущей страницы в виде QR-кода

Код, который надо вставить в букмарку:

javascript:(function(a){a.body.appendChild(a.createElement("script")).src="http://www.michurin.net/bookmarklets/qr-url.min.js"})(document);

Исходный код (просто для интересущихся):

/*jslint white: true, sloppy: true, plusplus: true */
/*globals document */
(function(d) {

  function mkdiv(bw, pad, position, top, left, right, cursor) {
    var names = ['border-width', 'padding', 'position', 'top', 'left', 'right', 'cursor'],
        css = 'border-style: solid; border-color:#000; text-align: center; font: normal bold normal 10px/10px sans-serif;background: #fff none;',
        div = d.createElement('div'),
        i, v;
    for (i = 0; i < 7; ++i) {
      v = arguments[i];
      if (v !== undefined) {
        css += names[i] + ':' + v + (typeof(v) === 'number' ? 'px' : '') + ';';
      }
    }
    div.setAttribute('style', css);
    return div;
  }

  var txt = d.location.href,
      hh = mkdiv(1, 10, 'fixed', 2, 2),
      hi = mkdiv(0, 0),
      ht = mkdiv(0, 0),
      hc = mkdiv(1, 6, 'absolute', 2, undefined, 2, 'pointer'),
      i = d.createElement('img'),
      body = d.getElementsByTagName('body')[0];
  i.setAttribute(
    'src',
    'https://chart.googleapis.com/chart?cht=qr&chld=H&chs=400x400&chl=' +
    encodeURIComponent(txt)
  );
  hi.appendChild(i);
  ht.innerText = txt;
  hc.innerText = 'close';
  hc.addEventListener('click', function() {
    body.removeChild(hh);
  });
  hh.appendChild(hi);
  hh.appendChild(ht);
  hh.appendChild(hc);
  body.appendChild(hh);

}(document));

Для Chrome я оформил это дело в виде расширения. Выглядит так:

Расширение для Chrome, показывающее URL в виде QR-кода

Букмарклет проверки ссылок

Код для букмарки:

javascript:(function(a){a.body.appendChild(a.createElement("script")).src="http://www.michurin.net/bookmarklets/check-links.min.js"})(document);

Код букмарклета для справки:

/*jslint indent:2 white:true sloppy:true plusplus:true maxerr:1 */
/*globals document, window */
// http://www.jslint.com/lint.html
(function(doc, win) {
  if (!win.confirm('Проверить ссылки?')) {
    return;
  }
  var i, rq, h, x, xx = doc.getElementsByTagName('a');
  function blink(e, x) {
    x = !x;
    var s = e.style, c = x ? '#ff0000' : '#000000';
    s.color = '#000000';
    s.backgroundColor = c;
    s.borderWidth = '1px';
    s.borderStyle = 'solid';
    s.borderColor = '#000000';
    setTimeout(function() { blink(e, x); }, 120);
  }
  function cb_gen(e, rq) {
    return function() {
      var t;
      if (rq.readyState === 4) {
        //console.log(rq, rq.status);
        if (rq.status === 200) {
          t = doc.createTextNode(' [OK]');
        } else {
          t = doc.createTextNode(' [ERROR:' + rq.status + ']');
          blink(e);
        }
        e.appendChild(t);
      }
    };
  }
  for(i = 0; i < xx.length; ++i) {
    x = xx[i];
    h = x.getAttribute('href');
    rq = new win.XMLHttpRequest();
    rq.open('GET', h);
    rq.onreadystatechange = cb_gen(x, rq);
    rq.send(null);
    //console.log(i, xx[i]);
  }
}(document, window));

Букмарклет анализа картинок

Код для букмарки:

javascript:(function(a){a.body.appendChild(a.createElement("script")).src="http://www.michurin.net/bookmarklets/show-img-info.min.js"})(document);

Код букмарклета для справки:

/*jslint indent:2 white:true sloppy:true plusplus:true maxerr:1 */
/*globals document, window */
// http://www.jslint.com/lint.html

(function(doc, win) {
  function create_div(css_line) {
    var x = doc.createElement('div');
    if (css_line !== undefined) {
      x.setAttribute('style', css_line);
    }
    return x;
  }
  function addpend_info(target, source, attr_name) {
    var
      d = create_div('background-color: #555; color: #fff; margin: 2px 0 0 0; padding: 2px'),
      t = doc.createTextNode(attr_name + '=' + source.getAttribute(attr_name));
    d.appendChild(t);
    target.appendChild(d);
  }
  var i, d, dd, p, e, ec,
    ee = Array.prototype.slice.call( // immutable копия
      doc.getElementsByTagName('img')
    );
  for(i = 0; i < ee.length; ++i) {
    e = ee[i];
    p = e.parentNode;
    dd = create_div('border: 1px solid #000; margin: 5px');
//    dd = create_div(win.getComputedStyle(e, null).cssText);
    d = create_div();
    ec = e.cloneNode();
//    ec.setAttribute('style', '');
//    ec.setAttribute('class', '');
    d.appendChild(ec);
    dd.appendChild(d);
    addpend_info(dd, e, 'src');
    addpend_info(dd, e, 'alt');
    p.insertBefore(dd, e.nextSibling); // nextSibling=null работает хорошо ,-)
    p.removeChild(e);
  }
}(document, window));