diff --git a/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md b/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md index 1c21426019759b1..85cc92400c403b0 100644 --- a/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md @@ -99,7 +99,6 @@ Let's try adding a popup to the button. Replace manifest.json with this: "version": "1.0", "browser_action": { - "browser_style": true, "default_popup": "popup/choose_page.html", "default_icon": { "16": "icons/page-16.png", @@ -109,11 +108,10 @@ Let's try adding a popup to the button. Replace manifest.json with this: } ``` -We've made three changes from the original: +We've made two changes from the original: -- We no longer reference "background.js", because now we're going to handle the extension's logic in the popup's script (you are allowed background.js as well as a popup, it's just that we don't need it in this case). -- We've added `"browser_style": true`, which will help the styling of our popup look more like part of the browser. -- Finally, we've added `"default_popup": "popup/choose_page.html"`, which is telling the browser that this browser action is now going to display a popup when clicked, the document for which can be found at "popup/choose_page.html". +- removed the reference to "background.js", because now we're going to handle the extension's logic in the popup's script (you are allowed background.js as well as a popup, it's just that we don't need it in this case). +- added `"default_popup": "popup/choose_page.html"`, which is telling the browser that this browser action is now going to display a popup when clicked, the document for which can be found at "popup/choose_page.html". So now we need to create that popup. Create a directory called "popup" then create a file called "choose_page.html" inside it. Give it the following contents: diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md index 871e35cb2471266..b72e8476a50dd72 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md @@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.action 
 "action": {
-  "browser_style": true,
   "default_icon": {
     "16": "button/geo-16.png",
     "32": "button/geo-32.png"
@@ -72,70 +71,27 @@ The `action` key is an object that may have any of these properties, all optiona
   
     
       
-        browser_style
+        
+          
+            browser_style
+          
+        
+        
{{optional_inline}}
+        
{{deprecated_inline}}
       
       Boolean
       
         
Optional, defaulting to false.

-        

-          Use this to include a stylesheet in your popup that will make its look
-          consistent with the browser's UI and with other extensions that use
-          the browser_style property. Although this key defaults to
-          false, it's recommended that you include it and set it to
-          true in order to make your popups consistent with the
-          look of the rest of the browser user interface.
-        

-        

-          In Firefox, the stylesheet can be seen at
-          chrome://browser/content/extension.css, or
-          chrome://browser/content/extension-mac.css on macOS. When setting
-          dimensions, be aware that this style sheet currently sets
-          box-sizing: border-box (see
-          box-sizing).
-        

-        

-          Browser styles describes the classes you can apply to elements in the popup in
-          order to get particular styles.
-        

-        

-          The
-          latest-download
-          example extension uses browser_style in its popup.
-        

-        

+        

           

-            Note: Setting browser_style to
-            true prevents users from selecting text in an
-            extension's popup or sidebar content. This is normal behavior. You
-            can't select parts of the UI in the browser. However, You can work
-            around this limitation to allow your users to select text in two
-            ways:
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
           

-          
    
-            
  1. Set browser_style to false
    2. 
-            
  2. 
-              Use CSS styling on the body of your sidebar or popup's HTML to
-              allow text selection by adding the rule
-              -moz-user-select with a value of all or
-              text.
-            
    3. 
-          

         

       
     
     
-      default_area
+      default_area
+      
{{optional_inline}}
       String
       
         

@@ -172,7 +128,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      default_icon
+      default_icon
+      
{{optional_inline}}
       Object or String
       
         

@@ -206,7 +163,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      default_popup
+      default_popup
+      
{{optional_inline}}
       String
       
         

@@ -261,7 +219,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      default_title
+      default_title
+      
{{optional_inline}}
       String
       
         

@@ -279,7 +238,8 @@ The `action` key is an object that may have any of these properties, all optiona
       
     
     
-      theme_icons
+      theme_icons
+      
{{optional_inline}}
       Array
       
         

diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
index 222f7295e454f12..37901dd16b0b688 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
@@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.browser_action
       
         
 "browser_action": {
-  "browser_style": true,
   "default_icon": {
     "16": "button/geo-16.png",
     "32": "button/geo-32.png"
@@ -72,29 +71,26 @@ The `browser_action` key is an object that may have any of the following propert
   
     
       
-        browser_style
+        
+          
+            browser_style
+          
+        
+        
{{optional_inline}}
       
       Boolean
       
         
Optional, defaulting to false.

-        

-          Use this to include a stylesheet in your popup that will make its look
-          consistent with the browser's UI and with other extensions that use
-          the browser_style property. Although this key defaults to
-          false, it's recommended that you include it and set it to
-          true in order to make your popups consistent with the
-          look of the rest of the browser user interface.
-        

+        

+          

+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
+          

+        

         

           In Firefox, the stylesheet can be seen at
-          chrome://browser/content/extension.css, or
+          chrome://browser/content/extension.css or
           chrome://browser/content/extension-mac.css on macOS. When setting
-          dimensions, be aware that this style sheet currently sets
+          dimensions, be aware that this stylesheet sets
           box-sizing: border-box (see
           box-sizing).
         

@@ -102,8 +98,8 @@ The `browser_action` key is an object that may have any of the following propert
           Browser styles describes the classes you can apply to elements in the popup in
-          order to get particular styles.
+          > describes the classes you can apply to elements in the popup
+          to get particular styles.
         

         

           The
@@ -118,12 +114,12 @@ The `browser_action` key is an object that may have any of the following propert
             Note: Setting browser_style to
             true prevents users from selecting text in an
             extension's popup or sidebar content. This is normal behavior. You
-            can't select parts of the UI in the browser. However, You can work
+            can't select parts of the UI in the browser. However, you can work
             around this limitation to allow your users to select text in two
             ways:
           

           
    
-            
  1. Set browser_style to false
    2. 
+            
  2. Set browser_style to false.
    3. 
             
  3. 
               Use CSS styling on the body of your sidebar or popup's HTML to
               allow text selection by adding the rule
@@ -135,7 +131,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_area
+      default_area
+      
    {{optional_inline}}
       String
       
         
    
@@ -172,7 +169,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_icon
+      default_icon
+      
    {{optional_inline}}
       Object or String
       
         
    
@@ -206,7 +204,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_popup
+      default_popup
+      
    {{optional_inline}}
       String
       
         
    
@@ -261,7 +260,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      default_title
+      default_title
+      
    {{optional_inline}}
       String
       
         
    
@@ -279,7 +279,8 @@ The `browser_action` key is an object that may have any of the following propert
       
     
     
-      theme_icons
+      theme_icons
+      
    {{optional_inline}}
       Array
       
         
    
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
index 6989cb8e643e221..ee5493bbd8aa361 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
@@ -60,40 +60,34 @@ The `options_ui` key is an object with the following contents:
   
     
       
-        browser_style
    {{optional_inline}}
+        
+          
+            browser_style
+          
+        
+        
    {{optional_inline}}
+        
    {{deprecated_inline}} in Manifest V3.
       
       Boolean
       
-        
    Defaults to true.
    
-        
    
-          Use this to include a stylesheet in your page that will make it look
-          consistent with the browser's UI and with other extensions that use
-          the browser_style property. Although it defaults to
-          true, it's recommended that you include this property.
-        
    
+        
    Optional, defaulting to:
    
+          
      
+            
    • true in Manifest V2 and prior to Firefox 115 in Manifest V3.
      • 
+            
    • false in Manifest V3 from Firefox 115.
      • 
+          
    
+        
    
+          
    
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
+          
    
+        
    
         
    
           In Firefox, the stylesheet can be seen at
-          chrome://browser/content/extension.css, or
+          chrome://browser/content/extension.css or
           chrome://browser/content/extension-mac.css on macOS. When
-          setting dimensions, be aware that this style sheet currently sets
+          setting dimensions, be aware that this stylesheet sets
           box-sizing: border-box (see
           box-sizing).
         
    
-        
    
-          The
-          Firefox Style Guide
-          describes the classes you can apply to elements in the popup in order
-          to get particular styles.
-        
    
       
     
     
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
index 9fa8b3827f8b9e8..f23b8c022daa579 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
@@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.page_action
       
         
     "page_action": {
-  "browser_style": true,
   "default_icon": {
     "19": "button/geo-19.png",
     "38": "button/geo-38.png"
@@ -67,37 +66,27 @@ The `page_action` key is an object that may have any of three properties, all op
   
     
       
-        browser_style
+        
+          
+            browser_style
+          
+        
+        
    {{optional_inline}}
+        
    {{deprecated_inline}} in Manifest V3.
       
       Boolean
       
         
    Optional. Defaults to false.
    
-        
    
-          Use this to include a stylesheet in your popup that will make it look
-          consistent with the browser's UI and with other extensions that use
-          the browser_style property. Although this key defaults to
-          false, it's recommended that you include it and set it to
-          true in order to make your popups consistent with the
-          look of the rest of the browser user interface.
-        
    
+        
    
+          
    
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
+          
    
+        
    
         
    
           In Firefox, the stylesheet can be seen at
-          chrome://browser/content/extension.css, or
+          chrome://browser/content/extension.css or
           chrome://browser/content/extension-mac.css on macOS.
         
    
-        
    
-          The
-          Firefox Style Guide
-          describes the classes you can apply to elements in the popup in order
-          to get particular styles.
-        
    
         
    
           The
           
     
       
-        browser_style
+        
+          
+            browser_style
+          
+        
+        
    {{optional_inline}}
+        
    {{deprecated_inline}} in Manifest V3.
       
       Boolean
       
-        
    Optional, defaulting to true.
    
-        
    
-          Use this to include a stylesheet in your popup that will make it look
-          consistent with the browser's UI and with other extensions that use
-          the browser_style property.
-        
    
+        
    Optional, defaulting to:
    
+          
      
+            
    • true in Manifest V2 and prior to Firefox 115 in Manifest V3.
      • 
+            
    • false in Manifest V3 from Firefox 115.
      • 
+          
    
+        
    
+          
    
+            Do not set browser_style to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See Manifest V3 migration for browser_style.
+          
    
+        
    
         
    
           In Firefox, the stylesheet can be seen at
-          chrome://browser/content/extension.css, or
+          chrome://browser/content/extension.css or
           chrome://browser/content/extension-mac.css on macOS. When setting
-          dimensions, be aware that this style sheet currently sets
+          dimensions, be aware that this stylesheet sets
           box-sizing: border-box (see
           box-sizing).
         
    
-        
    
-          The
-          Firefox Style Guide
-          describes the classes you can apply to elements in the sidebar in
-          order to get particular styles.
-        
    
       
     
     
-      default_icon
+      default_icon
+      
    {{optional_inline}}
       Object or String
       
         
    
@@ -177,7 +173,8 @@ The `sidebar_action` key is an object that may have any of the properties listed
       
     
     
-      default_title
+      default_title
+      
    {{optional_inline}}
       String
       
         
    
@@ -205,7 +202,8 @@ The `sidebar_action` key is an object that may have any of the properties listed
       
     
     
-      open_at_install
+      open_at_install
+      
    {{optional_inline}}
       Boolean
       
         Optional, defaulting to true. Determines whether the
@@ -222,8 +220,7 @@ The `sidebar_action` key is an object that may have any of the properties listed
 "sidebar_action": {
   "default_icon": "sidebar.svg",
   "default_title": "My sidebar!",
-  "default_panel": "sidebar.html",
-  "browser_style": true
+  "default_panel": "sidebar.html"
 }
 ```
 
diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
index ebeee9481fa7992..db66dc8881b265a 100644
--- a/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md
@@ -12,18 +12,24 @@ browser-compat:
 
 {{AddonSidebar}}
 
-Certain user interface components - browser and page action [popups](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups), [sidebars](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars), and [options pages](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) - are specified by your extension in essentially the same way:
+Your extension can include user interface elements - browser and page action [popups](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups), [sidebars](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars), and [options pages](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages) - that are specified by:
 
-1. create an HTML file defining the structure of the UI element
-2. add a manifest.json key ([`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), or [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)) pointing to that HTML file.
+1. creating an HTML file defining the structure of the UI element.
+2. adding a manifest.json key ([`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), or [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)) pointing to that HTML file.
 
-One of the challenges with this approach is styling the element in such a way that it fits in with the browser's own style. To help with this, the manifest.json keys include an extra optional property: `browser_style`. If this is included and set to `true`, then your document will get one or more extra stylesheets that will help make it look consistent with the browser's UI and with other extensions that use the `browser_style` property.
+You can style these elements to match the browser's style. The manifest.json keys include an optional property to help with this: `browser_style`. If this is included and set to `true`, your document gets one or more extra stylesheets that help make it look consistent with the browser's UI and with other extensions that use the `browser_style` property.
 
