Skip to content

Commit 910efc8

Browse files
committed
remove "step"
1 parent 1c694a6 commit 910efc8

1 file changed

Lines changed: 10 additions & 23 deletions

File tree

microsoft-edge/extensions-chromium/getting-started/part2-content-scripts.md

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -154,19 +154,17 @@ The extension sends a message from the extension icon's pop-up, and dynamically
154154

155155

156156
<!-- ====================================================================== -->
157-
## Step 2: Update the webpage to insert the image at the top
157+
## Update the webpage to insert the image at the top
158158

159159
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.
160160

161161
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.
162162

163163

164164
<!-- ====================================================================== -->
165-
## Step 3: Create the pop-up JavaScript to send a message
165+
## Create the pop-up JavaScript to send a message
166166

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:
170168

171169
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:
172170

@@ -222,9 +220,7 @@ if (sendMessageId) {
222220

223221

224222
<!-- ====================================================================== -->
225-
## 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
228224

229225
To make `images/stars.jpeg` available from any browser tab, you must use the `chrome.runtime.getURL` API.
230226

@@ -249,11 +245,9 @@ You've now written the code in your `popup.js` file to send a message to the con
249245

250246

251247
<!-- ====================================================================== -->
252-
## 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
255249

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:
257251

258252
`/manifest.json` (complete):
259253

@@ -289,20 +283,20 @@ The updated `manifest.json` that includes the `content-scripts` and `web_accessi
289283
}
290284
```
291285

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`.
293287

294288

295289
<!-- ------------------------------ -->
296290
#### Add jQuery
297291

298292
`jquery.min.js` is a predefined, minified file.
299293

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-
302294
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`.
303295

304296
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.
305297

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+
306300

307301
<!-- ------------------------------ -->
308302
#### Understanding the thread
@@ -312,9 +306,7 @@ Even if the browser tab has JavaScript running on it on the loaded web page, any
312306

313307

314308
<!-- ====================================================================== -->
315-
## 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
318310

319311
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`:
320312

@@ -354,11 +346,6 @@ When an event is processed by the listener, the function that is the first param
354346
* 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).
355347

356348

357-
<!-- ====================================================================== -->
358-
## Step 7: Install and test the extension
359-
360-
361-
362349
<!-- ====================================================================== -->
363350
## Next steps
364351

0 commit comments

Comments
 (0)