Полное руководство по букмарклетам Chrome: создание, использование и более 30 мощных примеров

Введение

Привет, коллега-исследователь Интернета! Я так рада, что вы зашли, потому что сегодня мы собираемся отправиться в увлекательное путешествие в страну Chrome Bookmarklets. Поверьте мне, как только вы откроете для себя магию букмарклетов, вы удивитесь, как раньше жили без них.

Что такое букмарклеты Chrome?

Итак, что такое букмарклеты, спросите вы? Проще говоря, букмарклеты — это небольшие фрагменты кода JavaScript, которые вы можете сохранить в качестве закладок в своем браузере Chrome. Они похожи на волшебные палочки, которые позволяют выполнять всевозможные изящные действия на веб-страницах одним щелчком мыши. Хотите мгновенно изменить цвет фона страницы? Для этого есть букмарклет! Как насчет быстрого извлечения всех ссылок с веб-сайта? Да, букмарклеты помогут вам!

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

Готовы начать? Потрясающий! Давайте вместе исследовать невероятный мир Chrome Bookmarklets.

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

Фантастика! Теперь, когда мы поняли, что такое букмарклеты, давайте углубимся в то, как мы можем создавать и запускать наши собственные букмарклеты в Chrome. Не волнуйтесь, это кусок пирога! Просто следуйте за мной, и вы быстро станете мастером букмарклетов.

Как создать свой собственный букмарклет в Chrome

Итак, вы готовы создать свой первый букмарклет? Потрясающий! Давай сделаем это вместе:

1. Откройте панель закладок Chrome. Прежде всего, убедитесь, что панель закладок видна в Chrome. Для этого нажмите на три вертикальные точки в правом верхнем углу Chrome, наведите указатель мыши на «Закладки» и выберите «Показать панель закладок». Та-да! Теперь вы должны увидеть панель закладок прямо под адресной строкой.

1. Создайте новую закладку: щелкните правой кнопкой мыши на панели закладок и выберите «Добавить страницу». Это откроет маленькое окно, где мы будем творить чудеса.

1. Назовите свой букмарклет: в поле «Имя» дайте своему букмарклету крутое и запоминающееся имя. Вот как оно будет отображаться на панели закладок, поэтому выберите то, что вызовет у вас улыбку.
2. Введите код JavaScript: Вот где начинается самое интересное! В поле «URL» введите javascript:, а затем код JavaScript, который вы хотите, чтобы ваш букмарклет запускал. Не волнуйтесь, если вы не являетесь экспертом в области кодирования — чуть позже я поделюсь несколькими потрясающими примерами!

1. Сохранить и отпраздновать: нажмите кнопку «Сохранить» и вуаля! Ваш собственный букмарклет теперь красиво сидит на панели закладок, готовый к действию.

Как запустить букмарклет в Chrome

Запустить букмарклет — это самое простое! Все, что вам нужно сделать, это:

1. Перейдите на веб-страницу: откройте веб-страницу, на которой вы хотите использовать букмарклет. Это может быть любая страница, которая вам нравится — букмарклеты очень универсальны!
2. Нажмите на букмарклет: найдите свой букмарклет на панели закладок и щелкните по нему. Просто так запустится код JavaScript, и вы увидите, как волшебство произойдет прямо на ваших глазах!

Вот и все! Теперь вы профессионал букмарклетов 😂😂😂. Но мы еще не закончили — давайте взглянем на несколько очень крутых примеров букмарклетов, которые вы можете начать использовать прямо сейчас. Готовый? Пойдем!

Изучение некоторых удивительных примеров букмарклетов

Хорошо, мы делаем большие успехи! Теперь, когда мы знаем, как создавать и запускать букмарклеты в Chrome, пришло время изучить несколько очень крутых и практичных примеров. Я познакомлю вас с каждым из них, чтобы вы могли начать использовать их для улучшения работы в Интернете. Давайте начнем!

Выделить все ссылки на веб-странице

Вы когда-нибудь оказывались на богатой контентом веб-странице и хотели, чтобы вы могли легко найти все ссылки? Что ж, этот букмарклет вас поддержал! Одним щелчком мыши все ссылки на странице будут выделены ярко-желтым цветом. Вот как это сделать:

javascript:(function() { var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; i++) { links[i].style.backgroundColor = 'yellow'; }})();

