

Then, to install the extension you need to check the “Developer mode” box and then choose “Load unpacked extension.”.

Just open up the extensions settings page by typing chrome://extensions into the address bar of the browser. Installing an extension that you’re working on in Chrome to test is nice and easy. Now we need to install it before we can use it. This is all we need to write for this version of our extension. In order to let us use the sendResponse function asynchronously we also need to return true at the end of the listener function. Finally, we need to pass a callback that will be called once the function returns a streamId for the stream we asked for access to. We also pass the tab that sent the message to the extension. These can be “screen”, “window”, “tab”, or “audio” and we’ll pass them through from the web page in the message we send. We need to pass an array of sources to capture. Once this event fires, we then need to use to pop up the screen sharing choice. When our listener gets called it receives three arguments, the message we send from our page, a runtime.MessageSender object and a function we can use at most once to send a message back to the page. onMessageExternal is fired when a message is received from outside the extension so we need to listen to it. The extension manifestĬreate a new directory in which to build our application, a directory for the extension itself, and the files manifest.json and extension.js.Ĭntime is the API we use to respond to events external to the extension as well as return other details about the extension itself. It consists of two parts: a manifest.json file that describes the extension and the script we want to run, which we’ll call extension.js. The extension we are going to build is very simple. Let’s write an extension that will give access to screen capture and then show the results of that on the page.

Chrome extensions have extended permissions and APIs that allow access to resources that regular JavaScript on the page cannot. Well, in Chrome we can write a extension which will give us access to the screen, application windows, and browser tabs. Screen sharing on the web has many security concerns for the end user, so the browsers are handling this feature with concern. There is a draft spec for a getDisplayMedia method but no browser has implemented it yet. A local web server – I like to use servedir for things like thisĪs of right now, Chrome does not allow you to access the content of a screen via the mediaDevices API.In order to build this project you will need:
#WEBPAGE CAPTURE CHROME EXTENSION HOW TO#
In this post we’re going to see how to access the screen capture capabilities of Google Chrome from within a web application. To build screen sharing capabilities into a WebRTC video chat application you must first be able to capture the content on screen.
