Встраивание контента из расширения chrome
 

Делаю расширение под google chrome.
По нажатию на кнопку расширения встраиваю в содержимое текущей открытой страницы дополнительный код:

chrome.extension.onConnect.addListener(function(port) {
	port.onMessage.addListener(function() {
		if(!document.getElementById("yImgDropBox")) {
			// jquery
			var jqscript = document.createElement("script");
			jqscript.setAttribute("type", "text/javascript");
			jqscript.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js");
			document.getElementsByTagName("head")[0].appendChild(jqscript);
			// плагин
			var dbscript = document.createElement("script");
			dbscript.setAttribute("type", "text/javascript");
			dbscript.setAttribute("src", chrome.extension.getURL("dropbox.js"));
			document.getElementsByTagName("head")[0].appendChild(dbscript);
			// стиль
			var dbstyle = document.createElement("link");
			dbstyle.setAttribute("type", "text/css");
			dbstyle.setAttribute("rel", "stylesheet");
			dbstyle.setAttribute("href", chrome.extension.getURL("dropbox.css"));
			document.getElementsByTagName("head")[0].appendChild(dbstyle);
			// Объект для работы плагина
			var dbobj = document.createElement("div");
			dbobj.setAttribute("id", "yImgDropBox");
			dbobj.innerHTML = 'click twice';
			document.getElementsByTagName("body")[0].appendChild(dbobj);
		}
		var newEvent = new CustomEvent('yImgDropBoxStart', {'detail': {'yImgToken': '111'}});
		window.dispatchEvent(newEvent);
		});
	});
});

В файле плагина делаю инициализацию

$(window).on('yImgDropBoxStart', function(event) {
	var receivedToken = event.detail.yImgToken ? event.detail.yImgToken : event.originalEvent.detail.yImgToken;
	console.log('plugin inited');
});

Проблема в том, что после первого нажатия на кнопку расширения все, что нужно, корректно встраивается в содержимое открытой страницы. Но сообщение не отрабатывается. Если нажать на кнопку расширения еще раз - плагин получает сообщение и все работает дальше нормально.
Почему обработка сообщения не выполняется сразу после первого нажатия?

Ну как вариант, можешь попробоваь почистить кэш в браузере. Если не поможет, то попробуй установить новую версию Chrome браузера от-сюда http://chrome-now.com/ и проблема должна решиться. Всё же мне кажется, что просто надо всё-таки тебе обновиться.:)

Поставь всюду console.log с выводом времени, возможно скрипт/событие выполняются не в том порядке, как ты думаешь

Давно не возвращался к проблеме, сейчас вот вернулся :)
Пока разбирался, понял, что видимо подключение как jquery так и собственных js-плагинов требует времени для браузера. Т.е. встраиваются ссылки на них в страницу сразу а еще нужно дождаться полной загрузки js-файла.
В общем пока получилось примерно такое решение проблемы:

chrome.extension.onConnect.addListener(function(port) {
	port.onMessage.addListener(function(message) {
		if(!document.getElementById("yImgDropBox")) {
			// Внедрить jquery
//			if(!window.jQuery) {
				var jqscript = document.createElement("script");
				jqscript.setAttribute("type", "text/javascript");
				jqscript.setAttribute("id", "jqueryminjs");
				jqscript.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js");
				document.getElementsByTagName("html")[0].appendChild(jqscript);
//			}
			// Только после загрузки jquery
			document.getElementById("jqueryminjs").onload = function() {
				var dbscript = document.createElement("script");
				dbscript.setAttribute("type", "text/javascript");
				dbscript.setAttribute("id", "dropboxplugin");
				dbscript.setAttribute("src", chrome.extension.getURL("dropbox.js"));
				document.getElementsByTagName("html")[0].appendChild(dbscript);
				// Только после загзуки плагина dropbox.js
				document.getElementById("dropboxplugin").onload = function() {
					// стиль
					var dbstyle = document.createElement("link");
					dbstyle.setAttribute("type", "text/css");
					dbstyle.setAttribute("rel", "stylesheet");
					dbstyle.setAttribute("href", chrome.extension.getURL("dropbox.css"));
					document.getElementsByTagName("head")[0].appendChild(dbstyle);
					// Объект для работы плагина
					var dbobj = document.createElement("div");
					dbobj.setAttribute("id", "yImgDropBox");
					dbobj.innerHTML = 'not ready';
					document.getElementsByTagName("body")[0].appendChild(dbobj);
					// Отправить событие для инициализиции плагина
					chrome.storage.sync.get('yImgToken', function(responce) {
						if(responce.yImgToken) {
							var newEvent = new CustomEvent('yImgDropBoxStart', {'detail': {'yImgToken': responce.yImgToken}});
							window.dispatchEvent(newEvent);
						}
					});
				}
			}
		}
	});
});