Просто вставьте этот код в поле URL при создании новой закладки, и все готово!
Этот букмарклет создает пользовательское модальное окно в стиле Tailwind CSS. Он предлагает пользователю ввести цвет или класс цвета фона попутного ветра (например, красный, #ff0000, bg-red-500). Когда пользователь нажимает кнопку Отправить, букмарклет выделяет ссылки указанным цветом или классом.

Чтобы активировать букмарклет на определенной веб-странице, перейдите на веб-страницу и нажмите на букмарклет. Вам будет предложено ввести цвет для выделения ссылки. После того, как вы нажмете «ОК», все ссылки будут выделены.

Чтобы отключить выделение, пользователь может снова щелкнуть букмарклет.

Быстрый подсчет слов

Хотите знать, сколько слов на веб-странице? Независимо от того, проводите ли вы исследование или проверяете объем статьи, этот изящный букмарклет подсчитает все слова для вас и отобразит общее количество в окне предупреждения. Вот код:

javascript:(function(){function createModal(wordCount){var modal=document.createElement('div');modal.id='tw-wordcount-modal';modal.classList.add('fixed','inset-0','bg-black','bg-opacity-50','flex','items-center','justify-center','z-50');var modalContent=document.createElement('div');modalContent.classList.add('bg-white','p-6','rounded-lg','shadow-xl');var modalTitle=document.createElement('h3');modalTitle.classList.add('text-xl','mb-4');modalTitle.textContent='Word Count';var modalBody=document.createElement('p');modalBody.classList.add('text-lg','mb-4');modalBody.textContent='Total words on this page: '+wordCount;var closeButton=document.createElement('button');closeButton.textContent='Close';closeButton.classList.add('mt-4','bg-blue-500','text-white','px-4','py-2','rounded','hover:bg-blue-600','cursor-pointer');closeButton.addEventListener('click',function(){document.getElementById('tw-wordcount-modal').remove();});modalContent.appendChild(modalTitle);modalContent.appendChild(modalBody);modalContent.appendChild(closeButton);modal.appendChild(modalContent);document.body.appendChild(modal);}if(!document.getElementById('tw-bookmarklet-styles')){var link=document.createElement('link');link.rel='stylesheet';link.id='tw-bookmarklet-styles';link.href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css';document.head.appendChild(link);}var text=document.body.innerText;var wordCount=text.trim().split(' ').length;createModal(wordCount);})();

Извлечь теги заголовка

Этот букмарклет извлекает и перечисляет все теги заголовков (от <h1> до <h6>), присутствующие на веб-странице. Он обеспечивает организованное представление заголовков и их иерархии в красивой таблице.

javascript:(function(){function createModal(){var modal=document.createElement("div");modal.id="tw-heading-modal";modal.classList.add("fixed","inset-0","bg-black","bg-opacity-50","flex","items-center","justify-center","z-50");var modalContent=document.createElement("div");modalContent.classList.add("bg-white","p-6","rounded-lg","shadow-xl","w-full","max-w-3xl","overflow-auto","max-h-screen");var modalTitle=document.createElement("h3");modalTitle.classList.add("text-xl","mb-4");modalTitle.textContent="Heading Tags on the Page";var table=document.createElement("table");table.classList.add("table-auto","w-full","text-left","whitespace-no-wrap");var thead=document.createElement("thead");var tr=document.createElement("tr");var th=document.createElement("th");th.classList.add("px-4","py-2"),th.textContent="Heading Level";var th2=document.createElement("th");th2.classList.add("px-4","py-2"),th2.textContent="Content";tr.appendChild(th),tr.appendChild(th2),thead.appendChild(tr),table.appendChild(thead);var tbody=document.createElement("tbody");for(var i=1;i<=6;i++){var elements=document.getElementsByTagName("h"+i);for(var j=0;j<elements.length;j++){var tr2=document.createElement("tr");tr2.classList.add("border-t","border-gray-200");var td1=document.createElement("td");td1.classList.add("px-4","py-2"),td1.textContent="H"+i;var td2=document.createElement("td");td2.classList.add("px-4","py-2"),td2.textContent=elements[j].innerText;tr2.appendChild(td1),tr2.appendChild(td2),tbody.appendChild(tr2)}}table.appendChild(tbody),modalContent.appendChild(modalTitle),modalContent.appendChild(table);var closeButton=document.createElement("button");closeButton.textContent="Close",closeButton.classList.add("mt-4","bg-blue-500","text-white","px-4","py-2","rounded","hover:bg-blue-600","cursor-pointer"),closeButton.addEventListener("click",(function(){document.getElementById("tw-heading-modal").remove()})),modalContent.appendChild(closeButton),modal.appendChild(modalContent),document.body.appendChild(modal)}if(!document.getElementById("tw-bookmarklet-styles")){var link=document.createElement("link");link.rel="stylesheet",link.id="tw-bookmarklet-styles",link.href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",document.head.appendChild(link)}createModal();})();

Этот букмарклет подсчитывает количество слов на странице и отображает его в пользовательском модальном окне, оформленном с помощью Tailwind CSS. Модальное окно включает в себя заголовок, указывающий «Количество слов», текст, отображающий подсчитанное количество слов (например, «Всего слов на этой странице: 500»), и кнопку «Закрыть», которая позволяет закрыть модальное окно.

Создать QR-код для текущей страницы

Хотите поделиться веб-страницей с другом или быстро открыть ее на своем телефоне? Этот букмарклет генерирует QR-код для текущего URL-адреса, что упрощает совместное использование или доступ к странице на других устройствах. Вот как это сделать:

javascript:(function() { let qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + encodeURIComponent(location.href); let modal = document.createElement('div'); modal.className = 'fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50'; let qrImage = document.createElement('img'); qrImage.src = qrUrl; let closeButton = document.createElement('button'); closeButton.textContent = 'Close'; closeButton.className = 'bg-blue-500 text-white px-4 py-2 rounded-md'; closeButton.addEventListener('click', function() { modal.remove(); }); modal.appendChild(qrImage); modal.appendChild(closeButton); document.body.appendChild(modal); })();Just click the bookmarklet, and a new tab will open with the QR code. Simple, right?

Определить перенаправления

С помощью этого букмарклета легко идентифицируйте и анализируйте перенаправления на вашей веб-странице. Он извлекает текущий URL-адрес и предоставляет информацию о коде состояния HTTP и любых местах перенаправления.

javascript:(function(){function createModal(t,e){var n=document.createElement("div");n.id="tw-redirect-modal",n.classList.add("fixed","inset-0","bg-black","bg-opacity-50","flex","items-center","justify-center","z-50"),n.addEventListener("click",(function(t){t.target.id==="tw-redirect-modal"&&n.remove()}));var a=document.createElement("div");a.classList.add("bg-white","p-6","rounded-lg","shadow-xl","w-full","max-w-3xl","overflow-auto","max-h-screen");var o=document.createElement("h3");o.classList.add("text-xl","mb-4"),o.textContent="HTTP Redirect Checker";var r=document.createElement("p");r.classList.add("text-lg","mb-4"),r.textContent=t,r.style.color=e;var i=document.createElement("button");i.textContent="Close",i.classList.add("mt-4","bg-blue-500","text-white","px-4","py-2","rounded","hover:bg-blue-600","cursor-pointer"),i.addEventListener("click",(function(){n.remove()})),a.appendChild(o),a.appendChild(r),a.appendChild(i),n.appendChild(a),document.body.appendChild(n)}if(!document.getElementById("tw-bookmarklet-styles")){var t=document.createElement("link");t.rel="stylesheet",t.id="tw-bookmarklet-styles",t.href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",document.head.appendChild(t)}fetch(location.href,{redirect:"manual"}).then(t=>{var e=t.status;e>=300&&e<400?(createModal("HTTP Status Code: "+e,"black"),createModal("Redirect Location: "+t.headers.get("Location"),"blue")):createModal("No redirect detected.","green")}).catch(t=>createModal("Request failed: "+t,"red"))})();

Выделите ссылки NoFollow

Быстро выделяйте все ссылки «nofollow» на веб-странице с помощью этого букмарклета. Он визуально различает эти ссылки, что упрощает их идентификацию во время SEO-аудита. В модальном окне вам будет предложено ввести цвет фона и рамки для ссылок, которые будут выделены на странице.

javascript:(function(){function createModal(t,e){var n=document.createElement("div");n.id="tw-redirect-modal",n.classList.add("fixed","inset-0","bg-black","bg-opacity-50","flex","items-center","justify-center","z-50"),n.addEventListener("click",(function(t){t.target.id==="tw-redirect-modal"&&n.remove()}));var a=document.createElement("div");a.classList.add("bg-white","p-6","rounded-lg","shadow-xl","w-full","max-w-3xl","overflow-auto","max-h-screen");var o=document.createElement("h3");o.classList.add("text-xl","mb-4"),o.textContent="HTTP Redirect Checker";var r=document.createElement("p");r.classList.add("text-lg","mb-4"),r.textContent=t,r.style.color=e;var i=document.createElement("button");i.textContent="Close",i.classList.add("mt-4","bg-blue-500","text-white","px-4","py-2","rounded","hover:bg-blue-600","cursor-pointer"),i.addEventListener("click",(function(){n.remove()})),a.appendChild(o),a.appendChild(r),a.appendChild(i),n.appendChild(a),document.body.appendChild(n)}if(!document.getElementById("tw-bookmarklet-styles")){var t=document.createElement("link");t.rel="stylesheet",t.id="tw-bookmarklet-styles",t.href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",document.head.appendChild(t)}fetch(location.href,{redirect:"manual"}).then(t=>{var e=t.status;e>=300&&e<400?(createModal("HTTP Status Code: "+e,"black"),createModal("Redirect Location: "+t.headers.get("Location"),"blue")):createModal("No redirect detected.","green")}).catch(t=>createModal("Request failed: "+t,"red"))})();

Отображение атрибутов Alt изображения

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

javascript:(function(){if(!document.getElementById("tw-bookmarklet-styles")){var e=document.createElement("link");e.rel="stylesheet",e.id="tw-bookmarklet-styles",e.href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",document.head.appendChild(e)}var t=document.createElement("div");t.id="tw-img-stats-modal",t.classList.add("fixed","inset-0","bg-black","bg-opacity-50","flex","items-center","justify-center","z-50"),t.addEventListener("click",(function(e){e.target.id==="tw-img-stats-modal"&&t.remove()}));var n=document.createElement("div");n.classList.add("bg-white","p-6","rounded-lg","shadow-xl","w-full","max-w-3xl","overflow-auto","max-h-screen");var a=document.createElement("h3");a.classList.add("text-xl","mb-4"),a.textContent="Image Stats";var c=document.createElement("table");c.classList.add("w-full","text-left","border-collapse","border","border-gray-300","rounded-md"),c.innerHTML="<thead><tr><th class='border border-gray-300 px-4 py-2 bg-gray-100'>Image Src</th><th class='border border-gray-300 px-4 py-2 bg-gray-100'>Alt Text</th><th class='border border-gray-300 px-4 py-2 bg-gray-100'>Preview</th><th class='border border-gray-300 px-4 py-2 bg-gray-100'>Actions</th></tr></thead><tbody></tbody>";var r=c.querySelector("tbody"),o=document.querySelectorAll("img");for(let e of o){var s=e.src||"N/A",i=e.alt||"No alt text",d=document.createElement("tr");d.innerHTML='<td class="border border-gray-300 px-4 py-2 break-all">'+s+'</td><td class="border border-gray-300 px-4 py-2 break-all">'+i+'</td><td class="border border-gray-300 px-4 py-2"><img src="'+s+'" alt="'+i+'" class="w-16 h-auto inline-block object-cover"></td><td class="border border-gray-300 px-4 py-2"><a href="'+s+'" target="_blank" class="text-blue-500 hover:underline">View Image</a></td>',r.appendChild(d)}var l=document.createElement("button");l.textContent="Close",l.classList.add("mt-4","bg-blue-500","text-white","px-4","py-2","rounded","hover:bg-blue-600","cursor-pointer"),l.addEventListener("click",(function(){t.remove()})),n.appendChild(a),n.appendChild(c),n.appendChild(l),t.appendChild(n),document.body.appendChild(t)})();

Использование Schema Markup для расширенного присутствия в поисковой выдаче

Еще одним важным аспектом SEO является использование микроразметки. Разметка схемы — это форма структурированных данных, которая помогает поисковым системам лучше понимать содержание вашей веб-страницы. Внедрив микроразметку, вы можете улучшить отображение своего веб-сайта на страницах результатов поисковых систем (SERP) и повысить рейтинг кликов.

Рассмотрите возможность использования следующего букмарклета, чтобы оценить, содержит ли ваша веб-страница разметку схемы:

javascript:(function(){let modal=document.createElement('div');modal.className='fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50';modal.addEventListener('click',function(event){event.target===modal&&modal.remove()});let container=document.createElement('div');container.className='relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto';container.style.maxHeight='80vh';container.style.overflow='auto';let title=document.createElement('h2');title.className='text-xl font-semibold mb-4';title.textContent='Schema Markup (JSON-LD) Detected:';container.appendChild(title);let jsonLdScripts=document.querySelectorAll('script[type="application/ld+json"]');if(jsonLdScripts.length>0){jsonLdScripts.forEach(script=>{let data=document.createElement('pre');data.className='bg-gray-100 p-4 my-4';data.textContent=JSON.stringify(JSON.parse(script.textContent),null,2);container.appendChild(data);});}else{let message=document.createElement('p');message.textContent='No schema markup (JSON-LD) detected.';container.appendChild(message);}let closeButton=document.createElement('button');closeButton.className='absolute top-4 right-4 px-3 py-1 bg-blue-500 text-white rounded-md';closeButton.textContent='Close';closeButton.addEventListener('click',function(){modal.remove()});container.appendChild(closeButton);modal.appendChild(container);document.body.appendChild(modal);})();

Выделите внешние ссылки

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

javascript:(function(){var t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(t);var e=function(){var e=document.createElement("div");e.className="fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-50 flex items-center justify-center z-50";var t=document.createElement("div");t.className="relative bg-white p-6 max-w-md mx-auto rounded-md shadow-xl overflow-auto";e.appendChild(t);var a=document.createElement("button");a.textContent="Close",a.className="absolute top-2 right-2 bg-gray-300 p-1 rounded-md cursor-pointer",e.appendChild(a),a.addEventListener("click",function(){e.remove()}),e.addEventListener("click",function(a){a.target===e&&e.remove()}),document.body.appendChild(e);return t}(),a=document.querySelectorAll("a"),n=window.location.hostname;for(let t of a){let a=new URL(t.href).hostname;a!==n&&(t.className="bg-blue-200 border border-blue-500")};e.innerHTML='<div class="overflow-auto"><h2 class="text-xl font-semibold mb-4">External Links Highlighted</h2><p class="text-gray-700">All external links have been highlighted with a light blue background and blue border.</p></div>'})();

Найти битые изображения

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

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=function(){var e=document.createElement("div");e.className="fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-50 flex items-center justify-center z-50";var t=document.createElement("div");t.className="relative bg-white p-6 max-w-md mx-auto rounded-md shadow-xl overflow-auto";e.appendChild(t);var n=document.createElement("button");n.textContent="Close",n.className="absolute top-2 right-2 bg-gray-300 p-1 rounded-md cursor-pointer",e.appendChild(n),n.addEventListener("click",function(){e.remove()}),e.addEventListener("click",function(t){t.target===e&&e.remove()}),document.body.appendChild(e);return t}(),n=document.createElement("ul"),o=document.querySelectorAll("img");for(let e of o)e.addEventListener("error",function(){e.style.border="2px solid red";var o=document.createElement("li");o.textContent="Broken Image: "+e.src,n.appendChild(o)});var l=t;l.innerHTML='<div class="overflow-auto"><h2 class="text-xl font-semibold mb-4">Broken Images Detected</h2><p class="text-gray-700">The following images failed to load:</p></div>',l.appendChild(n)})();

Показать скрытые поля формы

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

javascript:(function(){var css="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";var style=document.createElement("style");style.innerHTML=css;document.head.appendChild(style);var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4 overflow-auto";modalBg.appendChild(modal);modalBg.addEventListener("click",function(e){e.target===modalBg&&modalBg.remove()});document.body.appendChild(modalBg);var table=document.createElement("table");table.className="table-auto w-full text-left";var thead=document.createElement("thead");thead.innerHTML="<tr><th class='border px-4 py-2'>Name</th><th class='border px-4 py-2'>Value</th><th class='border px-4 py-2'>HTML Code</th></tr>";table.appendChild(thead);var tbody=document.createElement("tbody");table.appendChild(tbody);var hiddenFields=document.querySelectorAll('input[type="hidden"]');if(hiddenFields.length==0){modal.innerHTML='<h2 class="text-xl font-semibold mb-4">No Hidden Input Fields</h2><p class="text-gray-700 mb-4">There are no hidden input fields on this page.</p>';}else{modal.innerHTML=`<h2 class="text-xl font-semibold mb-4">Hidden Input Fields Made Visible</h2><p class="text-gray-700 mb-4">The following hidden input fields have been made visible on page: <strong>${location.href}</strong></p>`;for(var field of hiddenFields){field.setAttribute("type","text");field.style.backgroundColor="lightyellow";var tr=document.createElement("tr");tr.innerHTML=`<td class='border px-4 py-2'>${field.name}</td><td class='border px-4 py-2'>${field.value}</td><td class='border px-4 py-2'>${field.outerHTML}</td>`;tbody.appendChild(tr);}modal.appendChild(table);}var btnClose=document.createElement("button");btnClose.textContent="Close";btnClose.className="bg-gray-300 p-1 rounded-md mt-4 self-end";btnClose.addEventListener("click",function(){modalBg.remove()});modal.appendChild(btnClose);})();

Просмотр файлов cookie для текущего сайта

Показать все файлы cookie, связанные с текущим веб-сайтом, с помощью этого букмарклета. Он предоставляет обзор имен и значений файлов cookie в консоли браузера.

javascript:(function(){var css="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";var style=document.createElement("style");style.innerHTML=css;document.head.appendChild(style);var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4 overflow-auto";modalBg.appendChild(modal);modalBg.addEventListener("click",function(e){e.target===modalBg&&modalBg.remove()});document.body.appendChild(modalBg);var ul=document.createElement("ul");ul.className="list-disc list-inside";var cookies=document.cookie.split('; ');if(cookies.length==0||cookies[0]==""){modal.innerHTML='<h2 class="text-xl font-semibold mb-4">No Cookies Found</h2><p class="text-gray-700 mb-4">There are no cookies for this site.</p>';}else{modal.innerHTML='<h2 class="text-xl font-semibold mb-4">Cookies for Current Site</h2><p class="text-gray-700 mb-4">The following cookies were found for this site:</p>';for(var cookie of cookies){var li=document.createElement("li");li.textContent=cookie;ul.appendChild(li);}modal.appendChild(ul);}var btnClose=document.createElement("button");btnClose.textContent="Close";btnClose.className="bg-gray-300 p-1 rounded-md mt-4 self-end";btnClose.addEventListener("click",function(){modalBg.remove()});modal.appendChild(btnClose);})();

Предварительный просмотр метатегов и тегов Open Graph

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

javascript:(function(){var css="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";var style=document.createElement("style");style.innerHTML=css;document.head.appendChild(style);var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4 overflow-auto";modalBg.appendChild(modal);modalBg.addEventListener("click",function(e){e.target===modalBg&&modalBg.remove()});document.body.appendChild(modalBg);var ul=document.createElement("ul");ul.className="list-disc list-inside";var metaDescription=document.querySelector('meta[name="description"]');var metaKeywords=document.querySelector('meta[name="keywords"]');var ogTitle=document.querySelector('meta[property="og:title"]');var ogDescription=document.querySelector('meta[property="og:description"]');var ogImage=document.querySelector('meta[property="og:image"]');var liMetaDesc=document.createElement("li");liMetaDesc.innerHTML='<strong>Meta Description:</strong> '+(metaDescription?metaDescription.content:'Not found');ul.appendChild(liMetaDesc);var liMetaKeywords=document.createElement("li");liMetaKeywords.innerHTML='<strong>Meta Keywords:</strong> '+(metaKeywords?metaKeywords.content:'Not found');ul.appendChild(liMetaKeywords);var liOgTitle=document.createElement("li");liOgTitle.innerHTML='<strong>Open Graph Title:</strong> '+(ogTitle?ogTitle.content:'Not found');ul.appendChild(liOgTitle);var liOgDesc=document.createElement("li");liOgDesc.innerHTML='<strong>Open Graph Description:</strong> '+(ogDescription?ogDescription.content:'Not found');ul.appendChild(liOgDesc);var liOgImage=document.createElement("li");liOgImage.innerHTML='<strong>Open Graph Image:</strong> '+(ogImage?ogImage.content:'Not found');ul.appendChild(liOgImage);modal.appendChild(ul);var btnClose=document.createElement("button");btnClose.textContent="Close";btnClose.className="bg-gray-300 p-1 rounded-md mt-4 self-end";btnClose.addEventListener("click",function(){modalBg.remove()});modal.appendChild(btnClose);})();

Проверьте файл robots.txt

Быстрый доступ к файлу robots.txt текущего веб-сайта с помощью этого букмарклета. Он предоставляет вам ссылку для перехода непосредственно к файлу robots.txt, что позволяет вам оценить директивы для поисковых роботов.

javascript:(function(){var t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(t);var e=function(){var t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var e=document.createElement("div");e.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";t.appendChild(e);var n=document.createElement("div");n.className="overflow-auto max-h-96",e.appendChild(n);var o=document.createElement("button");o.textContent="Close",o.className="bg-blue-500 text-white px-3 py-1 rounded-md self-start mt-auto",e.appendChild(o),t.addEventListener("click",function(e){e.target===t&&t.remove()}),o.addEventListener("click",function(){t.remove()}),document.body.appendChild(t);return n}(),n=document.createElement("pre"),o=location.protocol+"//"+location.hostname+"/robots.txt";fetch(o).then(function(t){return t.text()}).then(function(t){n.textContent=t,e.innerHTML='<h2 class="text-xl font-semibold mb-4">Robots.txt Content</h2><p class="text-gray-700 mb-4">The content of the robots.txt file is shown below:</p><a href="'+o+'" target="_blank" class="text-blue-500 mb-4">Open robots.txt in a new tab</a>',e.appendChild(n)}).catch(function(t){console.warn("Error fetching robots.txt:",t)})})();

Проверка отзывчивости веб-страницы

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

javascript:(function(){var t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')",document.head.appendChild(t);var e=document.createElement("div");e.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col",e.appendChild(n);var o=document.createElement("div");o.className="overflow-y-auto flex-1 mb-4",n.appendChild(o);var c=document.createElement("ul");c.className="list-disc list-inside";var i=[320,480,768,1024,1440];i.forEach((function(t){var e=document.createElement("li");e.textContent="Screen width: "+t+"px - ";var i=document.createElement("span");document.documentElement.clientWidth>=t?(i.textContent="Responsive",i.className="text-green-500 font-bold"):(i.textContent="Not Responsive",i.className="text-red-500 font-bold"),e.appendChild(i),c.appendChild(e)})),o.appendChild(c);var r=document.createElement("button");r.textContent="Close",r.className="bg-blue-500 text-white p-1 rounded-md self-end",r.addEventListener("click",(function(){e.remove()})),n.appendChild(r),e.addEventListener("click",(function(t){t.target===e&&e.remove()})),document.body.appendChild(e)})();

Найти повторяющийся контент на странице

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

javascript:(function(){var t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(t);var e=document.createElement("div");e.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";e.appendChild(n);var a=document.createElement("div");a.className="overflow-auto max-h-96",n.appendChild(a);var o=document.createElement("table");o.className="w-full text-left table-auto",a.appendChild(o);var r=document.createElement("thead"),c=document.createElement("tr");r.appendChild(c);var l=document.createElement("th");l.textContent="Word",l.className="px-4 py-2",c.appendChild(l);var d=document.createElement("th");d.textContent="Count",d.className="px-4 py-2",c.appendChild(d),o.appendChild(r);var s=document.createElement("tbody"),i=document.body.innerText.split(/\s+/),u={};i.forEach(function(t){u[t]=(u[t]||0)+1});var m=Object.entries(u).filter(function(t){return t[1]>1});m.sort(function(a,b){return b[1]-a[1]});m.forEach(function(t){var e=document.createElement("tr"),n=document.createElement("td");n.textContent=t[0],n.className="border px-4 py-2",e.appendChild(n);var a=document.createElement("td");a.textContent=t[1],a.className="border px-4 py-2",e.appendChild(a),s.appendChild(e)}),o.appendChild(s);var f=document.createElement("button");f.textContent="Close",f.className="bg-blue-500 text-white px-3 py-1 rounded-md self-start mt-auto",n.appendChild(f),f.addEventListener("click",function(){e.remove()}),e.addEventListener("click",function(t){t.target===e&&e.remove()}),document.body.appendChild(e)})();

Список всех таблиц стилей CSS

Создайте список всех таблиц стилей CSS, связанных с текущей веб-страницей с помощью этого букмарклета. Он отображает URL-адреса таблиц стилей, предоставляя обзор стилей, применяемых к странице. Каждая таблица стилей отображается в виде кликабельной ссылки, которая открывается в новой вкладке при нажатии.

javascript:(function(){var t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(t);var e=document.createElement("div");e.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";e.appendChild(n);var a=document.createElement("div");a.className="overflow-auto max-h-96",n.appendChild(a);var o=document.createElement("ul"),r=document.querySelectorAll('link[rel="stylesheet"]');r.forEach(function(t){var e=document.createElement("li"),n=document.createElement("a");n.href=t.href,n.textContent=t.href,n.target="_blank",e.appendChild(n),o.appendChild(e)}),a.appendChild(o);var c=document.createElement("button");c.textContent="Close",c.className="bg-blue-500 text-white px-3 py-1 rounded-md self-start mt-auto",n.appendChild(c),c.addEventListener("click",function(){e.remove()}),e.addEventListener("click",function(t){t.target===e&&e.remove()}),document.body.appendChild(e)})();

Просмотр ошибок JavaScript на странице

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

javascript:(function(){var css=document.createElement("style");css.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(css);var createModal=function(){var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";modalBg.appendChild(modal);var closeModal=function(){modalBg.remove()};modalBg.addEventListener("click",function(e){e.target===modalBg&&closeModal()});document.body.appendChild(modalBg);return{modal:modal,close:closeModal}};var errorModal=createModal();errorModal.modal.innerHTML='<h2 class="text-xl font-semibold mb-4">JavaScript Errors:</h2><table class="w-full text-left"><thead><tr><th class="border px-2 py-1">Message</th><th class="border px-2 py-1">Source</th><th class="border px-2 py-1">Line</th><th class="border px-2 py-1">Column</th></tr></thead><tbody></tbody></table><button class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4" onclick="this.parentElement.parentElement.remove()">Close</button><button class="bg-red-500 text-white px-4 py-2 rounded-md mt-4 ml-4" onclick="triggerTestError()">Test Error</button>';var tbody=errorModal.modal.querySelector("tbody");window.onerror=function(message,source,lineno,colno,error){var tr=document.createElement("tr");tr.innerHTML='<td class="border px-2 py-1">'+message+'</td><td class="border px-2 py-1"><a href="'+source+'" target="_blank">'+source+'</a></td><td class="border px-2 py-1">'+lineno+'</td><td class="border px-2 py-1">'+colno+'</td>';tbody.appendChild(tr)};window.triggerTestError=function(){throw new Error("This is a test error.")}})();

Выделить все изображения без атрибутов Alt

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

javascript:(function(){var css=document.createElement("style");css.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(css);var createModal=function(){var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";modalBg.appendChild(modal);var closeModal=function(){modalBg.remove()};modalBg.addEventListener("click",function(e){e.target===modalBg&&closeModal()});document.body.appendChild(modalBg);return{modal:modal,close:closeModal}};var colorModal=createModal();var colorForm=document.createElement("form");colorForm.innerHTML='<label class="block mb-2">Highlight Color: <input type="color" name="highlightColor" class="border"></label><button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Submit</button>';colorModal.modal.appendChild(colorForm);colorForm.addEventListener("submit",function(e){e.preventDefault();var color=e.target.elements.highlightColor.value;colorModal.close();var images=document.querySelectorAll('img:not([alt])');var infoModal=createModal();infoModal.modal.innerHTML='<h2 class="text-xl font-semibold mb-4">Images without Alt Attributes</h2><table class="w-full text-left"><thead><tr><th class="border px-2 py-1">Image</th><th class="border px-2 py-1">URL</th></tr></thead><tbody></tbody></table><button class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4" onclick="this.parentElement.parentElement.remove()">Close</button>';var tbody=infoModal.modal.querySelector("tbody");images.forEach(function(img){img.style.border="3px solid "+color;var tr=document.createElement("tr");tr.innerHTML='<td class="border px-2 py-1"><img src="'+img.src+'" style="max-width:100px;max-height:100px;"></td><td class="border px-2 py-1"><a href="'+img.src+'" target="_blank">'+img.src+'</a></td>';tbody.appendChild(tr)})});})();

Показать заголовки ответа сервера

Изучите заголовки ответа сервера для текущего URL-адреса с помощью этого букмарклета. Он извлекает URL-адрес и предоставляет сводку заголовков ответа.

javascript:(function(){var css=document.createElement("style");css.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(css);var createModal=function(){var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";modalBg.appendChild(modal);var closeModal=function(){modalBg.remove()};modalBg.addEventListener("click",function(e){e.target===modalBg&&closeModal()});document.body.appendChild(modalBg);return{modal:modal,close:closeModal}};var headerModal=createModal();headerModal.modal.innerHTML='<h2 class="text-xl font-semibold mb-4">Server Response Headers:</h2><pre class="border p-4 rounded overflow-auto max-h-96"></pre><button class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4" onclick="this.parentElement.parentElement.remove()">Close</button>';var pre=headerModal.modal.querySelector("pre");fetch(location.href,{method:"HEAD"}).then(function(response){for(let[header,value]of response.headers.entries()){pre.textContent+=header+": "+value+"\\n"}}).catch(function(error){pre.textContent="Request failed: "+error})})();

Создать карту сайта внутренних ссылок

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

javascript:(function(){var css=document.createElement("style");css.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(css);var createModal=function(){var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";modalBg.appendChild(modal);var closeModal=function(){modalBg.remove()};modalBg.addEventListener("click",function(e){e.target===modalBg&&closeModal()});document.body.appendChild(modalBg);return{modal:modal,close:closeModal}};var sitemapModal=createModal();sitemapModal.modal.innerHTML='<h2 class="text-xl font-semibold mb-4">Sitemap of Internal Links:</h2><div class="border p-4 rounded overflow-auto max-h-96"></div><button class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4" onclick="this.parentElement.parentElement.remove()">Close</button>';var linksDiv=sitemapModal.modal.querySelector("div");var currentDomain=window.location.hostname;var links=Array.from(document.querySelectorAll("a")).filter(link=>new URL(link.href).hostname===currentDomain);var uniqueLinks=[...new Set(links.map(link=>link.href))];uniqueLinks.forEach(function(link){var linkElem=document.createElement("a");linkElem.href=link;linkElem.textContent=link;linkElem.className="block mb-2 text-blue-500";linksDiv.appendChild(linkElem)})})();

Измерьте время загрузки страницы

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

javascript:(function(){var css=document.createElement("style");css.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(css);var createModal=function(){var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";modalBg.appendChild(modal);var closeModal=function(){modalBg.remove()};modalBg.addEventListener("click",function(e){e.target===modalBg&&closeModal()});document.body.appendChild(modalBg);return{modal:modal,close:closeModal}};var loadTimeModal=createModal();loadTimeModal.modal.innerHTML='<h2 class="text-xl font-semibold mb-4">Page Load Time:</h2><div></div><button class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4" onclick="this.parentElement.parentElement.remove()">Close</button>';var loadTimeDiv=loadTimeModal.modal.querySelector("div");var loadTime=window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;loadTimeDiv.textContent=loadTime+" milliseconds";})();

Анализ распределения анкорного текста

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

javascript:(function(){var css=document.createElement("style");css.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(css);var createModal=function(){var modalBg=document.createElement("div");modalBg.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var modal=document.createElement("div");modal.className="bg-white rounded-md shadow-lg max-w-2xl mx-auto h-3/5 overflow-auto flex flex-col";modalBg.appendChild(modal);var closeModal=function(){modalBg.remove()};modalBg.addEventListener("click",function(e){e.target===modalBg&&closeModal()});var modalHeader=document.createElement("div");modalHeader.className="bg-gray-100 p-4 flex justify-between items-center";modal.appendChild(modalHeader);var modalTitle=document.createElement("h2");modalTitle.className="text-xl font-semibold";modalTitle.textContent="Anchor Text Distribution:";modalHeader.appendChild(modalTitle);var closeButton=document.createElement("button");closeButton.textContent="Close";closeButton.className="bg-blue-500 text-white px-3 py-1 rounded-md";closeButton.addEventListener("click",closeModal);modalHeader.appendChild(closeButton);var content=document.createElement("div");content.className="p-4";modal.appendChild(content);document.body.appendChild(modalBg);return content};var anchorModal=createModal();var anchorList=document.createElement("ul");anchorList.className="list-disc list-inside";anchorModal.appendChild(anchorList);var anchors=document.querySelectorAll("a");var anchorTextCount={};anchors.forEach(function(anchor){var text=anchor.textContent.trim();anchorTextCount[text]=(anchorTextCount[text]||0)+1});Object.entries(anchorTextCount).forEach(function(entry){var listItem=document.createElement("li");listItem.textContent='"'+entry[0]+'": '+entry[1]+" occurrences";anchorList.appendChild(listItem)});})();

Проверьте сведения о сертификате SSL/TLS.

Быстрый доступ к сведениям о сертификате SSL/TLS текущего веб-сайта с помощью этого букмарклета. Он открывает панель информации о безопасности браузера, позволяя вам проверить действительность сертификата и его издателя.

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=document.createElement("div"),n=window.navigator.userAgent.toLowerCase(),a="";-1!==n.indexOf("chrome")?a="<li>Click on the lock icon next to the URL in the address bar.</li><li>Click on 'Certificate' to view SSL/TLS certificate details.</li>":-1!==n.indexOf("firefox")?a="<li>Click on the lock icon next to the URL in the address bar.</li><li>Click on the right arrow next to 'Connection secure'.</li><li>Click on 'More Information' and go to the 'Security' tab.</li><li>Click on 'View Certificate' to view SSL/TLS certificate details.</li>":-1!==n.indexOf("safari")&&(a="<li>Click on the lock icon next to the URL in the address bar.</li><li>Click on 'Show Certificate' to view SSL/TLS certificate details.</li>");var o=location.protocol==="https:"?'<p>Open your browser\'s security information panel to view SSL/TLS certificate details. Follow these steps:</p><ul>'+a+"</ul>":'This site is not using HTTPS. No SSL/TLS certificate details available.';t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50",t.innerHTML='<div class="bg-white rounded-md shadow-lg p-6 max-w-md mx-auto relative flex flex-col space-y-4"><div class="overflow-auto max-h-60vh">'+o+'</div><button class="bg-blue-500 text-white px-4 py-2 rounded-md self-start mt-auto" onclick="this.parentNode.parentNode.remove()">Close</button></div>',document.body.appendChild(t)})();

Извлечь все адреса электронной почты

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

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=document.createElement("div"),n=document.body.innerText,o=/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,a=n.match(o)||[],i=a.length?'<ul>'+a.map(function(e){return"<li>"+e+"</li>"}).join("")+"</ul>":"No email addresses found.";t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50",t.innerHTML='<div class="bg-white rounded-md shadow-lg p-6 max-w-md mx-auto relative flex flex-col space-y-4"><div class="overflow-auto max-h-60vh"><h2 class="text-xl font-semibold mb-4">Email Addresses Found:</h2>'+i+'</div><button class="bg-blue-500 text-white px-4 py-2 rounded-md self-start mt-auto" onclick="this.parentNode.parentNode.remove()">Close</button></div>',document.body.appendChild(t)})();

Отображение предупреждений о специальных возможностях

Определите потенциальные проблемы доступности на веб-странице с помощью этого букмарклета. Он проверяет распространенные ошибки доступности, такие как отсутствующие атрибуты alt и неправильная структура заголовка, и выдает предупреждения в браузере.

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";t.appendChild(n);var o=document.createElement("div");o.className="overflow-auto max-h-60vh";n.appendChild(o);var a=document.createElement("button");a.textContent="Close",a.className="bg-blue-500 text-white px-4 py-2 rounded-md self-start mt-auto",n.appendChild(a),t.addEventListener("click",function(e){e.target===t&&t.remove()}),a.addEventListener("click",function(){t.remove()}),document.body.appendChild(t),o.innerHTML='<h2 class="text-xl font-semibold mb-4">Accessibility Warnings:</h2>',function(){var e=document.querySelectorAll("img:not([alt])");e.length>0&&(o.innerHTML+='<p class="text-red-600">Images without alt attributes detected.</p>');var t=["H1","H2","H3","H4","H5","H6"],n=0;t.forEach((function(t,e){if(document.getElementsByTagName(t).length>0){e>n+1&&(o.innerHTML+='<p class="text-red-600">Improper header structure detected: '+t+" follows H"+(e+1)+".</p>"),n=e}}))}()})();

Просмотр заголовков Cache-Control

Определите заголовки управления кешем, установленные для текущей веб-страницы с помощью этого букмарклета. Он извлекает текущую веб-страницу с помощью HTTP-запроса HEAD и отображает значение заголовка «cache-control». Если заголовок «cache-control» не найден, отображается сообщение о том, что заголовки «cache-control» не найдены.

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";t.appendChild(n);var o=document.createElement("div");o.className="overflow-auto max-h-60vh";n.appendChild(o);var a=document.createElement("button");a.textContent="Close",a.className="bg-blue-500 text-white px-4 py-2 rounded-md self-start mt-auto",n.appendChild(a),t.addEventListener("click",function(e){e.target===t&&t.remove()}),a.addEventListener("click",function(){t.remove()}),document.body.appendChild(t),fetch(location.href,{method:"HEAD"}).then(function(e){o.innerHTML='<h2 class="text-xl font-semibold mb-4">Cache-Control Headers:</h2>';var t=e.headers.get("cache-control");t?o.innerHTML+=t:o.innerHTML+="No cache-control headers found."}).catch(function(e){o.innerHTML='<h2 class="text-xl font-semibold mb-4">Request failed:</h2>'+e})})();

Проверить наличие смешанного контента

Определите смешанный контент на веб-странице с помощью этого букмарклета. Он обнаруживает небезопасные ресурсы HTTP на странице HTTPS и предоставляет список таких ресурсов в браузере. Если смешанное содержимое не обнаружено, модальное окно также указывает на это. Если страница не использует HTTPS, в модальном окне указано, что проверка смешанного содержимого неприменима.

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";t.appendChild(n);var o=document.createElement("div");o.className="overflow-auto max-h-60vh";n.appendChild(o);var a=document.createElement("button");a.textContent="Close",a.className="bg-blue-500 text-white px-4 py-2 rounded-md self-start mt-auto",n.appendChild(a),t.addEventListener("click",function(e){e.target===t&&t.remove()}),a.addEventListener("click",function(){t.remove()}),document.body.appendChild(t),o.innerHTML='<h2 class="text-xl font-semibold mb-4">Mixed Content Check:</h2>',function(){if(location.protocol==="https:"){var e=[];document.querySelectorAll('link[href^="http:"], script[src^="http:"], img[src^="http:"]').forEach((function(t){e.push(t.href||t.src)})),e.length>0?(o.innerHTML+='<p class="text-red-600">Mixed Content Detected:</p>',e.forEach((function(e){o.innerHTML+='<p class="text-gray-700">'+e+"</p>"}))):o.innerHTML+='<p class="text-green-600">No mixed content detected.</p>'}else o.innerHTML+='<p class="text-yellow-600">This page is not using HTTPS. Mixed content check is not applicable.</p>'}()})();

Список всех фреймов на странице

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

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";t.appendChild(n);var o=document.createElement("div");o.className="overflow-auto max-h-60vh";n.appendChild(o);var a=document.createElement("button");a.textContent="Close",a.className="bg-blue-500 text-white px-4 py-2 rounded-md self-start mt-auto",n.appendChild(a),t.addEventListener("click",function(e){e.target===t&&t.remove()}),a.addEventListener("click",function(){t.remove()}),document.body.appendChild(t),o.innerHTML='<h2 class="text-xl font-semibold mb-4">Iframes on Page:</h2>',function(){var e=document.querySelectorAll("iframe");e.length>0?e.forEach((function(e){o.innerHTML+='<p class="text-gray-700">'+e.src+"</p>"})):o.innerHTML+='<p class="text-yellow-600">No iframes found on the page.</p>'}()})();

Отображение метатегов социальных сетей

Изучите метатеги социальных сетей веб-страницы с помощью этого букмарклета. Он извлекает и отображает метатеги Open Graph и Twitter Card в консоли браузера, позволяя вам оценить их содержимое.

javascript:(function(){var e=document.createElement("style");e.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(e);var t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";var n=document.createElement("div");n.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto flex flex-col space-y-4";t.appendChild(n);var o=document.createElement("div");o.className="overflow-auto max-h-60vh";n.appendChild(o);var a=document.createElement("button");a.textContent="Close",a.className="bg-blue-500 text-white px-4 py-2 rounded-md self-start mt-auto",n.appendChild(a),t.addEventListener("click",function(e){e.target===t&&t.remove()}),a.addEventListener("click",function(){t.remove()}),document.body.appendChild(t),o.innerHTML='<h2 class="text-xl font-semibold mb-4">Social Media Meta Tags:</h2>',function(){var e=document.querySelectorAll('meta[property^="og:"]'),t=document.querySelectorAll('meta[name^="twitter:"]');(e.length>0||t.length>0)?(e.forEach((function(e){o.innerHTML+='<p class="text-gray-700">'+e.getAttribute("property")+": "+e.content+"</p>"})),t.forEach((function(e){o.innerHTML+='<p class="text-gray-700">'+e.getAttribute("name")+": "+e.content+"</p>"}))):o.innerHTML+='<p class="text-yellow-600">No social media meta tags found on the page.</p>'}()})();

Отображение метатега Mobile Viewport

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

javascript:(function(){let t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')",document.head.appendChild(t);let e=function(){let t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50",t.addEventListener("click",function(e){e.target===t&&t.remove()});let e=document.createElement("div");e.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto";let n=document.createElement("div");n.className="overflow-auto max-h-96";let o=document.createElement("button");o.textContent="Close",o.className="bg-blue-500 text-white px-3 py-1 rounded-md self-start mt-auto",o.addEventListener("click",function(){t.remove()});let r=document.createElement("table");r.className="table-auto";let c=document.createElement("thead"),s=document.createElement("tr"),a=document.createElement("th");a.textContent="Mobile Viewport Meta Tag",s.appendChild(a),c.appendChild(s),r.appendChild(c);let i=document.createElement("tbody");let d=document.querySelector('meta[name="viewport"]');d?i.innerHTML=`<tr><td>${d.content}</td></tr>`:i.innerHTML="<tr><td>No mobile viewport meta tag found.</td></tr>",r.appendChild(i),e.appendChild(r),e.appendChild(o),e.appendChild(n),t.appendChild(e),document.body.appendChild(t)};e()})();

Обнаружение перенаправлений

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

javascript:(function(){let t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(t);let e=function(){let t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50",t.addEventListener("click",function(e){e.target===t&&t.remove()});let e=document.createElement("div");e.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto";let n=document.createElement("button");n.textContent="Close",n.className="bg-blue-500 text-white px-3 py-1 rounded-md self-start mt-auto",n.addEventListener("click",function(){t.remove()});let o=document.createElement("pre");fetch(location.href,{redirect:"manual"}).then(t=>{t.type==="opaqueredirect"?o.textContent=`Redirect detected. Redirect URL: ${t.url}`:o.textContent="No redirect detected."}).catch(t=>{console.warn("Request failed:",t)}),e.appendChild(o),e.appendChild(n),t.appendChild(e),document.body.appendChild(t)};e()})();

Извлечение данных разметки схемы

Проанализируйте данные разметки Schema (структурированные данные), присутствующие на веб-странице, с помощью этого букмарклета. Он извлекает и отображает структурированные данные JSON-LD или Microdata в консоли браузера, позволяя вам оценить разметку, используемую для поисковой оптимизации.

javascript:(function(){let t=document.createElement("style");t.innerHTML="@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css')";document.head.appendChild(t);let e=function(){let t=document.createElement("div");t.className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50",t.addEventListener("click",function(e){e.target===t&&t.remove()});let e=document.createElement("div");e.className="relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto";let n=document.createElement("button");n.textContent="Close",n.className="bg-blue-500 text-white px-3 py-1 rounded-md self-start mt-auto",n.addEventListener("click",function(){t.remove()});let o=document.createElement("pre");console.log("Schema Markup Data:");let i=document.querySelectorAll('script[type="application/ld+json"]'),r=document.querySelectorAll('[itemscope]');i.length>0&&(console.log("JSON-LD Structured Data:"),i.forEach(e=>{let t=document.createElement("div");t.textContent=e.textContent,o.appendChild(t)})),r.length>0&&(console.log("Microdata Structured Data:"),r.forEach(e=>{let t=document.createElement("div");t.textContent=e.outerHTML,o.appendChild(t)})),0===i.length&&0===r.length&&console.log("No Schema markup data found."),e.appendChild(o),e.appendChild(n),t.appendChild(e),document.body.appendChild(t)};e()})();

Показать заголовок и описание страницы

Отображение заголовка и метаописания веб-страницы с помощью этого букмарклета. Он извлекает тег заголовка и метатег описания и предоставляет их содержимое в консоли браузера.

javascript:(function(){let modal=document.createElement('div');modal.className='fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50';modal.addEventListener('click',function(event){event.target===modal&&modal.remove()});let container=document.createElement('div');container.className='relative bg-white rounded-md shadow-lg p-6 max-w-md mx-auto';container.style.maxHeight='80vh';container.style.overflow='auto';let title=document.createElement('h2');title.className='text-xl font-semibold mb-4';title.textContent='Page Title and Description';container.appendChild(title);let table=document.createElement('table');table.className='border-collapse';let row1=document.createElement('tr');let row2=document.createElement('tr');let col1=document.createElement('td');col1.className='border border-gray-300 px-4 py-2';col1.textContent='Title';row1.appendChild(col1);let col2=document.createElement('td');col2.className='border border-gray-300 px-4 py-2';col2.textContent=document.title;row2.appendChild(col2);let metaDescription=document.querySelector('meta[name="description"]');if(metaDescription){let col3=document.createElement('td');col3.className='border border-gray-300 px-4 py-2';col3.textContent='Description';row1.appendChild(col3);let col4=document.createElement('td');col4.className='border border-gray-300 px-4 py-2';col4.textContent=metaDescription.content;row2.appendChild(col4);}table.appendChild(row1);table.appendChild(row2);container.appendChild(table);modal.appendChild(container);document.body.appendChild(modal);})();

Список всех типов схем со сводкой

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

javascript:(function(){var t=document.createElement("link");t.rel="stylesheet",t.href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",document.head.appendChild(t);var e=document.querySelectorAll('script[type="application/ld+json"]'),n=document.querySelectorAll("[itemscope]"),o=[];if(e.length>0&&e.forEach(function(e){try{var n=JSON.parse(e.textContent);Array.isArray(n)?n.forEach(function(e){o.push(e)}):o.push(n)}catch(e){console.warn("Error parsing JSON-LD data:",e)}}),n.length>0&&n.forEach(function(e){var t=e.getAttribute("itemtype"),n={},r=e.querySelectorAll("[itemprop]");r.forEach(function(e){var r=e.getAttribute("itemprop"),t=e.content||e.textContent.trim();n[r]=t}),o.push({"@context":"https://schema.org","@type":t,...n})}),o.length>0){var r=document.createElement("div");r.innerHTML='<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"><div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"><div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div><span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span><div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"><div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"><div class="sm:flex sm:items-start"><div class="mt-3 text-center sm:mt-0 sm:text-left w-full"><h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Schema Types with Summary</h3><div class="mt-2">'+o.map(function(e){return'<p class="text-sm text-gray-500"><strong>Schema Type:</strong> '+e["@type"]+"<br><strong>Summary:</strong><br><pre>"+JSON.stringify(e,null,2)+"</pre></p>"}).join("")+'</div></div></div><div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"><button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="this.closest(\'.fixed\').remove();">Close</button></div></div></div></div>',document.body.appendChild(r)}else alert("No Schema markup data found.")})();

Это всего лишь несколько примеров невероятных вещей, которые могут делать букмарклеты. Не стесняйтесь экспериментировать и создавать свои собственные — букмарклеты созданы для того, чтобы заставить Интернет работать на вас!

Оставайтесь с нами, потому что далее мы собираемся ответить на некоторые распространенные вопросы и неправильные представления о Chrome Bookmarklets. Давайте развеем некоторые мифы вместе!

Понимание букмарклетов: распространенные вопросы и развеянные мифы

Мы прошли долгий путь в нашем путешествии по Chrome Bookmarklets, и вы уже являетесь поклонником букмарклетов! Но эй, я понимаю — букмарклеты могут вызвать некоторые вопросы, и есть несколько неправильных представлений. Итак, в этом разделе давайте проясним ситуацию и ответим на некоторые распространенные вопросы о букмарклетах. Давайте начнем!

В чем разница между букмарклетом и расширением для браузера?

Отличный вопрос! Хотя букмарклеты и расширения для браузера могут улучшить работу в Интернете, между ними есть несколько ключевых отличий:

• Простота. Букмарклеты — это простые фрагменты кода JavaScript, сохраненные в виде закладок. Расширения браузера, с другой стороны, более сложны и часто включают несколько файлов и языков программирования.
• Установка: букмарклеты можно создавать и использовать всего несколькими щелчками мыши, а расширения для браузера требуют установки из интернет-магазина или с веб-сайта разработчика.
• Разрешения: букмарклеты запускаются только при нажатии на них и не требуют специальных разрешений. Расширениям может потребоваться разрешение на доступ к определенным данным или функциям в вашем браузере.

Короче говоря, букмарклеты легкие и простые в использовании, что делает их идеальными для быстрых задач и настроек!

Безопасны ли букмарклеты?

Безопасность превыше всего, верно? Букмарклеты, как правило, безопасны, но следует помнить о нескольких вещах:

• Источник: используйте букмарклеты только из надежных источников или создавайте свои собственные. Будьте осторожны с букмарклетами, которые запрашивают конфиденциальную информацию или выполняют неожиданные действия.
• Код: Найдите минутку, чтобы просмотреть код JavaScript в букмарклете. Если что-то выглядит подозрительно или вы этого не понимаете, лучше держаться подальше.

Проявив немного бдительности, вы можете смело пользоваться преимуществами букмарклетов!

Могут ли букмарклеты получить доступ к моим личным данным?

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

И вот оно! Я надеюсь, что это прояснит ситуацию и придаст вам уверенности в изучении мира букмарклетов Chrome. Не забывайте, букмарклеты предназначены для того, чтобы сделать Интернет более приятным и персонализированным местом для вас!

Далее мы рассмотрим некоторые потенциальные проблемы, с которыми вы можете столкнуться при работе с букмарклетами, и способы их устранения. Не волнуйся, я тебя прикрою!

Устранение распространенных проблем с закладками в Chrome

Эй, даже лучшие из нас иногда икают! Хотя использование Chrome Bookmarklets обычно проходит гладко, могут быть моменты, когда все идет не так, как планировалось. Но не волнуйтесь — я здесь, чтобы помочь вам справиться с любыми трудностями и сделать вашу игру с букмарклетом надежной. Давайте рассмотрим некоторые распространенные проблемы, с которыми вы можете столкнуться, и способы их устранения.

«Мой букмарклет не работает!»

О, нет! Если ваш букмарклет не творит чудес, вот что нужно проверить:

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

«Я случайно удалил свой букмарклет!»

Не беспокойтесь, это случается с лучшими из нас! Если вы случайно удалили букмарклет с панели закладок, вы можете создать его заново, используя те же шаги, которые мы рассмотрели ранее. Если вы не помните код, проверьте, есть ли у вас резервная копия, или обратитесь к исходному источнику букмарклета.

«Код букмарклета выглядит зашифрованным в диспетчере закладок!»

Диспетчер закладок Chrome иногда показывает код букмарклета в виде одной зашифрованной строки. Это нормально! Вам не нужно редактировать его прямо в менеджере закладок. Если вы хотите изменить код, скопируйте его в редактор кода, внесите изменения, а затем создайте новый букмарклет с обновленным кодом.

«Могу ли я использовать букмарклеты на мобильных устройствах?»

Да, ты можешь! Букмарклеты также можно использовать в мобильных браузерах, таких как Chrome для Android или Safari для iOS. Процесс добавления и запуска букмарклетов может немного отличаться на мобильных устройствах, поэтому обязательно ознакомьтесь с инструкциями для вашего конкретного устройства.

И это обертка по устранению неполадок! Я надеюсь, что эти советы помогут вам преодолеть любые препятствия, связанные с букмарклетом, и обеспечат вам бесперебойную работу.

Было здорово исследовать мир букмарклетов Chrome вместе с вами. Подводя итог, давайте кратко подведем итоги и поделимся некоторыми мыслями об этом удивительном инструменте, который может изменить ваш опыт работы в Интернете. Закончим крепко!

Заключение: раскрытие возможностей букмарклетов Chrome

Что ж, друг мой, мы подошли к концу нашего невероятного путешествия по стране букмарклетов Chrome! Мне было очень приятно вести вас на этом пути, и я очень рад видеть, что вы стали профессионалом в области букмарклетов.

Давайте на минутку поразмыслим над всем, что мы узнали:

• Что такое букмарклеты? Мы обнаружили, что букмарклеты — это небольшие, но мощные фрагменты кода JavaScript, которые можно сохранять в качестве закладок в Chrome. Они похожи на волшебные ярлыки, которые улучшают и настраивают ваш опыт просмотра.
• Создание и запуск букмарклетов. Мы научились создавать собственные букмарклеты и запускать их в Chrome всего несколькими щелчками мыши. Мы изучили классные примеры, такие как выделение ссылок, подсчет слов и создание QR-кодов.
• Понимание и устранение неполадок. Мы ответили на распространенные вопросы, развеяли мифы о букмарклетах и ​​узнали, как устранять неполадки. Мы также узнали о различиях между букмарклетами и расширениями браузера, а также о важности безопасности букмарклетов.

Со всеми этими знаниями вы теперь готовы исследовать безграничные возможности букмарклетов. Независимо от того, повышаете ли вы производительность, улучшаете доступность или просто развлекаетесь, букмарклеты здесь, чтобы сделать Интернет более персонализированным и приятным местом для вас.

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

Если у вас есть какие-либо вопросы или вы хотите узнать о моих услугах, пожалуйста, не стесняйтесь обращаться к моему веб-сайту @ https://nzouat.com/contact, и я буду более чем счастлив помочь вам.