Расширения браузера были повсеместно в последнее время. Последние несколько дней были для меня поразительными, так как я начал изучать эти изящные мелочи. Я многому научился, кому-то просто везет, кому-то после многих проб и ошибок, а кому-то после нескольких раз просмотра документации.
В этой серии я планирую осветить тему создания расширений для браузера с помощью Google Chrome, который, несомненно, является моим предпочтением. В этой серии я расскажу о многих крошечных мелочах, некоторые из которых поначалу были не столь очевидны для меня.
В первой части этой серии мы сначала поймем, что именно является расширением Chrome. И какие основные компоненты вам понадобятся для создания расширения Chrome с нуля. Вы можете использовать эту серию в качестве пошагового руководства для создания своего первого расширения Chrome.
Что покрывается?
Этот пост намеревается ответить на следующие вопросы
- Как создать расширения Google Chrome?
- Что мне нужно изучить, чтобы создать расширение Google Chrome?
- Как установить мои собственные расширения в Google Chrome?
- Как использовать настройку иконки для расширения Google Chrome?
Итак, что же такое расширение для браузера?
Ну, если вы ожидаете, что я отвечу, что такое расширение для браузера, вы не в том месте, приятель. Тем не менее, просто чтобы дать вам краткое представление, расширение браузера — это не что иное, как небольшой фрагмент функциональности, который вы можете добавить в свой браузер, очень похожий на способ установки приложений на вашем персональном компьютере / ноутбуке / других устройствах.
Почему Google Chrome?
Потому что мне нравится хром (да, вы правильно догадались, я немного предвзятый!)
Итак, давайте начнем наше путешествие с попытки понять, как создавать расширения для Google Chrome.
Начиная
Расширение в Google Chrome — это не что иное, как веб-страница.
Подождите. Позвольте этой линии погрузиться на мгновение.
Вау! Какая! Расширение? Это веб-страница? Ты дурачишь меня!
К счастью / к сожалению (каким бы образом вы не думали об этом), я не шучу. Когда я впервые понял, что расширения Google Chrome — это не что иное, как веб-страницы, и вам не нужно знать какой-либо дополнительный язык, кроме javascript, css и html, чтобы создать расширение chrome, мое сердце буквально подпрыгнуло от радости. Если вы являетесь поклонником jQuery (как и я), вы были бы рады узнать, что вы можете использовать все jQuery, которые вы хотите в расширении Google Chrome. Зачем? Просто потому, что это не что иное, как веб-страница!
Уф. Я надеюсь, что это немного облегчит вам, если вы будете сдерживать изучение того, как создавать расширения, опасаясь, что вам понадобится еще один новый язык в вашем арсенале. Но есть несколько предостережений. Google Chrome — это своего рода специальные веб-страницы. Я говорю, что они особенные, потому что эти страницы имеют доступ к API расширения Chrome javascript. Таким образом, вы можете использовать весь известный вам javascript, но вам нужно узнать о нескольких функциях, которые делают расширение работающим как расширение. Но не говорите мне, что вы ожидали, что это будет кровать из роз!
Проникнуть в мелкие мелочи вещей
Когда вы думаете о расширениях Chrome, подумайте о 2 основных вещах
- Файл для описания вашего расширения.
- Скрытая страница, которая работает в фоновом режиме — фоновая страница расширения.
Конечно, есть много других страниц, и вы можете добавить массу других вещей, которые вы можете сделать, чтобы сделать ваше расширение еще более крутым и модным, но так как это пошаговое руководство, я буду говорить о каждой из них. компоненты по одному настолько тщательно, насколько позволяет мое время (и настроение).
Файл дескриптора расширения
I like to think of the descriptor file as the heart of a chrome extension. Without it, the browser would have no way of identifying your extension. Its like spiderman, it has great power and hence great responsibility too. Don’t worry, you dont need to battle computer animated creatures to make our spiderman. In fact, its quite the opposite. If you have worked on javascript, I am pretty sure that you might have heard about JSON. It stands for JavaScript Object Notation. If you feel that I mentioned something out of your ken, you need to go back to google and first know what JSON is all about. Fear not, its pretty easy and will barely take you 5-10 mins to understand it. I had also written a post a couple of days ago where I discussed the difference between a
JSON and JSONP, in case you are curious.
JSON and JSONP, in case you are curious.
Coming back to our heart/spiderman, the descriptor file has a predefined name —
manifest.json and it contains nothing but a JSON object that describes your extension. As the bare minimum, you need to specify the name and the version of your extension.
manifest.json and it contains nothing but a JSON object that describes your extension. As the bare minimum, you need to specify the name and the version of your extension.
Creating Our First Extension.
We need to think of a name to give our extension. Lets say, we call it «Mr 0». Its not the letter O, its the numeral zero. So, our extension is Mr zero. Why the peculiar name «Mr 0»? Well, everything in programming starts with a 0, like array indexes and blah blah, and even we human beings started from a 0, a zygote, or an egg, or whatever!.
First create a new folder, and call it, lets say chrome_ext and then create a manifest file with the name manifest.json in the newly created folder Now, we need to specify the name and the version of our extension in the manifest file using json. Here’s how we do it
{
"name": "Mr0",
"version": "1.0"
}
That is just about what you need in order to be able to install an extension into your google chrome browser. (Observe that the name of the extension is independent of the name of the folder which contains the extension files, which in our case is chrome_ext). In order to install an extension from your local drive, you need to open the extensions page in google chrome via the Settings(the wrench on the top right)-> Tools->Extensions. A browser window opens up enlisting all of your installed extensions if you have any.
Расширения, которые вы загружаете из интернет-магазина, доступны в определенном формате — файлы .crx. Поскольку вы просто устанавливаете расширение из папки, вам необходимо включить «
режим разработчика » на панели списка расширений Chrome. Итак, установите флажок «Режим разработчика», и на экране появятся 2 дополнительные кнопки, как показано на скриншоте.
Нажмите на кнопку с надписью «загрузить распакованное расширение» и перейдите к папке «chrome_ext», которую мы создали ранее, и нажмите «ОК». Как только вы нажмете ОК, расширение будет установлено, и вы сможете увидеть свое первое расширение Chrome среди списка установленных расширений. И рад, потому что Mr0 только что родился!
Расширение лица
Well, our newly born Mr0, is pretty dumb(as of now). In fact, he is absolutely useless. After all, how can be of any use? He just has a name. In order to be able to seen by others, Mr0 needs a face. So lets give him a face. The face that we are going to give Mr0 is that of an Icon in the toolbar. In order to give Mr0 and icon, we need to specify the image for the icon in the manifest file.
Icons in the chrome toolbar are not more than 19×19 pixels. If you use a larger image, it will simply be scaled down to fit this size. I am going to keep it pretty simple. I am just going to create a 19×19 pixel image using paint and give it a dark red color. Nothing fancy. You can use any image you wish. I am going to name my image «icon19.jpg» and I will place it in a folder called «images» under my chrome_ext directory.
Here’s how we can reference this image in the manifest file.
{
"name": "Mr0",
"version": "1.0",
"browser_action": {
"default_icon": "images/icon19.jpg"
}
}
That was pretty simple, wasn’t it? We were quickly able to reference the image relative to the current file(the current file in this case being the manifest.json file).
Also notice that unlike the name and version attributes, the default_icon attribute is a nested attribute under the browser_action attribute. The browser action attribute is a map that contains key value pairs to describe different elements that are used to give the extension a user interface.
Теперь, если вы перезагрузите свое расширение, вы сможете увидеть маленький значок в верхней части панели инструментов Chrome, а если навести на него указатель мыши, появится небольшая подсказка, которая отображает имя вашего расширения. В этом случае он (гордо) показывает Mr0 в появившейся подсказке.
У нашего расширения Mr0 теперь есть лицо. Ура!
Мы не сделали много до сих пор. На самом деле мы едва поцарапали поверхность. Но, как вы увидите в следующей части серии, мы будем медленно собирать Mr0 и исследовать множество других файлов, связанных при создании расширения chrome.
Удачного программирования 🙂
От http://mycodefixes.blogspot.com/2012/02/building-chrome-extensions-from-scratch.html