МЭСИ. Работаем комфортно с кампусом из chrome

В своем посте для сайта it-imho я писал о способе создания расширения для браузера chrome. В той же статье был пример написания расширения твиттера для данного браузера. Сегодня предлагаю посмотреть маленький пример - как можно "добавлять" пользовательские скрипты на целевую страницу без входа в "просмотр кода".

Собственно, идея для данной задачи появилось после долгих мучений ручного снятия overflow:hidden на сайте виртуального кампуса МЭСИ.

Немного о кампусе МЭСИ


Любой студент МЭСИ сталкивался с большой и неповоротливой системой - виртуальный кампус.
Кроме всего прочего, она известна высокой степенью неудобства и нелогичности.
Так, например, в свойства bode был добавлен класс v4master, который закрывает с помощью overflow:hidden скроллинг страницы по вертикали.
Конечно, пользователи под ie < 9 не чувствуют дискомфорта, однако и ie10, и chrome, и другие браузеры не дают возможность скроллить страницу.
Поэтому поставим перед собой задачу - написать расширение, которое будет исправлять данную "фичу" кампуса.

Реализация. Или проще простого


Об этапах написания скрипта я писал в статье - http://it-imho.ru/?p=239, поэтому здесь приведу именно решение данной задачи:

1) Создание манифеста -
нам необходимо создать корректный файл манифеста. В данном расширении мы будем использовать такую "вещь" как tabs, поэтому добавим ее в permissions:
{
   "name" : "Overflow hidden cleaner" ,
   "version" :"1.0" ,
   "manifest_version" :2,
   "browser_action" :{
   "default_title" : "Очистка overflow" ,
   "default_icon" :"icon.ico" ,
   "default_popup" :"main.html"
   },
   "permissions" :[
    "tabs" , "http://*/*" , "https://*/*"
   ]
   
}

This code was highlighted with code.xnim.ru


2)HTML-файл -
Создаем html, к которому подключаем один-единственный скрипт:
<!DOCTYPE html >
<html >
<head >
   <meta http-equiv="content-type" content="text/html; charset=utf-8" >
</head >
<body >
    <script type="text/javascript" src="ServerQuery.js" > </script >
</body >
</html >

This code was highlighted with code.xnim.ru


3) js - скрипт -
Создаем обработчик на событие "прогрузки" DOM структуры, который будет исполнять необходимый нам скрипт на активной вкладке и закрывать html окно расширения (чтобы расширение работало по принципу кнопки)
document.addEventListener(''DOMContentLoaded'', function () {
       chrome.tabs.executeScript(null,
    {code:"document.body.style.overflow=''visible'';" });
window.close();
   }
);

This code was highlighted with code.xnim.ru

Здесь мы воспользовались tabs, с его помощью мы выполнили на активной вкладке скрипт, который добавляет свойство к элементу body. Таким образом, мы получили расширение, которое будет возврщать скроллы при нажатии на кнопку.

Скачать расширение можно здесь

Чтобы поставить расширение в браузер, необходимо:
Распаковать архив,зайти в Меню -> Инструменты -> Расширения
Здесь поставить галочку напротив «Режим разработчика» и затем добавить распакованную папку созданного расширения.
2013-06-15