Skip to content

Commit

Permalink
browser_style deprecated in MV3 (#26642)
Browse files Browse the repository at this point in the history 
* browser_style deprecated in MV3

* WIP feedback changes

* Remove other references to setting browser_style

* Apply suggestions from review

Co-authored-by: Rob Wu <rob@robwu.nl>

* Further updates on feedback

* Feedback updates

* Remove style guide reference from sidebar_action and page_action

* Release note updates

* Feedback from review

Co-authored-by: Rob Wu <rob@robwu.nl>

---------

Co-authored-by: Rob Wu <rob@robwu.nl>
Co-authored-by: Queen Vinyl Da.i'gyu-Kazotetsu <vinyldarkscratch@gmail.com>
  • Loading branch information
@rebloor @Rob--W @queengooborg
3 people committed May 22, 2023
1 parent f4d194e commit e1a6767
Show file tree
Hide file tree
Showing 15 changed files with 142 additions and 194 deletions.
8 changes: 3 additions & 5 deletions files/en-us/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md
View file
Expand Up @@ -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",
Expand All @@ -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:

Expand Down
78 changes: 19 additions & 59 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/action/index.md
View file
Expand Up @@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.action
<td>
<pre class="brush: json">
"action": {
"browser_style": true,
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
Expand Down Expand Up @@ -72,70 +71,27 @@ The `action` key is an object that may have any of these properties, all optiona
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
>
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
<br />{{deprecated_inline}}
</td>
<td><code>Boolean</code></td>
<td>
<p>Optional, defaulting to <code>false</code>.</p>
<p>
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 <code>browser_style</code> property. Although this key defaults to
<code>false</code>, it's recommended that you include it and set it to
<code>true</code> in order to make your popups consistent with the
look of the rest of the browser user interface.
</p>
<p>
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
<code>box-sizing: border-box</code> (see
<a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a>).
</p>
<p>
<a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>Browser styles</a
> describes the classes you can apply to elements in the popup in
order to get particular styles.
</p>
<p>
The
<a
href="https://github.com/mdn/webextensions-examples/tree/master/latest-download"
>latest-download</a
>
example extension uses <code>browser_style</code> in its popup.
</p>
<div class="notecard note">
<div class="notecard warning">
<p>
<strong>Note:</strong> Setting <code>browser_style</code> to
<code>true</code> 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 <code>browser_style</code> to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration">Manifest V3 migration for <code>browser_style</code></a>.
</p>
<ol>
<li>Set <code>browser_style</code> to <code>false</code></li>
<li>
Use CSS styling on the body of your sidebar or popup's HTML to
allow text selection by adding the rule
<code>-moz-user-select</code> with a value of <code>all</code> or
<code>text</code>.
</li>
</ol>
</div>
</td>
</tr>
<tr>
<td><code>default_area</code></td>
<td><code>default_area</code>
<br />{{optional_inline}}</td>
<td><code>String</code></td>
<td>
<p>
Expand Down Expand Up @@ -172,7 +128,8 @@ The `action` key is an object that may have any of these properties, all optiona
</td>
</tr>
<tr>
<td><code>default_icon</code></td>
<td><code>default_icon</code>
<br />{{optional_inline}}</td>
<td><code>Object</code> or <code>String</code></td>
<td>
<p>
Expand Down Expand Up @@ -206,7 +163,8 @@ The `action` key is an object that may have any of these properties, all optiona
</td>
</tr>
<tr>
<td><code>default_popup</code></td>
<td><code>default_popup</code>
<br />{{optional_inline}}</td>
<td><code>String</code></td>
<td>
<p>
Expand Down Expand Up @@ -261,7 +219,8 @@ The `action` key is an object that may have any of these properties, all optiona
</td>
</tr>
<tr>
<td><code>default_title</code></td>
<td><code>default_title</code>
<br />{{optional_inline}}</td>
<td><code>String</code></td>
<td>
<p>
Expand All @@ -279,7 +238,8 @@ The `action` key is an object that may have any of these properties, all optiona
</td>
</tr>
<tr>
<td><code>theme_icons</code></td>
<td><code>theme_icons</code>
<br />{{optional_inline}}</td>
<td><code>Array</code></td>
<td>
<p>
Expand Down
53 changes: 27 additions & 26 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md
View file
Expand Up @@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.browser_action
<td>
<pre class="brush: json">
"browser_action": {
"browser_style": true,
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
Expand Down Expand Up @@ -72,38 +71,35 @@ The `browser_action` key is an object that may have any of the following propert
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
>
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
</td>
<td><code>Boolean</code></td>
<td>
<p>Optional, defaulting to <code>false</code>.</p>
<p>
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 <code>browser_style</code> property. Although this key defaults to
<code>false</code>, it's recommended that you include it and set it to
<code>true</code> in order to make your popups consistent with the
look of the rest of the browser user interface.
</p>
<div class="notecard warning">
<p>
Do not set <code>browser_style</code> to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration">Manifest V3 migration for <code>browser_style</code></a>.
</p>
</div>
<p>
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
<code>box-sizing: border-box</code> (see
<a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a>).
</p>
<p>
<a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>Browser styles</a
> 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.
</p>
<p>
The
Expand All @@ -118,12 +114,12 @@ The `browser_action` key is an object that may have any of the following propert
<strong>Note:</strong> Setting <code>browser_style</code> to
<code>true</code> 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:
</p>
<ol>
<li>Set <code>browser_style</code> to <code>false</code></li>
<li>Set <code>browser_style</code> to <code>false</code>.</li>
<li>
Use CSS styling on the body of your sidebar or popup's HTML to
allow text selection by adding the rule
Expand All @@ -135,7 +131,8 @@ The `browser_action` key is an object that may have any of the following propert
</td>
</tr>
<tr>
<td><code>default_area</code></td>
<td><code>default_area</code>
<br />{{optional_inline}}</td>
<td><code>String</code></td>
<td>
<p>
Expand Down Expand Up @@ -172,7 +169,8 @@ The `browser_action` key is an object that may have any of the following propert
</td>
</tr>
<tr>
<td><code>default_icon</code></td>
<td><code>default_icon</code>
<br />{{optional_inline}}</td>
<td><code>Object</code> or <code>String</code></td>
<td>
<p>
Expand Down Expand Up @@ -206,7 +204,8 @@ The `browser_action` key is an object that may have any of the following propert
</td>
</tr>
<tr>
<td><code>default_popup</code></td>
<td><code>default_popup</code>
<br />{{optional_inline}}</td>
<td><code>String</code></td>
<td>
<p>
Expand Down Expand Up @@ -261,7 +260,8 @@ The `browser_action` key is an object that may have any of the following propert
</td>
</tr>
<tr>
<td><code>default_title</code></td>
<td><code>default_title</code>
<br />{{optional_inline}}</td>
<td><code>String</code></td>
<td>
<p>
Expand All @@ -279,7 +279,8 @@ The `browser_action` key is an object that may have any of the following propert
</td>
</tr>
<tr>
<td><code>theme_icons</code></td>
<td><code>theme_icons</code>
<br />{{optional_inline}}</td>
<td><code>Array</code></td>
<td>
<p>
Expand Down
44 changes: 19 additions & 25 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
View file
Expand Up @@ -60,40 +60,34 @@ The `options_ui` key is an object with the following contents:
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
><br />{{optional_inline}}
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
<br />{{deprecated_inline}} in Manifest V3.
</td>
<td><code>Boolean</code></td>
<td>
<p>Defaults to <code>true</code>.</p>
<p>
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 <code>browser_style</code> property. Although it defaults to
<code>true</code>, it's recommended that you include this property.
</p>
<p>Optional, defaulting to:</p>
<ul>
<li><code>true</code> in Manifest V2 and prior to Firefox 115 in Manifest V3.</li>
<li><code>false</code> in Manifest V3 from Firefox 115.</li>
</ul>
<div class="notecard warning">
<p>
Do not set <code>browser_style</code> to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration">Manifest V3 migration for <code>browser_style</code></a>.
</p>
</div>
<p>
In Firefox, the stylesheet can be seen at
<code>chrome://browser/content/extension.css</code>, or
<code>chrome://browser/content/extension.css</code> or
<code>chrome://browser/content/extension-mac.css</code> on macOS. When
setting dimensions, be aware that this style sheet currently sets
setting dimensions, be aware that this stylesheet sets
<code>box-sizing: border-box</code> (see
<a href="/en-US/docs/Web/CSS/box-sizing">box-sizing</a>).
</p>
<p>
The
<a
class="external external-icon"
href="https://acorn.firefox.com/latest/acorn.html"
>Firefox Style Guide</a
>
describes the classes you can apply to elements in the popup in order
to get particular styles.
</p>
</td>
</tr>
<tr>
Expand Down
37 changes: 13 additions & 24 deletions files/en-us/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
View file
Expand Up @@ -26,7 +26,6 @@ browser-compat: webextensions.manifest.page_action
<td>
<pre class="brush: json">
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
Expand Down Expand Up @@ -67,37 +66,27 @@ The `page_action` key is an object that may have any of three properties, all op
<tbody>
<tr>
<td>
<code
><a
href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"
>browser_style</a
></code
>
<code>
<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">
browser_style
</a>
</code>
<br />{{optional_inline}}
<br />{{deprecated_inline}} in Manifest V3.
</td>
<td><code>Boolean</code></td>
<td>
<p>Optional. Defaults to <code>false</code>.</p>
<p>
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 <code>browser_style</code> property. Although this key defaults to
<code>false</code>, it's recommended that you include it and set it to
<code>true</code> in order to make your popups consistent with the
look of the rest of the browser user interface.
</p>
<div class="notecard warning">
<p>
Do not set <code>browser_style</code> to true: it is deprecated in Manifest V3, and support will be removed in Firefox 118. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration">Manifest V3 migration for <code>browser_style</code></a>.
</p>
</div>
<p>
In Firefox, the stylesheet can be seen at
<code>chrome://browser/content/extension.css</code>, or
<code>chrome://browser/content/extension.css</code> or
<code>chrome://browser/content/extension-mac.css</code> on macOS.
</p>
<p>
The
<a href="https://firefoxux.github.io/StyleGuide/#/controls"
>Firefox Style Guide</a
>
describes the classes you can apply to elements in the popup in order
to get particular styles.
</p>
<p>
The
<a
Expand Down

0 comments on commit e1a6767

Please sign in to comment.