Нельзя просто так взять и обратиться к фоновой странице / Комментарии / Хабр

qmax 29 мар 2013 в 23:51

В своё время родил такую конструкцию:

function ChromeBus(channel, handlers) {
	this.channel = channel;
	this.handlers = handlers;
};

ChromeBus.prototype = {
	init: function() {
		var self = this;
		if( this.channel == null ) { 
			/* background script */
			this.ports = {};
			chrome.extension.onConnect.addListener(function(port){ self.onConnect(port); });
			this.postMessage = this.postMessage_chan;
		} else { 
			/* content script */
			this.port = chrome.extension.connect({'name': this.channel});
			this.port.onMessage.addListener(function(msg, port){ 
				self.onMessage_ext(msg, port); 
			});
			this.postMessage = this.postMessage_ext;
		}
	},

	onConnect: function(port) {
		var self = this;
		var channel = port.name;
		if( this.ports[channel] === undefined ) 
			this.ports[channel] = [port];
		else
			this.ports[channel].push(port);
		port.onDisconnect.addListener(function(port){ self.onDisconnect(port); });
		port.onMessage.addListener(function(msg, port){ self.onMessage_chan(msg, port); });
		if( this.handlers['onConnect'] !== undefined )
			this.handlers['onConnect'].call(this, channel, port);
	},

	onDisconnect: function(port) {
		var self = this;
		var channel = port.name;
		this.ports[channel] = this.ports[channel].filter(function(p){return p != port;});
		if( this.handlers['onDisconnect'] !== undefined )
			this.handlers['onDisconnect'].call(this, channel, port);
	},

	postMessage_ext: function(id, msg) {
		msg = msg || {};
		msg.id = id;
		this.port.postMessage(msg);
	},

	onMessage_chan: function(msg, port) {
		method = this.handlers[msg.id];
		if( method ) method.call(this, port.name, msg);
	},

	postMessage_chan: function(channel, id, msg) {
		msg = msg || {};
		msg.id = id;
		this.ports[channel].forEach(function(port){	port.postMessage(msg);});
	},

	onMessage_ext: function(msg, port) {
		method = this.handlers[msg.id];
		if( method ) method.call(this, msg);
	}
}

Используется одинаково и на фоновой, и на встроенных:


function Background() {
	this.init();
}

Background.prototype = new ChromeBus(null, {
	'ack': function(channel, args) {
		this.postMessage(channel, 'hello');
	},

	'user-logged': function() {
		this.postMessage('embedded', 'reload');
		this.postMessage('frame', 'reload');
	},
})

qmax 29 мар 2013 в 23:55

А, ну и для общения со скриптами в родных доменах (у меня это были iframы):

function WinBus(handlers) {
  this.handlers = handlers;
};

WinBus.prototype = {
  init: function() {
    var self = this;
    window.addEventListener("message", function(event){ self.onWinMessage(event) });
  },

  postWinMessage: function(id, msg) {
    var origin = window.location.origin;
    msg = msg || {};
    msg.id = id;
    window.postMessage( msg, origin );
  },

  onWinMessage: function(event) {
    method = this.handlers[event.data.id];
    if( method ) method.call(this, event.data);
  },

}