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
Our goal is to make searching GitHub projects as easy as searching on Google. To avoid irrelevant searches when the user decides to search something else, let's reserve a keyword for our extension: if the user types "gh", followed by a tab click, will activate our extension to trigger our search.
17
+
Our goal is to make searching GitHub projects as easy as searching on Google. To avoid irrelevant searches when the user decides to search for something else, let's reserve a keyword for our extension: if the user types "gh," followed by a tab click, it will activate our extension to trigger the search.
@@ -49,38 +48,38 @@ Let's use the Extension.js `create` command to bootstrap a minimal extension for
49
48
></iframe>
50
49
</div>
51
50
52
-
> Step 1 Demo
51
+
> Step 2 Demo
53
52
54
-
Every extension starts with a manifest file. It tells the browser information about the extension's metadata, permissions, and files that the extension needs to run properly. Based on the [plan above](#plan), we want a custom search shortcut "gh" that will link us to GitHub search. We are also adding a service_worker script to handle user events logic.
53
+
Every extension starts with a manifest file. It tells the browser information about the extension's metadata, permissions, and files that the extension needs to run properly. Based on the [plan above](#plan), we want a custom search shortcut "gh" that will link us to GitHub search. We are also adding a service worker script to handle user events logic.
55
54
56
-
```jsx
55
+
```json
57
56
{
58
57
"manifest_version": 3,
59
58
"name": "GitHub Search",
60
59
"version": "1.0",
61
-
"omnibox": {"keyword":"gh"},
60
+
"omnibox": {"keyword": "gh"},
62
61
"background": {
63
62
"service_worker": "service_worker.js"
64
63
}
65
64
}
66
65
```
67
66
68
-
-`omnibox.keyword` when the keyword `gh` is set, an event will be fired.
69
-
-`background.service_worker` will listen to the event that we just fired.
67
+
-`omnibox.keyword`: When the keyword `gh` is set, an event will be fired.
68
+
-`background.service_worker`: Will listen to the event that we just fired.
70
69
71
-
## Step 2 - Create the Background Service Worker
70
+
## Step 3 - Create the Background Service Worker
72
71
73
-
In the context of a browser extension, the background service worker is where the extension can set listeners for all sorts of browser events.
72
+
In the context of a browser extension, the background service worker is where the extension can set listeners for various browser events.
74
73
75
74
In our case, we need to add a script that listens to input events in the omnibox, so once the user types what they want to search, GitHub can return the correct data.
76
75
77
76
Let's create a `service_worker.js` file for this purpose:
78
77
79
78
```js
80
-
//When the user has accepted what is typed into the omnibox.
79
+
When the user has accepted what is typed into the omnibox.
Adding this code will let you see live search suggestions from GitHub right in your URL bar, making the search experience almost instant. Here is how it looks like when I type "undefined is not a function":
184
+
Adding this code will let you see live search suggestions from GitHub right in your URL bar, making the search experience even smoother.
Copy file name to clipboardExpand all lines: docs/en/docs/getting-started/get-started-immediately.mdx
+39-30
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,15 @@ import { PackageManagerTabs } from "@theme";
2
2
3
3
# 🔥 Get Started Immediately
4
4
5
-
Welcome to the fast track of browser extension@latest development with `Extension`! Whether you're looking to prototype quickly or delve into full-scale development, you've made the right choice. Let's get your development environment set up and running in no time.
5
+
Welcome to the fast track for developing cross-browser extensions with Extension.js. Whether you’re quickly prototyping or working on full-scale development, this guide will help you get started right away.
6
6
7
7
## Kickstart Any Sample from Chrome Extension Samples
8
8
9
-
Dive right into development by starting with a sample from the Chrome Extension Samples repository. It's a great way to get acquainted with best practices and save time:
9
+
Start development by using a sample from the Chrome Extension Samples repository. It's a great way to learn best practices and save time.
10
10
11
11
1. Open your terminal.
12
-
2. Navigate to the directory where you want your project.
13
-
3. Run the command:
12
+
2. Navigate to the directory where you want to create your project.
13
+
3. Run the following command:
14
14
15
15
<PackageManagerTabs
16
16
command={{
@@ -20,14 +20,13 @@ Dive right into development by starting with a sample from the Chrome Extension
20
20
}}
21
21
/>
22
22
23
-
**Note:** Replace `<sample-name>` with the name of the sample you wish to use from [Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).
23
+
**Note:** Replace `<sample-name>` with the sample you want to use from [Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).
24
24
25
-
See the example below where we request the sample [page-redder](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder) from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).
25
+
See the example below, where we request the [page-redder sample](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder) from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples).
@@ -39,24 +38,29 @@ See the example below where we request the sample [page-redder](https://github.c
39
38
></iframe>
40
39
</div>
41
40
42
-
## Use `Microsoft Edge` to Kickstart Any Sample
41
+
## Use Microsoft Edge to Kickstart Any Sample
43
42
44
-
`Extension` supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, simply:
43
+
Extension.js supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, follow these steps:
45
44
46
45
1. Open your terminal.
47
-
2. Navigate to your desired project directory.
48
-
3. Execute:
49
-
```bash
50
-
npx extension@latest dev <sample-name> --browser=edge
51
-
```
52
-
Tailor your command by replacing `<sample-name>` with the specific sample you're interested in.
46
+
2. Navigate to the directory where you want to create your project.
47
+
3. Run this command:
53
48
54
-
> See the example below where we request the sample [magic8ball](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball) from from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples) using Edge as the runtime browser.
49
+
<PackageManagerTabs
50
+
command={{
51
+
npm: "npx extension@latest dev <sample-name> --browser=edge",
52
+
pnpm: "pnpx extension@latest dev <sample-name> --browser=edge",
Replace `<sample-name>` with the sample you want to use.
58
+
59
+
> In the example below, we request the [magic8ball sample](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball) from [Google Chrome Extension Samples](https://github.com/GoogleChrome/chrome-extensions-samples) using Edge as the target browser.
This will fetch a Mozilla Add-On and adapt it for Edge.
81
91
82
-
> See the example below where we request the sample [Apply CSS](https://github.com/mdn/webextensions-examples/tree/main/apply-css) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples)using Edge as the runtime browser.
92
+
> Below is an example of fetching the [Apply CSS sample](https://github.com/mdn/webextensions-examples/tree/main/apply-css) from [MDN WebExtensions Examples](https://github.com/mdn/webextensions-examples)and running it on Edge.
0 commit comments