Как я делал свое первое расширение на Chrome

В данной публикации хочу рассказать о том, как я делал расширение на Chrome.

Суть расширения: вертикальная панель слева на каждом сайте, чтобы прокрутиться вверх, как в вк, при повторном клике снова вниз.

manifest.json

{
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "short_name": "__MSG_extShortName__",
  "description": "__MSG_extDescription__",
  "author": "__MSG_author__",
  "version": "1.0",
  "default_locale": "uk", //Стандартная локализация
  "homepage_url": "http://blastorq.url.ph/",
  "icons": {
    "256": "img/icon-256.png" //Иконка
  },
  "browser_action": {
    "default_icon": "img/icon-256.png" //Еще иконка
  },
  "background": {
    "scripts": ["js/script.js"], //Фоновый скрипт
    "css": ["css/style.css"] //Фоновый стиль
  },
  "permissions": ["tabs", "<all_urls>"], //Права
  "content_scripts": [
    {
      "matches": ["<all_urls>"], //На всех страницах
      "js": ["js/script.js"], //Скрипт
      "css": ["css/style.css"], //Стиль
      "run_at": "document_end", //Когда запускать
      "all_frames": false //Только на страницах - не в фреймах
    }
  ],

"web_accessible_resources": ["img/*"] //Разрешаем доступ к картинкам
}

Локализация — messages.json

{
 "extName": {"message": "Fast Scroller"},
 "extShortName": {"message": "FS"},
 "author": {"message": "Давид Манжула, Blast.ORQ"},
 "extDescription": {"message": "Расширение для людей, которые деградировали настолько, что кликают по левой половине любого сайта чтобы прокрутиться вверх, как в вк."}
}

script.js

var $FC_script_code = "if(document.body.scrollTop==0){document.body.scrollTop=$FC_count;document.getElementById('FC_img').src='"+chrome.extension.getURL("img/arrow-top.png")+"';}else{$FC_count=document.body.scrollTop;document.body.scrollTop=0;document.getElementById('FC_img').src='"+chrome.extension.getURL("img/arrow-bottom.png")+"';}";
var $FC_container = document.createElement('div');
$FC_container.innerHTML = '<div class="FC_div" onclick="'+$FC_script_code+'"><img src="'+chrome.extension.getURL("img/arrow-top.png")+'" id="FC_img"></div>';
document.body.appendChild($FC_container.firstChild);
var $FC_count='1';

Здесь всё просто: $FC_script_code — код скрипта, который приклеится к onclick в панели.

Я подал его через отдельную переменную, потому что была проблема с кавычками, плюс так удобнее редактировать.
chrome.extension.getURL(«img/arrow-bottom.png») — функция, которая вертает url файла, например, chrome-extension://plmmlbfmkplbpcblnhbkcngihlagopoo/img/arrow-bottom.png.

Потом создаем div, приклеиваем его к телу документа через appendChild. Правда, я пробовал через innerHTML, но тогда «Вконтакте» не работал.

document.body.innerHTML = document.body.innerHTML + [$FC_container]

Разсмотрим сам код при клике.

if(document.body.scrollTop==0){ //если страница не прокручена...
	document.body.scrollTop=$FC_count; //Скролим вниз, к $FC_count.
	document.getElementById('FC_img').src='[стрелка-вверх]'; //Меняем картинку на стрелку-вверх(через chrome.extension.getURL).
}else{ //В остальных случаях...
	$FC_count=document.body.scrollTop; //Записываем на сколько была прокручена страница в $FC_count.
	document.body.scrollTop=0; //Скролим вверх
	document.getElementById('FC_img').src='[стрелка-вниз]'; //Меняем картинку.
}

Ну и style.css:

.FC_div{
	width: 32px; 
	height: 100%; 
	left:0px;
	top:0px; 
	position:fixed; 
	background:rgba(0, 0, 0, 0.1); 
	z-index:2147483647;  
	-webkit-transition-duration: 1.5s; 
	-o-transition-duration: 1.5s; 
	-moz-transition-duration: 1.5s; 
	transition-duration: 1.5s;
	-webkit-user-select:  none;
	-ms-user-select:  none;
	-moz-user-select:  none;
	cursor: pointer;
}
.FC_div:hover{
	background:rgba(0, 0, 0, 0.5);
	width: 48px; 
} 
.FC_div img{
	left:0px;
	position:absolute;
	bottom:64px;
	width:100%;
}

Просто полоска:

При наведении курсора:

В версии 2 думаю добавить возможность отключать полоску на отдельных сайтах, менять цвета и т.п.

Исходники по ссылке.