-When considering using `browser_style: true`, you need to test your extension with various themes (built-in or from AMO) to make sure that the extension UI behaves the way you expect it to.
+> **Note:**
+> Support for `browser_style` in Manifest V3 is deprecated. Starting from Firefox 115, the default value of `options_ui.browser_style` and `sidebar_action.browser_style` changes from `true` to `false`. In Firefox 118, `"browser_style": true` will no longer be supported in Manifest V3 extensions.
+> If your Manifest V3 extension depends on the `"browser_style": true` styles, follow the [Manifest V3 migration guide for `browser_style`](#manifest_v3_migration).
+> See ([Firefox bug 1827910](https://bugzil.la/1827910)) for more information.
+> If you want to apply the Firefox style to your extension, see the [Firefox Style Guide](https://acorn.firefox.com/latest/acorn.html).
 
-> **Warning:** When `browser_style: true` is included in your web extension's manifest, text selection in your extension's UI is disabled except in input controls. If this will cause a problem, include browser_style:false instead.
+When considering whether to use `browser_style: true`, test your extension with various themes (built-in or from AMO) to ensure that the extension UI behaves the way you expect it to.
 
-> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style`, so if you wish to support them, you need to add both keys.
+> **Warning:** When `browser_style: true` is included in your web extension's manifest, text selection in your extension's UI is disabled except in input controls. If this causes a problem, include `browser_style:false` instead.
+
+> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style` in Manifest V2. So for cross-browser extensions you need to add both keys. `chrome_style` is not available in Manifest V3.
 
 In Firefox, the stylesheet can be seen at `chrome://browser/content/extension.css`. The extra stylesheet at `chrome://browser/content/extension-mac.css` is also included on macOS.
 
@@ -107,17 +113,21 @@ Most styles are automatically applied, but some elements require you to add the
   
 
 
-> **Note:** See [Firefox bug 1465256](https://bugzil.la/1465256) for removal of this unnecessary requirement.
+## Manifest V3 migration
 
-## Browser compatibility
+As `browser_style` is a deprecated in Manifest V3 you may want to remove support when you migrate your Manifest V2 extensions. Using `options_ui`, as an example, you would you take these steps to remove support for `browser_style`:
 
-{{Compat}}
+- Set `options_ui/browser_style` to `false`.
+- Does the appearance of your extensions UI change?
+  - If the appearance doesn't change, remove the key.
+  - If the appearance changes, experiment to determine what dependency exist and add the relevant properties in the extension's stylesheet. The styles are most likely to cause layout changes are `box-sizing:`, `border-box`, and `display: flex`.
+    If you cannot identify the dependencies, include the content of [extension.css](https://hg.mozilla.org/mozilla-central/raw-file/a445f1762c895000bcdabd9d95697522359d41ed/browser/components/extensions/extension.css) with the extension and delete all parts that aren't relevant, usually the `body` and `body *` blocks as most extensions don't use the `browser-style` class.
 
-## Firefox Panel Components
+## Firefox panel components (legacy)
 
 > **Note:** This feature is non-standard and only works in Firefox.
 
-The `chrome://browser/content/extension.css` stylesheet also contains the styles for the Firefox Panel Components.
+The `chrome://browser/content/extension.css` stylesheet also contains the styles for the legacy Firefox panel components (navigation components).
 
 The [legacy Firefox Style Guide](https://firefoxux.github.io/StyleGuide/#/navigation) documents proper usage.
 
@@ -488,3 +498,7 @@ html > body {
 #### Result
 
 {{EmbedLiveSample("Example","640","360")}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md
index 0e591d10ededfa3..c9d1b02b12e72ec 100644
--- a/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md
@@ -70,7 +70,7 @@ To use the history API, you must request the "`history`" [permission](/en-US/doc
 
 ## Web page design
 
-For details on how to design your web page's to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation.
+For details on how to design your web page's to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html).
 
 ## Examples
 
diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md
index 70080270916da3e..7b9a4cf85f669dd 100644
--- a/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md
@@ -47,18 +47,15 @@ You also need to include the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExten
 
 ```json
 "options_ui": {
-  "page": "options.html",
-  "browser_style": true
+  "page": "options.html"
 },
 ```
 
-> **Note:** **Google Chrome** and **Opera** use `chrome_style` instead of `browser_style`, so if you wish to support them, you need to add both keys.
-
 See the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) page for **sharing options** between your options page and background or content scripts.
 
 ## Options content design
 
-For details on how to design your options content to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation.
+For details on how to design your options content to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html).
 
 ## Examples
 
diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md
index ce3f12495e532e6..6603d0195b4a587 100644
--- a/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md
@@ -59,7 +59,6 @@ You define the page action's properties using the [`page_action`](/en-US/docs/Mo
 
 ```json
 "page_action": {
-  "browser_style": true,
   "default_icon": {
     "19": "button/geo-19.png",
     "38": "button/geo-38.png"
diff --git a/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md b/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md
index e6f819cafccea41..ea0e7400c2b0207 100644
--- a/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md
@@ -30,8 +30,6 @@ The HTML file is included in the extension and specified as part of the [`browse
   }
 ```
 
-You can ask the browser to include a stylesheet in your popup that will make it look consistent with the browser's UI. To do this, include `"browser_style": true` in the [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) or [page_action](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) key.
-
 Popups have a Content Security Policy that restricts the sources from which they can load resources, and disallows some unsafe practices such as the use of [`eval()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval). See [Content Security Policy](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) for more details on this.
 
 ## Debugging popups
@@ -50,7 +48,7 @@ In Firefox Android 57, the popup is shown as a normal page in a new tab.
 
 ## Popup design
 
-For details on how to design your popup's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.
+For details on how to design your popup's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html).
 
 ## Examples
 
diff --git a/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md b/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md
index eade60193202e1a..0a945d7dbc9fc87 100644
--- a/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md
@@ -52,7 +52,6 @@ The main features of the [manifest.json](https://github.com/mdn/webextensions-ex
 
   ```json
     "browser_action": {
-      "browser_style": true,
       "default_title": "Contextual Identities",
       "default_popup": "context.html",
       "default_icon": {
diff --git a/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md b/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md
index e74e4eb7fc9f99a..d3230a74ee780d8 100644
--- a/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md
@@ -64,7 +64,6 @@ To see how {{WebExtAPIRef("tabs.query()")}} and {{WebExtAPIRef("tabs.Tab")}} are
     ```json
     {
       "browser_action": {
-        "browser_style": true,
         "default_title": "Tabs, tabs, tabs",
         "default_popup": "tabs.html"
       },
@@ -454,8 +453,7 @@ Let's walk through how it's set up.
       },
 
       "page_action": {
-        "default_icon": "icons/off.svg",
-        "browser_style": true
+        "default_icon": "icons/off.svg"
       },
 
       "permissions": ["activeTab", "tabs"]
diff --git a/files/en-us/mozilla/firefox/releases/114/index.md b/files/en-us/mozilla/firefox/releases/114/index.md
index df2670b0edf2e7d..d7f81a988452bd2 100644
--- a/files/en-us/mozilla/firefox/releases/114/index.md
+++ b/files/en-us/mozilla/firefox/releases/114/index.md
@@ -69,6 +69,8 @@ This article provides information about the changes in Firefox 114 that affect d
 
 ### Removals
 
+- Support for [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) in the manifest keys [`action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action), [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui), [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action), and [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) is deprecated for Manifest V3 extensions ([Firefox bug 1827910](https://bugzil.la/1827910)). See [Manifest v3 migration](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) for information about transitioning from `browser_style` in Manifest V3 extensions.
+
 ### Other
 
 ## Older versions
diff --git a/files/en-us/mozilla/firefox/releases/115/index.md b/files/en-us/mozilla/firefox/releases/115/index.md
index 4489a58ada9b0ad..2cdb1f13719af96 100644
--- a/files/en-us/mozilla/firefox/releases/115/index.md
+++ b/files/en-us/mozilla/firefox/releases/115/index.md
@@ -55,6 +55,8 @@ This article provides information about the changes in Firefox 115 that affect d
 
 ## Changes for add-on developers
 
+- To support its deprecation from Manifest V3 extensions, manifest key property [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) defaults to `false` in [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui) and [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) for Manifest V3 extensions ([Firefox bug 1830710](https://bugzil.la/1830710)). See [Manifest v3 migration](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) for information about transitioning from `browser_style` in Manifest V3 extensions.
+
 ### Removals
 
 ### Other