Как попасть в Chrome Web Store или пишем расширение

Blog by admin

Предисловие

Морозным субботним утром, как обычно читая твиттер и попивая горячий кофе, задумался я о синей полосе вверху страницы, предлагающей пользователям опробовать новый интерфейс, который намного лучше нынешнего, но частенько выводящий ошибки о загруженности сервиса. От этого баннера никак нельзя было избаваиться, вот так и родилась идея написания расширения для 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');
})

Основная часть всего расширения эти строчки:

  $(<font color="#A31515">'.fixed-banners'</font>).remove();
  $(<font color="#A31515">'.phoenix-skybar'</font>).removeClass(<font color="#A31515">'phoenix-skybar'</font>);

Удаляем баннер «fixed-banners» и поднимаем страницу удалением класса «phoenix-skybar» из тега body. Ну и расширение можно считать готовым.

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

Но я решил разместить его в chrome web store, оказалось все довольно просто, создаем zip архив содержимого папки и получаем NewTwitterFix.zip заходим в панель добавления расширений под своим Google аккаунтом и заполняем необходимые поля (категории, тэги, описание, загружаем иконку и скриншот). Расширение добавлено