Пишемо розширення для браузера Google Chrome
В інтернеті багато сайтів на яких реалізована можливість перегортати сторінку вгору без допомоги миші або смуги прокрутки. Але в той же час ще є сайти де такої реалізації немає. "Чому б не спробувати написати скрипт який би додавав таку кнопку на всі сайти?" - подумав я і взявся за реалізацію. Такі скрипти називаються призначеними для користувача і мають розширення * .user.js. Почитати наприклад можна на Хабре . На жаль без "підводних каменів" не обходиться. Існують деякі відмінності в реалізації userjs під різні браузери. Я зупинюся на описі реалізації нашого userjs скрипта як розширення для браузера Google Chrome.
manifest.json
Обов'язковою для розширення Google Chrome є файл manifest.json в якому описуються параметри, шляхи до зовнішніх файлів (* .js, * .css і ін.), Підтримка версії і т.п. для розширення. Детальніше про фото можна почитати тут . У нашому випадку файл manifest.json виглядає наступним чином:
{ "Manifest_version": 2, "content_scripts": [{ "exclude_globs": [], "include_globs": [ "*"], "js": [ "jquery.js", "backTopUserJS.user.js"], "css": [ "css / style.css"], "matches": [ "http: // * / *", "https: // * / *"], "run_at": "document_end"}], "converted_from_user_script": true, "description": "Back top userscript extension for google chrome", "name": "backTopUserJS", "version": "1"}Для зручності ми використовуємо бібліотеку JQuery яку поклали поруч з файлом manifest.json і основним файлом скрипта (в нашому випадку це backTopUserJS.user.js). Його вміст наступне:
// == UserScript == // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // == / UserScript == function main () {var disp = $ (window) .scrollTop ()> 400? 'Block': 'none'; var $ upButton = $ ( '<div class = "up-button" title = "Вгору" style = "display:' + disp + '"> На початок </ div>'); $ (Document) .find ( 'body'). Append ($ upButton); $ UpButton.click (function () {$ ( 'html, body'). Animate ({scrollTop: 0}, 'slow');}); $ (Window) .scroll (function () {if ($ (window) .scrollTop ()> 400) $ upButton.fadeIn ( 'slow'); else $ upButton.fadeOut ( 'slow');}); }; var script = document.createElement ( 'script'); script.appendChild (document.createTextNode ( '(' + main + ') ();')); (Document.body || document.head || document.documentElement) .appendChild (script);Думаю скрипт досить зрозумілий, щоб його докладно розглядати. Пояснити варто лише останні 3 рядки. Насправді це невеликий хак, який вставляє наш скрипт в код сторінки сайту. Якщо хтось із вас знайде спосіб краще можете написати до коментах свої фікси :)
Установка розширення в браузері
У Google Chrome можна встановлювати користувальницькі скрипти, аналогічно іншим браузерам, але оскільки Google печеться про нашу з вами безпеку, то їх доводиться обертати в розширення для браузера. Розберемо установку по кроках.
Створюємо папку для нашого розширення наприклад так C: \ MyChromeExtensionUserJS
Для кожного розширення створюємо свою директорію наприклад в нашому випадку назвемо її так C: \ MyChromeExtensionUserJS \ backTopUserJS. Додаємо файли розширення в цю директорію.
Заходимо "Про браузері Google Chrome" -> вкладка "Розширення" або в адресному рядку пишемо chrome: // extensions /
Ставимо галочку "Режим розробника" 
Натискаємо кнопку "Завантажити розпаковане розширення" і вибираємо директорію нашого розширення. Натискаємо "OK".
Розширення встановлено і готове до роботи. Щоб оновити розширення після того як ви внесли в нього зміни досить просто натиснути кнопку "Оновити розширення" або в режимі розробника поєднання клавіш Ctrl + R.
підсумок
Подивитися вихідні скрипта можна на github . Скрипт не претендує на звання ідеального, а служить лише прикладом і поштовхом до написання власних скриптів для Google Chrome.
Quot;Чому б не спробувати написати скрипт який би додавав таку кнопку на всі сайти?ScrollTop ()> 400?