Предисловие
Морозным субботним утром, как обычно читая твиттер и попивая горячий кофе, задумался я о синей полосе вверху страницы, предлагающей пользователям опробовать новый интерфейс, который намного лучше нынешнего, но частенько выводящий ошибки о загруженности сервиса. От этого баннера никак нельзя было избаваиться, вот так и родилась идея написания расширения для Google Chrome. Попытаюсь вкратце изложить о том, как я создавал свое первое расширение и регистрировался в Google Web Store.
Создание расширения
Для начала я ознакомился со всевозможной документацией, сосредоточенной на странице Google Chrome Extensions: Developer Documentation. Так же там можно найти множество примеров, загрузить и использовать их для своих расширений.
Разработка расширения начинается с простого, создания папки с именем NewTwitterFix, в которой будут хранится все необходимые файлы.
Далее создается файл manifest.json в нем хранится информация о версии, названии, описании расширения и т.д.
В начале описываем content_scripts файлы, которые выполняются в контексте вебстраницы. Далее заносим информацию об иконках, сделал я их размерностью 48х48 и 128х128 пикселей. Здесь впринципе ничего сложного нет.
{
"content_scripts": [ {
"js": [ "jquery.js", "script.js" ],
"matches": [ "*://*.twitter.com/*" ]
} ],
"description": "Hides the line switching to the new Twitter.",
"icons": {
"128": "icon128.png",
"48": "icon48.png"
},
"name": "New Twitter fix",
"version": "1.1"
}
Более подробно о manifest.json можно прочитать здесь.
Расширение использует библиотеку JQuery v1.4.4 и не имеет кнопки и страницы настроек, поэтому описывать их здесь не стану, а перейду к главному, это основной исполняющий скрипт, в нем создаем куки и читаем их в последующем.
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
$(document).ready(function(){
createCookie("twitswitch", "1", 356)
$('.fixed-banners').remove();
$('.phoenix-skybar').removeClass('phoenix-skybar');
})
Основная часть всего расширения эти строчки:
$('.fixed-banners').remove();
$('.phoenix-skybar').removeClass('phoenix-skybar');Удаляем баннер «fixed-banners» и поднимаем страницу удалением класса «phoenix-skybar» из тега body. Ну и расширение можно считать готовым.
Теперь можно упаковать расширение, для того, чтобы его можно было выложить на какой-нибудь ресурс. Для этого, на той же закладке Расширения нажимаем кнопку Упаковка расширений, указываем путь к папке, содержащей файлы расширения, поле Закрытого ключа в первый раз оставляем пустым.
Но я решил разместить его в chrome web store, оказалось все довольно просто, создаем zip архив содержимого папки и получаем NewTwitterFix.zip заходим в панель добавления расширений под своим Google аккаунтом и заполняем необходимые поля (категории, тэги, описание, загружаем иконку и скриншот). Расширение добавлено
дело за малым, оплатить регистрацию в размере 5$ по карте, и нажать кнопку Publish
Надеюсь это расширение пусть и временно, но будет полезным для пользователей Twitter.
