Статьи

Реализация букмарклетов в JavaScript

Март 3, 2019

Букмарклеты — это небольшие плагины для ваших браузеров: программы JavaScript, упакованные в javascript: URL-адреса, которые вы добавляете в закладки и начинаете с нажатия на них. Они выполняют операцию на открытой в данный момент веб-странице, например отправляют ее в Twitter. Есть даже букмарклеты, которые преобразуют текущую веб-страницу, например, для добавления значков, которые при нажатии добавляют событие в Календарь Google. Отдельный пост объясняет , что букмарклеты в более подробно. Этот пост расскажет вам, как реализовать букмарклет. В нем представлены методы, инструменты и шаблоны для этого.

Подготовка и методики

Firebug: помогает вам опробовать вашу программу на JavaScript в той же среде, в которой в конечном итоге будет работать закладка. Просто зайдите на интересный сайт и запустите фрагменты кода в его оболочке. Его многострочный редактор кода очень полезен в этом отношении: чтобы включить его, нажмите кнопку расширения в однострочной консоли. Кроме того, Firebug позволяет копировать текущий код в буфер обмена в виде ссылки на букмарклет. Эта ссылка сырая, но работает. Позже мы увидим, как это можно сделать более компактным.

 

Не загрязняйте глобальное пространство имен: вы не хотите портить среду веб-сайта, «в котором» выполняется ваш букмарклет. Например, с помощью выражения немедленного вызова функции (IIFE) переменная t не станет глобальной, как показано ниже.

    (function() {
        var t=document.title;
        console.log("Title: "+t);
    })

Разработка в строгом режиме: если вы включите
строгий режим , JavaScript предупреждает вас о возможных проблемах. Позже вы можете отключить его, чтобы URL-адрес букмарклета был более компактным, но для разработки он очень полезен. Например, приведенный ниже код непреднамеренно создает глобальную переменную, поскольку переменная была забыта. Выход abc.

    (function() {
        t = "abc";
    }());
    console.log(t);

Строгий режим, однако предупреждает вас, что есть проблема:

    (function() {
        "use strict";
        t = "abc";
    }());

Результат: ReferenceError: присвоение необъявленной переменной t

Завершите с неопределенным: в (не Webkit) браузерах, если вы не вернете (или не закончите с!) Неопределенное, результат заменит текущую веб-страницу.

  • Автоматически, если вы используете IIFE: результат функции не определен, если вы ничего не возвращаете.
  • Цепочка утверждений: сделать неопределенным последнее утверждение.
  • Одно выражение: используйте оператор void . Первый букмарклет ниже заменяет текущую веб-страницу. Второй нет. 
    javascript:window.open("http://www.whitehouse.gov/")
        javascript:void window.open("http://www.whitehouse.gov/")

Загрузка сценария . Следующий код показывает, как загрузить сценарий (с помощью библиотеки и т. Д.). Он создает элемент <code>, добавляет атрибуты src и onload и вставляет его непосредственно после элемента <head>. Вставка заставляет скрипт загружаться, и как только загрузка завершится, будет вызвана функция, на которую указывает onload.

    var d = document;
    var s = d.createElement(’script’);
    s.src=’https://ajax.googleapis.com/.../jquery.min.js’;
    s.onload = function() {...};
    d.getElementsByTagName(’head’)[0].appendChild(s);

Предостережение: на букмарклет распространяются те же ограничения, что и на страницу, на которой он выполняется. Таким образом, вызов букмарклета на онлайн-странице не может загружать файлы с вашего локального жесткого диска. Это неудачно, потому что это позволит вам поместить большую часть кода букмарклета в отдельный файл (доступный в автономном режиме).

Собрать вход

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

Разбор HTML вручную: Стандартный DOM предоставляет несколько методов, которые позволяют вам извлекать элементы HTML с текущей страницы.

  • getElementsByClassName ()
  • getElementsByName () [имя атрибута]
  • getElementsByTagName ()
  • getElementById ()

Пример:

    [].forEach.call(
        document.getElementsByTagName("a"),
        function(x) { console.log(x); });

forEach () — это метод массива (доступен в
ECMAScript 5 ). Используя call (), вы можете применить его к не массиву, возвращенному DOM. DOM часто возвращает
массив , как объекты , которые выглядят как массивы, но не являются.

