Расширение Google chrome (Hello word)

RenatPro · 27.09.2015, 11:16

Для начала нужно будет создать папку, где будут находится файлы нашего расширения

Назовем ее например "HelloWorld"

И в ней создадим файл "manifest.json"

"manifest.json" это файл в котором будет "описано" наше расширение а так же будут заданы некоторые параметры

И так содержимое этого файла с комментариями:

Код:

{
"manifest_version": 2, // Версия расширения
"name": "Hello world!", // Название Расширения
"version": "1.0", //Наша версия расширения
"description": "Первое расширение", // Описание расширения
"icons": {
},
"permissions": [
],
"browser_action": { // Страница, контент которой будет выполнятся в фоне
"default_title": "Hello world!",
"default_popup": "popup.html"
}
}

Создадим еще 1 файл с названием popup.html и впишем в него такое содержание:

Код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

ТЕСТИРОВАНИЕ
Стоит немного написать о тестировании. Для тестирования расширений необходимо перейти в браузере Chrome на страницу Расширения, для этого перейдите по ссылке или в меню выберите Инструменты->Расширения. На странице ставим галочку в поле Режим разработчика, после чего с помощью появившейся кнопки Загрузить распакованное расширение выберите папку с вашим расширением. После этого ваше расширение будет загружено, если включено отображение иконки рядом с адресной строкой, то она будет отображаться на желтом фоне. После каждого изменения в коде, файлы необходимо сохранять и в браузере на странице Расширения нажимать на кнопку Обновить.

Kacha · 21.11.2015, 15:31

Несколько замечаний:
1. manifest_version менять нельзя
2. version предпочтительно делать в виде 1.2.3.4
3. permissions лучше указывать для конкретных сайтов
4. если будут JS их надо регистрировать отдельно

Более-менее адекватный manifest.json из рабочего расширения скрипта:

Код:

{
   "name":"Script",
   "description":"Description",
   "permissions":[      //права доступа к данным url
      "https://api.vk.com/*",
      "https://vk.com/*",
      "http://vk.com/*"
   ],
   "version":"1.2.7.4",
   "manifest_version":2,
   "browser_action":{
      "default_icon":"icon-48.png"//иконка для расширения
   },
   "content_scripts":[
      {
         "js":[//список используемых скриптов
            "jquery-1.8.3.min.js",
            "jquery.balloon.js",
            "MD5.js",
            "script.js"
         ],
         "matches":["http://*/*", "https://*/*"]//права доступа данных скриптов (для любого сайта)
      }
   ],
   "icons":{//иконки приложения
      "16":"icon-16.png",
      "48":"icon-48.png"
   },
   "web_accessible_resources":[
      "icon-16.png",
      "icon-48.png",
      "jquery.balloon.js",
      "jquery-1.8.3.min.js",
      "MD5.js",
      "script.js"
   ]
}