Web extension browser_specific_settings and extension ID updates (mdn#40541)

* Web extension browser_specific_settings and extension ID updates

* Apply suggestions from review

Co-authored-by: Simeon Vincent <svincent@gmail.com>

---------

Co-authored-by: Simeon Vincent <svincent@gmail.com>

Author: rebloor

files/en-us/mozilla/add-ons/webextensions/implement_a_settings_page/index.md

@@ -21,7 +21,7 @@ Implementing a settings page is a three-step process:
 
 First, we'll write an extension that adds a blue border to every page the user visits.
 
-Create a new directory called `settings`, then create a file called `manifest.json` inside it with the following contents:
+Create a directory called `settings`, then a file called `manifest.json` inside it with this content:
 
 ```json
 {
@@ -40,7 +40,7 @@ Create a new directory called `settings`, then create a file called `manifest.js
 
 This extension instructs the browser to load a content script called "borderify.js" into all web pages the user visits.
 
-Next, create a file called `borderify.js` inside the `settings` directory, and give it these contents:
+Next, create a file called `borderify.js` inside the `settings` directory, and give it this content:
 
 ```js
 document.body.style.border = "10px solid blue";
@@ -77,7 +77,7 @@ First, update `manifest.json` so it has these contents:
 
   "browser_specific_settings": {
     "gecko": {
-      "id": "addon@example.com"
+      "id": "@addon-example"
     }
   }
 }

files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md

@@ -31,7 +31,7 @@ sidebar: addonsidebar
         <pre class="brush: json">
 "browser_specific_settings": {
   "gecko": {
-    "id": "addon@example.com",
+    "id": "@addon-example",
     "strict_min_version": "58.0"
   }
 }
@@ -80,14 +80,14 @@ To support Firefox for Android without specifying a version range, the `gecko_an
 The extension ID must be one of the following:
 
 - [GUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)
-- A string formatted like an email address: `extensionname@example.org`
+- A string formatted like an email address: `extensionname@example.org` However, use of an `@string` format is recommended.
 
 The latter format is easier to generate and manipulate. Be aware that using a real email address here may attract spam.
 
 For example:
 
 ```json
-"id": "extensionname@example.org"
+"id": "@extension-name.developer-name"
 ```
 
 ```json
@@ -103,14 +103,18 @@ Safari stores its browser-specific settings in the `safari` sub-key, which has t
 - `strict_max_version`
   - : Maximum version of Safari to support.
 
+### Chrome properties
+
+Chrome doesn't use this key and ignores it if present in an extension's `manifest.json` file.
+
 ## Examples
 
 Example with all possible keys. Note that most extensions omit `strict_max_version` and `update_url`.
 
 ```json
 "browser_specific_settings": {
   "gecko": {
-    "id": "addon@example.com",
+    "id": "@addon-example",
     "strict_min_version": "42.0",
     "strict_max_version": "50.*",
     "update_url": "https://example.com/updates.json"

files/en-us/mozilla/add-ons/webextensions/manifest.json/index.md

@@ -88,7 +88,7 @@ For complete example extensions, see [Example extensions](/en-US/docs/Mozilla/Ad
 {
   "browser_specific_settings": {
     "gecko": {
-      "id": "addon@example.com",
+      "id": "@addon-example",
       "strict_min_version": "42.0"
     }
   },