Как сделать свой chrome extension

• 05, 28, 2014
•  bullgare
•  javascript
• комментария 2

`manifest.json` должен выглядеть примерно так:

{
  "manifest_version": 2,

  "name": "Jira print extension",
  "description": "This extension is to print tasks in Jira",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs", "https://*/*", "http://*/*"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
      {
          "matches": ["http://*/*", "https://*/*"],
          "js": ["libs/jquery.js", "content.js"]
      }
  ]
}

При этом:
`background.js` крутится всегда и один для всего браузера, умеет только слать сообщения на разные слои и слушать их.
`content.js` (всё, что указано в content_scripts) имеет доступ к DOM и может слушать сообщения от background.js.
`popup.html` открывается при нажатии на кнопку расширения в панельке, обычный html, должен содержать загрузку `popup.js`, который может обращаться к DOM всплывающего окна и умеет слать сообщения к `background.js`.

Обмен сообщений между кнопкой и фоновым скриптом:

// отправка
chrome.extension.sendMessage({type: "render_output", msg: request.msg});
// слушатель
chrome.extension.onMessage.addListener(function (request, sender, sendResponse)
{
	switch (request.type) {
		case "render_output":
			document.getElementById('status').innerHTML = request.msg;
			break;
});

Отправка сообщения в `content.js`:

// отправка из фонового в контент
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {type: "print.issue"}, function(response) {});
});
// слушатель
chrome.extension.onMessage.addListener(function (request, sender, sendResponse)
{
	switch (request.type) 
	{
		case "print.issue":
			break;
	}
	return true;
});

Как опубликовать:
На странице https://chrome.google.com/webstore/category/apps?hl=ru нажать на колёсико в правом верхнем углу, «Панель инструментов разработчика» (попадаем на https://chrome.google.com/webstore/developer/dashboard?hl=ru). Добавить продукт.

В итоге, спустя 5 баксов, кучку времени и ошибок гугла получаем что-то вроде
https://chrome.google.com/webstore/detail/jira-print-extension/aegogmgcbaodohpidompbbmhhogmdmcl/related?hl=ru

Ссылки:
https://developer.chrome.com/extensions/samples куча простых расширений-примеров
http://code.tutsplus.com/tutorials/developing-google-chrome-extensions—net-33076 — туториал
https://developer.chrome.com/extensions/getstarted — туториал про то, как нужно работать с расширением (бюрократия)
http://stackoverflow.com/questions/11996053/detect-a-button-click-in-the-browser-action-form-of-a-google-chrome-extension — объяснение, как отслеживать события во всплывающем окне (в общем, надо слушать «DOMContentLoaded»)
http://stackoverflow.com/questions/14245334/chrome-extension-sendmessage-from-background-to-content-script-doesnt-work — объяснение, как слать сообщения в `content.js`
https://developer.chrome.com/webstore/publish — как опубликовать своё творение
http://www.youtube.com/watch?v=Gn_jlvkHTnM — видео о том, как опубликовать своё творение (вещает об этом очаровашка)

UPD: ещё ссылки
http://www.sitepoint.com/create-chrome-extension-10-minutes-flat/