

The content script will receive the message, which describes which image should be displayed. Then, send a message from your pop-up to that content script running on the tab page. Create a content script that is injected into the tab page. Step 2: Update strategy to display image at the top of the browser tabĪfter adding the button, the next task is to make it bring up the images/stars.jpeg image file at the top of the active tab page.Įach tab page (and extension) runs in its own thread. Below is a sample updated HTML: Īfter updating and opening the extension, a pop-up opens with a display button.

You'll later program that button in a different step, but for now include a reference to an empty JavaScript file popup.js. Update your popup.html file with some straightforward markup that displays a title and a button. Step 1: Remove the image from the pop-up and replace it with a button. This image is now embedded in the extension and inserted into the active browser tab. That button, when selected, passes that image of stars to the content page. You'll learn to update your pop-up menu to replace your static stars image with a title and a standard HTML button. Having content pages listen for messages from pop-ups and respond.Including content pages in existing browser tabs.Exposing extension assets to browser tabs.Injecting JavaScript libraries into an extension.This tutorial covers the following extension technologies: The source code has been updated from Manifest V2 to Manifest V3. To see the completed extension package source for this part of the tutorial, go to MicrosoftEdge-Extensions repo > extension-getting-started-part2.
