...

среда, 11 июня 2014 г.

[Перевод] Как создать свое собственное расширение для Chrome

Любой программист, который знает основы JavaScript, может сделать собственное расширение для Google Chrome. В последствии, вы можете даже заработать на этом, опубликовав это расширение в Chrome Store. Это просто и это бесплатно.

Здесь я покажу вам пример некого расширения, которое я сделал. У меня на самом деле не было никаких хороших идей для нового расширения, но это и не важно на данном этапе. В конечном итоге, я решил написать расширение, которое переводит reddit в режим «только для чтения». Мы реализуем это с помощью скрытия форм для комментариев и ответов на комментарии других.

Наш проект будет состоять из javascript кода, который прячет формы, также нам понадобится иконка для отображения в браузере и манифест в формате JSON, который будет содержать различную информацию по расширению. Я понимаю, что для столь малой задачи нам не нужен jquery, но давайте включим его в проект для удобства и чтобы продемонстрировать как это работает. Скопируйте последнюю версию jquery и сохраните файл в каталоге с проектом, в котором пока еще ничего нет. Для нашего собственного кода, создадим отдельный js-файл и назовем его reddit.js:

$( document ).ready(function() {
$('.usertext-edit').hide();
});




Здесь мы находим все блоки на странице, которые мы хотим скрыть и прячем их от пользователя. В конечном итоге, наша задача решается одной этой строчкой кода.

Теперь нам необходимо написать манифест в формате json, который склеит наш проект воедино и даст браузеру дополнительную информацию о том, как с ним работать:

{
"manifest_version": 2,

"name": "Reddit ReadOnly mode",
"description": "You won't be able to leave comments on reddit after you activate this extension",
"version": "1.0",

"content_scripts": [
{
"matches": ["http://www.reddit.com/*"],
"js": ["jquery.js", "reddit.js"]
}
],

"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://www.reddit.com/*"
]
}





Здесь мы даем минимальное описание по расширению, такое как имя, описания и иконка. Мы также указываем на каких сайтах оно должно запускаться. В нашем случае это reddit.com и все пути на этом сайте (не считая субдомены).

Вы можете загрузить и попробовать, как работает расширение, перед тем как публиковать его в Chrome Store. Зайдите на страницу chrome://extensions/ и убедитесь в том, что режим разработки (Development Mode) включен (переключатель в правом верхнем углу). Нажмите на кнопку «Load unpacked extension…» и укажите директорию с проектом. Это соберет расширение и запустит его локально.

Если вы сделали что-то стоящее и хотите поделиться с Миром своим расширением, следуйте официальной инструкции, которую предоставляет Google.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

Отправить комментарий