Can I fire up a Chrome extension API from code?

Question

Is it possible to launch a Google Chrome extension within a website? E.g run some javascript that will launch the extensions UI?

I'm building a web-app that will allow users to take screenshots of their desktop and edit them. I've got a sample extension up and running using dektopCapture but it is an 'app' style of an extension.

It allows to select a window to stream from, then take a snapshot within the extension UI(using a button) that is saved as an image string

My question is:

Is it possible to fire up the desktopCapture UI (the window that gets the available windows to stream from), from within my web-app, maybe a button, take the stream and place it on a canvas/HTML5 video element within my web-app?

I'm figuring that I could hook-up an event-listener within the extension and use runtime.onMessage to post a message from within my app

Notes:

If there's a more intuitive way to do this, I can go that route - e.g If I could keep as much interaction within the web-app with just the extension running in the background, that would be even better.

The extension is of type browser_action but I want it to be applicable to a single page(the app's webpage) so if it can be used in a page_action I'd prefer that instead. There's really no need to have browser_action icon if I can trigger this from within a webpage

I'm also planning to build a FF extension so any insights there are also appreciated.

Look at http://stackoverflow.com/questions/7087728/custom-protocol-handler-in-chrome — Vasiliy vvscode Vanchuk, Jun 16 '15 at 07:10
@VasiliyVanchuk That seems to be dealing with sending messages back and forth — nicholaswmin, Jun 16 '15 at 07:12
thus you can't garantee that user has your extention - pobable buble events up - better way — Vasiliy vvscode Vanchuk, Jun 16 '15 at 07:16
@NicholasKyriakides Is this a page_action? If so, I haven't found a way to programmatically launch those — CodingIntrigue, Jun 16 '15 at 07:16
sending message seems the only way. in this way you should own both the website javascript and the extension javascript. a message sender and a message listener. — Jerry Z., Jun 16 '15 at 09:40
@RGraham `externally_connectables` allows you to do just that — nicholaswmin, Jun 25 '15 at 13:50

nicholaswmin · Accepted Answer · 2015-06-17T08:51:19.653

So I'm answering my own question.

I've managed to get it working using externally_connectables.

The externally_connectable manifest property declares which extensions, apps, and web pages can connect to your extension via runtime.connect and runtime.sendMessage.

1. Declare app/webpage in manifest.json

Just declare your web-app/page within your manifest.json as an externally_connectable.

E.g I wanted to connect my app is hosted on Github Pages and I have a domain name of https://nicholaswmin.github.io, so it does a bit like this:

"externally_connectable": {
  "matches": ["https://nicholaswmin.github.io/*"]
}, //rest of manifest.json

2. Set up event listener for messages in background.js

Then set up an event listener in your background.js like so:

chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
 //Stuff you want to run goes here, even desktopCapture calls
});

3. Send message from your web/app page

And call it from within your web-app/website like this:

chrome.runtime.sendMessage("APP ID GOES HERE", 
                       {data: { key : "capture"}});

Make sure that your website is correctly declared as an externally_connectable in your manifest.json and that you are passing the app-id when sending the message

Hello! I was wondering where I can get the app id? I'm working with reactjs and its got its own manifest.json that has name in it. — NoobNewb, Mar 15 '19 at 20:41

Can I fire up a Chrome extension API from code?

1 Answers1

1. Declare app/webpage in manifest.json

2. Set up event listener for messages in background.js

3. Send message from your web/app page