![]() When you select the Display button, you get what is below. Now, when you browse to any page and select your Extension icon, the pop-up menu is displayed as follows: Add functionality to remove the displayed image when selected.The third script line adds a click event that covers the entire image allowing the user to select anywhere on the image and that image is removed from the page (along with it is event listener). The second script line dynamically inserts into the DOM header a section that you must assign as a slide-image class to your img element. The first script line appends an img element right below the body of your browser tab that has the slide-image class assigned as well as the imageDivId as the ID of that image element. That function simply processes the three jQuery script lines. The first parameter of that function is an object that has attributes as assigned by sendMessage. When an event is processed by the listener, the function that is the first parameter is run. Remember, from popup.js, when you used the sendMessage method, those attributes of the first parameter are url and imageDivId. The first parameter of the addListener method is a function whose first parameter, request, is the details of the message being passed in. This listener waits for messages like the one you sent from the popup.js described earlier with the Extension API method. Notice that all the above JavaScript does is to register a listener using the Extension API method. You also pass in the current tab ID, which is used later in this article:Ĭonst sendMessageId = document.getElementById("sendmessageid") Ĭ() The following code outlines the updated code in popup/popup.js. You could let the content insertion JavaScript generate that image ID, but for reasons that become apparent later, you'll generate that unique ID here in popup.js, and then pass that ID to the not-yet-created content script. Also, send a unique ID to assign to the inserted image. In that message, you must include the URL to the image you want to display. Then, use the Extension API to send a message to that tab. In the onclick event, find the current browser tab. To do that, the following code adds an onclick event to your pop-up display button: const sendMessageId = document.getElementById("sendmessageid") Create the pop-up JavaScript to send a messageįirst, create popup/popup.js and add code to send a message to your not-yet-created content script that you must momentarily create and inject into your browser tab.The content script receives 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. First, create a content script that is injected into the tab page. Also, the extension uses a different thread. Remember, each tab page runs in its own thread. 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.Here is the updated HTML: Īfter updating and opening the extension, a pop-up opens with a display button. You'll program that button shortly, but for now, just include a reference to an empty JavaScript file popup.js. Remove the image from the pop-up and replace it with a button.įirst, update your popup.html file with some straightforward markup that displays a title and a button. ![]() Follow the below steps for further details. ![]() ![]() That image, is inserted into the active browser tab. That button, when selected, passes that stars image, which is embedded in the extension, 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |