You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Step 2: Update the webpage to insert the image at the top
157
+
## Update the webpage to insert the image at the top
158
158
159
159
After adding the **Display** button, the next task will be to make the button display the `images/stars.jpeg` image file at the top of the webpage that's in the active tab.
160
160
161
161
Each tab page (and extension) runs in its own thread. In a step below, you'll create a content script that is injected into the tab page. The injected script will send a message from your pop-up to that content script that's running on the tab page. The content script will receive the message, which describes which image should be displayed.
## Step 3: Create the pop-up JavaScript to send a message
165
+
## Create the pop-up JavaScript to send a message
166
166
167
-
This step has already been done in [popup.js](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/popup/popup.js) in the MicrosoftEdge-Extensions repo. If you want to manually create the Part 2 extension, continue with the following steps.
168
-
169
-
Create the `popup/popup.js` file, and then add the following code in that file.
167
+
The `popup/popup.js` file includes the following code:
170
168
171
169
This code sends a message to your not-yet-created content script that you must momentarily create and inject into your browser tab. To do that, the following code adds an `onclick` event to your pop-up **Display** button:
## Step 4: Make your `stars.jpeg` available from any browser tab
226
-
227
-
This step has already been done in [manifest.json](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/manifest.json) in the MicrosoftEdge-Extensions repo. If you want to manually create the Part 2 extension, continue with the following steps.
223
+
## Make `stars.jpeg` available from any browser tab
228
224
229
225
To make `images/stars.jpeg` available from any browser tab, you must use the `chrome.runtime.getURL` API.
230
226
@@ -249,11 +245,9 @@ You've now written the code in your `popup.js` file to send a message to the con
## Step 5: Update your `manifest.json` for new content and web access
253
-
254
-
Next, you'll create and inject the content page that's embedded on the current active tab page. This step has already been done in [manifest.json](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/manifest.json) in the MicrosoftEdge-Extensions repo.
248
+
## Update your `manifest.json` for new content and web access
255
249
256
-
The updated `manifest.json`that includes the `content-scripts` and `web_accessible_resources` is as follows:
250
+
The sample creates and inject the content page that's embedded on the current active tab page. `manifest.json` includes the `content-scripts` and `web_accessible_resources`, as follows:
257
251
258
252
`/manifest.json` (complete):
259
253
@@ -289,20 +283,20 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi
289
283
}
290
284
```
291
285
292
-
The `matches` attribute is set to `<all_urls>`, which means that all files in `content_scripts` are injected into all browser tab pages when each tab is loaded. The allowed files types that can be injected are JavaScript and CSS. You also added `lib\jquery.min.js`. You can copy that file from the [/lib/](https://github.com/microsoft/MicrosoftEdge-Extensions/tree/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/lib) folder of the MicrosoftEdge-Extensions repo.
286
+
The `matches` attribute is set to `<all_urls>`, which means that all files in `content_scripts` are injected into all browser tab pages when each tab is loaded. The allowed files types that can be injected are JavaScript and CSS. The sample also added `lib\jquery.min.js`.
293
287
294
288
295
289
<!-- ------------------------------ -->
296
290
#### Add jQuery
297
291
298
292
`jquery.min.js` is a predefined, minified file.
299
293
300
-
[jquery.min.js](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/lib/jquery.min.js) in the MicrosoftEdge-Extensions repo.
301
-
302
294
In the content scripts that you're injecting, it's common to use jQuery (`$`). This sample includes a minified version of jQuery, residing in the extension package<!-- todo: check 'package' --> as `lib\jquery.min.js`.
303
295
304
296
A content script runs in an individual sandbox, which means that the jQuery that's injected into the `popup.js` page isn't shared with the current webpage.
305
297
298
+
[jquery.min.js](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/lib/jquery.min.js) in the MicrosoftEdge-Extensions repo.
299
+
306
300
307
301
<!-- ------------------------------ -->
308
302
#### Understanding the thread
@@ -312,9 +306,7 @@ Even if the browser tab has JavaScript running on it on the loaded web page, any
## Step 6: Add the content script message listener
316
-
317
-
[content.js](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/Extension%20samples/extension-getting-started-part2/extension-getting-started-part2/content-scripts/content.js) in the MicrosoftEdge-Extensions repo.
309
+
## Add the content script message listener
318
310
319
311
Here's the `content-scripts\content.js` file that gets injected into every browser tab page based on the `content-scripts` section in `manifest.json`:
320
312
@@ -354,11 +346,6 @@ When an event is processed by the listener, the function that is the first param
354
346
* 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).
0 commit comments