Полное руководство по букмарклетам

javascript: (() => {
  var style = document.createElement("style");
  style.innerHTML = "body{background:#000;color:rebeccapurple}";
  document.head.appendChild(style);
})();

Более элегантный подход — использовать CSSStyleSheet интерфейс. Этот подход допускает поэтапные обновления и позволяет напрямую обращаться к объектной модели CSS (CSSOM) для чтения селекторов, изменения существующих свойств, удаления или изменения порядка правил, а также проверки вычисляемой структуры. Браузер также таким образом проверяет вводимые значения, что помогает предотвратить ввод некорректного CSS. Это более сложно, но также дает вам больше контроля.

javascript: (() => {
  const sheet = new CSSStyleSheet();
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
  sheet.insertRule("body { border: 5px solid rebeccapurple !important; }", 0);
  sheet.insertRule("img { filter: contrast(10); }", 1);
})();

Поскольку мы пишем CSS для общего использования на любой странице, на которой хотим использовать наш букмарклет, важно помнить, что мы можем столкнуться с проблемами эксклюзивности или конфликта с существующей таблицей стилей страницы. используя !important Обычно это считается плохим запахом кода, но в контексте переопределения неизвестных существующих стилей это разумный способ удовлетворить наши потребности.

границы

К сожалению, существуют некоторые препятствия, которые могут помешать нам использовать букмарклеты. Политики безопасности контента (CSP) являются наиболее полными. CSP — это функция безопасности, которая пытается предотвратить вредоносные действия, такие как атаки с использованием межсайтовых сценариев, позволяя веб-сайтам регулировать то, что может быть загружено. Например, вы можете запретить запуск скриптов на веб-сайте вашего банка. Букмарклет, использующий запросы из разных источников (запросы за пределами текущего веб-сайта), часто блокируется. По этой причине букмарклет в идеале должен быть самодостаточным, а не полагаться на что-то внешнее. Если вы подозреваете, что букмарклет блокируется политиками безопасности веб-сайта, вы можете проверить консоль в инструментах разработчика вашего браузера на наличие ошибок.

Поскольку букмарклеты — это просто URL-адреса, строгих ограничений на их длину нет. При использовании браузеры налагают ограничения, хотя в большинстве случаев они больше, чем те, с которыми вы столкнетесь. В ходе моего собственного тестирования (которое может варьироваться в зависимости от версии и платформы) я обнаружил верхние пределы: Самый большой букмарклет, который я мог создать как в Firefox, так и в Safari, составлял 65536 байт. Firefox не позволит мне создать букмарклет большей длины, а Safari позволит мне создать букмарклет, но при запуске он ничего не сделает. Самый большой букмарклет, который я создал в Chrome, имел длину 9999999 символов, и после этого у меня начались проблемы с взаимодействием с текстовым полем. Если вам нужно немного больше времени, вы можете рассмотреть возможность загрузки сценария из внешнего места, учитывая вышеуказанные ограничения CSP:

javascript:(() => {
  var script=document.createElement('script');
  script.src="https://example.com/bookmarklet-script.js";
  document.body.appendChild(script);
})();

В противном случае вы можете рассмотреть возможность использования инструмента пользовательских сценариев, такого как TamperMonkey, или, если есть что-то более продвинутое, рассмотреть возможность создания собственного расширения для браузера. Другой вариант — создать фрагмент в инструментах разработчика вашего браузера. Букмарклеты лучше всего подходят для коротких фрагментов.

потрясающий букмарклет

Теперь, когда вы знаете, что такое букмарклеты и на что они способны, мы можем взглянуть на некоторые полезные вещи, которые они делают. Однако прежде чем сделать это, я хочу подчеркнуть, что вам следует быть осторожными при запуске букмарклетов, которые вы найдете в Интернете. Букмарклеты, которые вы найдете в Интернете, представляют собой код, написанный кем-то другим. Как всегда, вы должны быть осторожны, бдительны и разумны. Люди могут и писали вредоносные букмарклеты, которые крадут учетные данные учетной записи или что-то еще хуже.

По этой причине, если вы вставите код в начале javascript: В адресной строке браузеры автоматически удаляют его. javascript: Префикс, предотвращающий непреднамеренный запуск букмарклета. Вам необходимо повторно ввести префикс. обойти javascript: Закладки, букмарклеты часто предоставляются в виде ссылок на странице, которые вы должны перетащить в свои закладки.

О конкретных букмарклетах уже говорилось ранее на CSS-Tricks. Учитывая эволюцию браузеров и веб-платформ, многие из них уже устарели, но есть и более современные статьи:

Обязательно читайте комментарии к этим публикациям, так как они наполнены бесчисленными замечательными закладками от сообщества. Кстати о букмарклетах от сообщества:

Если у вас есть золотые букмарклеты, которые вы считаете ценными, обязательно поделитесь ими в комментариях.