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

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"]
      }
  ]
}

{

"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;
});

// отправка

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;
});

// отправка из фонового в контент

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/

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

Similar Posts

2 Responses so far.

LEAVE A COMMENT Отменить ответ