Использование jQuery: jQuery очень полезен для извлечения информации с веб-страницы. Но вы хотите избежать столкновения экземпляра jQuery, который вы загружаете, с экземпляром jQuery, который использует страница. Следующий код показывает вам, как это сделать.

    jQuery.noConflict(true)(function($) {
        // code using jQuery
    });

Это возвращает все к тому, что было до загрузки jQuery. Истинный аргумент означает, что в дополнение к глобальной переменной $ jQuery также будет возвращен в предыдущее значение (если оно есть). На веб-сайте jQuery есть больше информации о
jQuery.noConflict () .

Преобразование HTML с помощью JQuery . Следующий фрагмент кода добавляет текст «BLA:» к каждому тегу <h3> на текущей веб-странице. Вы можете запустить его в Firefox на веб-странице, на которой есть много таких тегов (например, spiegel.de ).

    var d = document;
    var s = d.createElement(’script’);
    s.src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’;
    s.onload = function() {
        jQuery.noConflict(true)(function($){
            $("h3").each(function(i,e) {
                e.innerHTML = "BLA: "+$(e).text();
            });
        });
    };
    d.getElementsByTagName(’head’)[0].appendChild(s);

Производить продукцию

В этом разделе описывается, как показать результаты вашей закладки. У вас всегда есть alert () или prompt () (который позволяет вам показать текст, который будет скопирован пользователю), но обычно лучше представить ваши результаты в HTML.

Показать вывод на текущей вкладке: 

    document.body.innerHTML="<h1>Hi!</h1> Test!";

Показать вывод в новой вкладке: 

    var d=window.open().document;
    d.write("<html><body><h1>Hi!</h1> Test!</body></html>");
    d.close();

Минимизируйте код букмарклета

Yahoo внедрила
YUI Compressor , инструмент, который
минимизирует код вашего букмарклета (делает его настолько маленьким, насколько это возможно, без изменения того, что он делает). YUI Compressor можно загрузить в виде файла JAR, что упрощает его установку.

  • Имена переменных могут быть уменьшены.
  • Имена свойств не могут быть уменьшены.

Пример взаимодействия:

    $ java -jar yuicompressor-2.4.6.jar copy_url.js

Следующий код был уменьшен YUI Compressor.


(function () {var e = window.open (). document; var c = (window.getSelection? «» + window.getSelection (): «»). replace («<«, «<«); var b = {ч: document.location.href, т: document.title, ул: (с «\ п \ п» + с: С?), ш: (с «<br>» + с: в)}; e.write ((«<html> <head> <title> Скопировать ссылку: {t} </ title> </ head> <body> <a href=’ndomh‹’> {t} </a> { sh} <br> <br> <textarea id = ‘text’ cols = ’80 ‘lines = ’10’> {t} {h} \ n \ n <a href=’ndomh‹’> {t} < /a> enjstEST<</textarea></body></html>»).replace(/ndom([az]+) enj/g,function(d,a) enjreturn b [a]})) ; e.close ()} ());

Оригинал выглядит следующим образом.

    (function() {
        var d=window.open().document;
        var s=(window.getSelection?""+window.getSelection():"")
              .replace("<","<");
        var a={
            h: document.location.href,
            t: document.title,
            st: (s ? "\n\n"+s : s), // selection text
            sh: (s ? "<br>"+s : s)  // selection HTML
        };
        d.write(
            ("<html><head><title>Copy link: {t}</title></head><body>"
            ...
            ).replace(/{([a-z]+)}/g, function(g0,g1){return a[g1]})
        );
        d.close();
    }())

Этот код представляет собой
букмарклет «Скопировать ссылку» , который использует два известных метода:

  • Мини-шаблон: HTML-код в окне вывода создается путем вставки значений свойства a в текстовую строку с помощью метода replace (). Встроенные ссылки на значения свойства выглядят так: {t} ссылается на свойство t.
  • Делать что-то с текущим выделенным текстом: window.getSelection () используется только в том случае, если браузер это реализовал.

 

С http://www.2ality.com/2011/06/implementing-bookmarklets.html

39
Share: