Chrome extension - externally_connectable alternative?

Question

It looks like the externally_connectable function, which allows the website to associate with the extension, is still in the dev channel and is not yet stable. Are there any other ways that a particular website can communicate with my extension while I wait for this feature to become stable? How traditionally did the chrome extension developers do this?

Answer 1

Thanks Rob W for pointing me in the direction of HTML5 messaging. In the interest of other developers of the chrome extension, I am writing about a common problem that I was trying to solve, and a solution that worked in the end.

I am making a chrome extension that can control the playback of music in a tab using a popup player. When the user clicks on play / pause / etc in the pop-up player, the extension should be able to send this message to the web page and get an answer about whether the action was performed.

My first approach was to add script content to the music player page. The problem, however, is that the content scripts work in the sandbox and cannot access the embedded javascript on the page. Therefore, the content of the script was pretty useless (by itself), because although it could receive commands from the extension, it could not affect any changes on the web page itself.

One thing that worked in my favor was that the site where the music was playing belongs to me, so I can place any javascript that I wanted there, and it can be served from the server. This is what I took advantage of: I created another javascript file that will be on the website and share the script content mentioned above through the window object of the page (i.e. HTML5 message ) This only works because the script content and the javascript file exist on the same web page and can share the window object on the page. Thanks Rob W for pointing me to this opportunity. The following is an example of how a javascript file on a page can initiate a connection to script content through a window object:

content_script.js (entered by the extension on xyz.com):

window.addEventListener("message", function(event) { if(event.data.secret_key && (event.data.secret_key === "my_secret_key") && event.data.source === "page"){ if(event.data.type){ switch(event.data.type) { case 'init': console.log("received connection request from page"); window.postMessage({source: "content_script", type: 'init', secret_key: "my_secret_key"}, "*"); break; } } } }, false); 

onpage.js (located on the server and sent along with xyz.com):

 window.postMessage({source: "page", type: 'init', secret_key: "my_secret_key"}, "*"); window.addEventListener("message", function(event) { if(event.data.secret_key && (event.data.secret_key === "my_secret_key") && event.data.source === "content_script"){ if(event.data.type){ switch(event.data.type) { case 'init': console.log("connection established"); break; } } } }, false); 

I check the secret key to make sure the message comes from where I expect it.

What is it! If something is unclear or you have any questions, feel free to follow!

Answer 2

You can have an extension that adds script content next to the web page and use it to send messages back and forth between the website and the extension’s base page.

However, it is tiring, and the external connection is much nicer.