Reworked Extension Guides (#1727)

Edited and reworked content in the Extension Guides Overview and the Generator and Main Extension guides.
Signed-off-by: Paul Williams <pawilliams@mirantis.com>

Update docs/extensions/guides/main-extension.md
Co-authored-by: Panu Horsmalahti <panu.horsmalahti@iki.fi>

Update docs/extensions/guides/generator.md
Co-authored-by: chh <1474479+chenhunghan@users.noreply.github.com>
Signed-off-by: Paul Williams <pawilliams@mirantis.com>
Co-authored-by: Paul Williams <pawilliams@mirantis.com>
Co-authored-by: chh <1474479+chenhunghan@users.noreply.github.com>

docs/extensions/guides/README.md

 # Extension Guides
 
-The basics of the Lens Extension API are covered in [Your First Extension](../get-started/your-first-extension.md). In this section detailed code guides and samples are used to explain how to use specific Lens Extension APIs.
+This section explains how to use specific Lens Extension APIs. It includes detailed guides and code samples. For introductory information about the Lens Extension API, please see [Your First Extension](../get-started/your-first-extension.md).
 
-Each guide or sample will include:
+Each guide or code sample includes the following:
 
 - Clearly commented source code.
 - Instructions for running the sample extension.
-- Image of the sample extension's appearance and usage.
-- Listing of Extension API being used.
-- Explanation of Extension API concepts.
+- An image showing the sample extension's appearance and usage.
+- A listing of the Extension API being used.
+- An explanation of the concepts relevant to the Extension.
 
 ## Guides
 

docs/extensions/guides/generator.md

-# New Extension Project with Generator
+# Lens Extension Generator
 
-The [Lens Extension Generator](https://github.com/lensapp/generator-lens-ext) scaffolds a project ready for development. Install Yeoman and Lens Extension Generator with:
+The [Lens Extension Generator](https://github.com/lensapp/generator-lens-ext) creates a directory with the necessary files for developing an extension.
+
+## Installing and Getting Started with the Generator
+
+To begin, install Yeoman and the Lens Extension Generator with the following command:
 
 ```bash
 npm install -g yo generator-lens-ext
 ```
 
-Run the generator and fill out a few fields for a TypeScript project:
+Run the generator by entering the following command: `yo lens-ext`.
+
+Answer the following questions:
 
 ```bash
-yo lens-ext
 # ? What type of extension do you want to create? New Extension (TypeScript)
 # ? What's the name of your extension? my-first-lens-ext
 # ? What's the description of your extension? My hello world extension
@@ -17,24 +22,25 @@ yo lens-ext
 # ? Initialize a git repository? Yes
 # ? Install dependencies after initialization? Yes
 # ? Which package manager to use? yarn
-# ? symlink created extension folder to ~/.k8slens/extensions (mac/linux) or :User
-s\<user>\.k8slens\extensions (windows)? Yes
+# ? symlink created extension folder to ~/.k8slens/extensions (mac/linux) or :Users\<user>\.k8slens\extensions (windows)? Yes
 ```
 
-Start webpack, which watches the `my-first-lens-ext` folder.
+Next, you'll need to have webpack watch the `my-first-lens-ext` folder. Start webpack by entering:
 
 ```bash
 cd my-first-lens-ext
 npm start # start the webpack server in watch mode
 ```
 
-Then, open Lens, you should see a Hello World item in the menu:
+Open Lens and you will see a **Hello World** item in the left-side menu under **Custom Resources**:
 
 ![Hello World](images/hello-world.png)
 
 ## Developing the Extension
 
-Try to change `my-first-lens-ext/renderer.tsx` to "Hello Lens!":
+Next, you'll try changing the way the new menu item appears in the UI. You'll change it from "Hello World" to "Hello Lens".
+
+Open `my-first-lens-ext/renderer.tsx` and change the value of `title` from `"Hello World"` to `"Hello Lens"`:
 
 ```tsx
 clusterPageMenus = [
@@ -48,18 +54,18 @@ clusterPageMenus = [
 ]
 ```
 
-Then, Reload Lens by CMD+R (Mac) / Ctrl+R (Linux/Windows), you should see the menu item text changes:
+Reload Lens and you will see that the menu item text has changed to "Hello Lens." To reload Lens, enter `CMD+R` on Mac and `Ctrl+R` on Windows/Linux.
 
 ![Hello World](images/hello-lens.png)
 
 ## Debugging the Extension
 
-[Testing](../testing-and-publishing/testing.md)
+To debug your extension, please see our instructions on [Testing Extensions](../testing-and-publishing/testing.md).
 
-## Next steps
+## Next Steps
 
-You can take a closer look at [Common Capabilities](../capabilities/common-capabilities.md) of extension, how to [style](../capabilities/styling.md) the extension. Or the [Extension Anatomy](anatomy.md).
+To dive deeper, consider looking at [Common Capabilities](../capabilities/common-capabilities.md), [Styling](../capabilities/styling.md), or [Extension Anatomy](anatomy.md).
 
-You are welcome to raise an [issue](https://github.com/lensapp/generator-lens-ext/issues) for Lens Extension Generator, if you find problems, or have feature requests.
+If you find problems with the Lens Extension Generator, or have feature requests, you are welcome to raise an [issue](https://github.com/lensapp/generator-lens-ext/issues). You can find the Lens contribution guidelines [here](../../contributing/README.md).
 
-The source code of the generator is hosted at [Github](https://github.com/lensapp/generator-lens-ext)
+The Generator source code is hosted at [Github](https://github.com/lensapp/generator-lens-ext).

docs/extensions/guides/main-extension.md

 # Main Extension
 
-The main extension api is the interface to Lens' main process (Lens runs in main and renderer processes). It allows you to access, configure, and customize Lens data, add custom application menu items, and generally run custom code in Lens' main process.
+The Main Extension API is the interface to Lens's main process. Lens runs in both main and renderer processes. The Main Extension API allows you to access, configure, and customize Lens data, add custom application menu items, and run custom code in Lens's main process.
 
 ## `LensMainExtension` Class
 
+### `onActivate()` and `onDeactivate()` Methods
+
 To create a main extension simply extend the `LensMainExtension` class:
 
-``` typescript
+```typescript
 import { LensMainExtension } from "@k8slens/extensions";
 
 export default class ExampleExtensionMain extends LensMainExtension {
@@ -20,11 +22,18 @@ export default class ExampleExtensionMain extends LensMainExtension {
 }
 ```
 
-There are two methods that you can implement to facilitate running your custom code. `onActivate()` is called when your extension has been successfully enabled. By implementing `onActivate()` you can initiate your custom code. `onDeactivate()` is called when the extension is disabled (typically from the [Lens Extensions Page]()) and when implemented gives you a chance to clean up after your extension, if necessary. The example above simply logs messages when the extension is enabled and disabled. Note that to see standard output from the main process there must be a console connected to it. This is typically achieved by starting Lens from the command prompt.
+Two methods enable you to run custom code: `onActivate()` and `onDeactivate()`. Enabling your extension calls `onActivate()` and disabling your extension calls `onDeactivate()`. You can initiate custom code by implementing `onActivate()`. Implementing `onDeactivate()` gives you the opportunity to clean up after your extension.
 
-The following example is a little more interesting in that it accesses some Lens state data and periodically logs the name of the currently active cluster in Lens.
+Disable extensions from the Lens Extensions page:
 
-``` typescript
+1. Navigate to **File** > **Extensions** in the top menu bar. (On Mac, it is **Lens** > **Extensions**.)
+2. Click **Disable** on the extension you want to disable.
+
+The example above logs messages when the extension is enabled and disabled. To see standard output from the main process there must be a console connected to it. Achieve this by starting Lens from the command prompt.
+
+The following example is a little more interesting. It accesses some Lens state data, and it periodically logs the name of the cluster that is currently active in Lens.
+
+```typescript
 import { LensMainExtension, Store } from "@k8slens/extensions";
 
 const clusterStore = Store.clusterStore
@@ -51,11 +60,11 @@ export default class ActiveClusterExtensionMain extends LensMainExtension {
 }
 ```
 
-See the [Stores](../stores) guide for more details on accessing Lens state data.
+For more details on accessing Lens state data, please see the [Stores](../stores) guide.
 
 ### `appMenus`
 
-The only UI feature customizable in the main extension api is the application menu. Custom menu items can be inserted and linked to custom functionality, such as navigating to a specific page. The following example demonstrates adding a menu item to the Help menu.
+The Main Extension API allows you to customize the UI application menu. Note that this is the only UI feature that the Main Extension API allows you to customize. The following example demonstrates adding an item to the **Help** menu.
 
 ``` typescript
 import { LensMainExtension } from "@k8slens/extensions";
@@ -73,4 +82,8 @@ export default class SamplePageMainExtension extends LensMainExtension {
 }
 ```
 
-`appMenus` is an array of objects satisfying the `MenuRegistration` interface. `MenuRegistration` extends React's `MenuItemConstructorOptions` interface. `parentId` is the id of the menu to put this menu item under (todo: is this case sensitive and how do we know what the available ids are?), `label` is the text to show on the menu item, and `click()` is called when the menu item is selected. In this example we simply log a message, but typically you would navigate to a specific page or perform some operation. Pages are associated with the [`LensRendererExtension`](renderer-extension.md) class and can be defined when you extend it. 
\ No newline at end of file
+`appMenus` is an array of objects that satisfy the `MenuRegistration` interface. `MenuRegistration` extends React's `MenuItemConstructorOptions` interface. The properties of the appMenus array objects are defined as follows:
+
+* `parentId` is the name of the menu where your new menu item will be listed. Valid values include: `"file"`, `"edit"`, `"view"`, and `"help"`. `"lens"` is valid on Mac only.
+* `label` is the name of your menu item.
+* `click()` is called when the menu item is selected. In this example, we simply log a message. However, you would typically have this navigate to a specific page or perform another operation. Note that pages are associated with the [`LensRendererExtension`](renderer-extension.md) class and can be defined in the process of extending it.