Source code
Revision control
Copy as Markdown
Other Tools
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this file,
<!doctype html>
<html>
<head>
<title data-l10n-id="addons-page-title"></title>
<meta
http-equiv="Content-Security-Policy"
content="default-src chrome:; style-src chrome: 'unsafe-inline'; img-src chrome: file: jar: https: http:; connect-src chrome: data: https: http:; object-src 'none'"
/>
<meta name="color-scheme" content="light dark" />
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<link
rel="stylesheet"
href="chrome://mozapps/content/extensions/aboutaddons.css"
/>
<link
rel="stylesheet"
href="chrome://mozapps/content/extensions/shortcuts.css"
/>
<link
rel="shortcut icon"
href="chrome://mozapps/skin/extensions/extension.svg"
/>
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="toolkit/about/aboutAddons.ftl" />
<link rel="localization" href="toolkit/global/extensionPermissions.ftl" />
<!-- Defer scripts so all the templates are loaded by the time they run. -->
<script
defer
src="chrome://mozapps/content/extensions/aboutaddonsCommon.js"
></script>
<script
defer
src="chrome://mozapps/content/extensions/abuse-reports.js"
></script>
<script
defer
src="chrome://mozapps/content/extensions/shortcuts.js"
></script>
<script
defer
src="chrome://mozapps/content/extensions/drag-drop-addon-installer.js"
></script>
<script
defer
src="chrome://mozapps/content/extensions/view-controller.js"
></script>
<script
defer
src="chrome://mozapps/content/extensions/aboutaddons.js"
></script>
<script
type="module"
src="chrome://global/content/elements/moz-message-bar.mjs"
></script>
<script
type="module"
src="chrome://global/content/elements/moz-toggle.mjs"
></script>
<script
type="module"
src="chrome://global/content/elements/moz-support-link.mjs"
></script>
<script
type="module"
src="chrome://global/content/elements/moz-five-star.mjs"
></script>
</head>
<body>
<drag-drop-addon-installer></drag-drop-addon-installer>
<div id="full">
<div id="sidebar">
<categories-box id="categories" orientation="vertical">
<button
is="discover-button"
class="category"
role="tab"
name="discover"
></button>
<button
is="category-button"
class="category"
role="tab"
name="extension"
></button>
<button
is="category-button"
class="category"
role="tab"
name="theme"
></button>
<button
is="category-button"
class="category"
role="tab"
name="plugin"
></button>
<button
is="category-button"
class="category"
role="tab"
name="dictionary"
hidden
default-hidden
></button>
<button
is="category-button"
class="category"
role="tab"
name="locale"
hidden
default-hidden
></button>
<button
is="category-button"
class="category"
role="tab"
name="sitepermission"
hidden
default-hidden
></button>
<button
is="category-button"
class="category"
role="tab"
name="available-updates"
hidden
default-hidden
></button>
<button
is="category-button"
class="category"
role="tab"
name="recent-updates"
hidden
default-hidden
></button>
</categories-box>
<div class="spacer"></div>
<sidebar-footer></sidebar-footer>
</div>
<div id="content">
<addon-page-header
id="page-header"
page-options-id="page-options"
></addon-page-header>
<addon-page-options id="page-options"></addon-page-options>
<div id="main"></div>
</div>
</div>
<proxy-context-menu id="contentAreaContextMenu"></proxy-context-menu>
<template name="addon-page-header">
<div class="sticky-container">
<div class="main-search">
<label
for="search-addons"
class="search-label"
data-l10n-id="default-heading-search-label"
></label>
<search-addons></search-addons>
</div>
<div class="main-heading">
<button
class="back-button"
action="go-back"
data-l10n-id="header-back-button"
hidden
></button>
<h1 class="header-name"></h1>
<div class="spacer"></div>
<addon-updates-message
id="updates-message"
hidden
></addon-updates-message>
<div class="page-options-menu">
<button
class="more-options-button"
action="page-options"
aria-haspopup="menu"
aria-expanded="false"
data-l10n-id="addon-page-options-button"
></button>
</div>
</div>
</div>
<global-warnings></global-warnings>
</template>
<template name="addon-page-options">
<panel-list>
<panel-item
action="check-for-updates"
data-l10n-id="addon-updates-check-for-updates"
data-l10n-attrs="accesskey"
></panel-item>
<panel-item
action="view-recent-updates"
data-l10n-id="addon-updates-view-updates"
data-l10n-attrs="accesskey"
></panel-item>
<hr />
<panel-item
action="install-from-file"
data-l10n-id="addon-install-from-file"
data-l10n-attrs="accesskey"
></panel-item>
<panel-item
action="debug-addons"
data-l10n-id="addon-open-about-debugging"
data-l10n-attrs="accesskey"
></panel-item>
<hr />
<panel-item
action="set-update-automatically"
data-l10n-id="addon-updates-update-addons-automatically"
data-l10n-attrs="accesskey"
type="checkbox"
></panel-item>
<panel-item
action="reset-update-states"
data-l10n-attrs="accesskey"
></panel-item>
<hr />
<panel-item
action="manage-shortcuts"
data-l10n-id="addon-manage-extensions-shortcuts"
data-l10n-attrs="accesskey"
></panel-item>
</panel-list>
</template>
<template name="addon-options">
<panel-list>
<panel-item
data-l10n-id="remove-addon-button"
action="remove"
></panel-item>
<panel-item
data-l10n-id="install-update-button"
action="install-update"
badged
></panel-item>
<panel-item
data-l10n-id="preferences-addon-button"
action="preferences"
></panel-item>
<hr />
<panel-item
data-l10n-id="report-addon-button"
action="report"
></panel-item>
<hr />
<panel-item
data-l10n-id="manage-addon-button"
action="expand"
></panel-item>
</panel-list>
</template>
<template name="plugin-options">
<panel-list>
<panel-item
data-l10n-id="always-activate-button"
action="always-activate"
type="checkbox"
></panel-item>
<panel-item
data-l10n-id="never-activate-button"
action="never-activate"
type="checkbox"
></panel-item>
<hr />
<panel-item
data-l10n-id="preferences-addon-button"
action="preferences"
></panel-item>
<hr />
<panel-item
data-l10n-id="manage-addon-button"
action="expand"
></panel-item>
</panel-list>
</template>
<template name="addon-permissions-list">
<div class="addon-permissions-required" hidden>
<h2
class="permission-header"
data-l10n-id="addon-permissions-required"
></h2>
<ul class="addon-permissions-list"></ul>
</div>
<div class="addon-permissions-optional" hidden>
<h2
class="permission-header"
data-l10n-id="addon-permissions-optional"
></h2>
<ul class="addon-permissions-list"></ul>
</div>
<div
class="addon-detail-row addon-permissions-empty"
data-l10n-id="addon-permissions-empty2"
hidden
></div>
<div class="addon-detail-row">
<a
is="moz-support-link"
support-page="extension-permissions"
data-l10n-id="addon-permissions-learnmore"
></a>
</div>
</template>
<template name="addon-sitepermissions-list">
<div class="addon-permissions-required" hidden>
<h2
class="permission-header"
data-l10n-id="addon-sitepermissions-required"
>
<span
data-l10n-name="hostname"
class="addon-sitepermissions-host"
></span>
</h2>
<ul class="addon-permissions-list"></ul>
</div>
</template>
<template name="card">
<div class="card addon">
<img class="card-heading-image" role="presentation" />
<div class="addon-card-collapsed">
<img class="card-heading-icon addon-icon" alt="" />
<div class="card-contents">
<div class="addon-name-container">
<a
class="addon-badge addon-badge-recommended"
is="moz-support-link"
support-page="add-on-badges"
utm-content="promoted-addon-badge"
data-l10n-id="addon-badge-recommended2"
hidden
>
</a>
<a
class="addon-badge addon-badge-line"
is="moz-support-link"
support-page="add-on-badges"
utm-content="promoted-addon-badge"
data-l10n-id="addon-badge-line3"
hidden
>
</a>
<a
class="addon-badge addon-badge-verified"
is="moz-support-link"
support-page="add-on-badges"
utm-content="promoted-addon-badge"
data-l10n-id="addon-badge-verified2"
hidden
>
</a>
<a
class="addon-badge addon-badge-private-browsing-allowed"
is="moz-support-link"
support-page="extensions-pb"
data-l10n-id="addon-badge-private-browsing-allowed2"
hidden
>
</a>
<div class="spacer"></div>
<button
class="theme-enable-button"
action="toggle-disabled"
hidden
></button>
<moz-toggle
class="extension-enable-button"
action="toggle-disabled"
data-l10n-id="extension-enable-addon-button-label"
hidden
></moz-toggle>
<button
class="more-options-button"
action="more-options"
data-l10n-id="addon-options-button"
aria-haspopup="menu"
aria-expanded="false"
></button>
</div>
<!-- This ends up in the tab order when the ellipsis happens, but it isn't necessary. -->
<span class="addon-description" tabindex="-1"></span>
</div>
</div>
<moz-message-bar
class="update-postponed-bar"
data-l10n-id="install-postponed-message2"
align="center"
hidden
>
<button
slot="actions"
action="install-postponed"
data-l10n-id="install-postponed-button"
></button>
</moz-message-bar>
<moz-message-bar class="addon-card-message" align="center" hidden>
<!-- A button or a SUMO page link are going to be slotted into this messagebar
(e.g. a button is used for non-SUMO links, like blocklist urls).
See addon-card custom element's updateMessage method and
getAddonMessageInfo helper defined in aboutaddons.js.
-->
</moz-message-bar>
</div>
</template>
<template name="addon-name-container-in-disco-card">
<div class="disco-card-head">
<h3 class="disco-addon-name"></h3>
<span class="disco-addon-author"
><a data-l10n-name="author" target="_blank"></a
></span>
</div>
<button class="disco-cta-button" action="install-addon"></button>
<button
class="disco-cta-button"
data-l10n-id="manage-addon-button"
action="manage-addon"
></button>
</template>
<template name="addon-description-in-disco-card">
<div>
<span class="disco-description-main"></span>
</div>
<div class="disco-description-statistics">
<moz-five-star></moz-five-star>
<span class="disco-user-count"></span>
</div>
</template>
<template name="addon-details">
<button-group class="tab-group">
<button
is="named-deck-button"
deck="details-deck"
name="details"
data-l10n-id="details-addon-button"
class="tab-button ghost-button"
></button>
<button
is="named-deck-button"
deck="details-deck"
name="preferences"
data-l10n-id="preferences-addon-button"
class="tab-button ghost-button"
></button>
<button
is="named-deck-button"
deck="details-deck"
name="permissions"
data-l10n-id="permissions-addon-button"
class="tab-button ghost-button"
></button>
<button
is="named-deck-button"
deck="details-deck"
name="release-notes"
data-l10n-id="release-notes-addon-button"
class="tab-button ghost-button"
></button>
</button-group>
<named-deck id="details-deck" is-tabbed>
<section name="details">
<div class="addon-detail-description-wrapper">
<div class="addon-detail-description"></div>
<button
class="button-link addon-detail-description-toggle"
data-l10n-id="addon-detail-description-expand"
hidden
></button>
</div>
<div class="addon-detail-contribute">
<label data-l10n-id="detail-contributions-description"></label>
<button
class="addon-detail-contribute-button"
action="contribute"
data-l10n-id="detail-contributions-button"
data-l10n-attrs="accesskey"
></button>
</div>
<div class="addon-detail-sitepermissions">
<addon-sitepermissions-list></addon-sitepermissions-list>
</div>
<div
class="addon-detail-row addon-detail-row-updates"
role="group"
data-l10n-id="addon-detail-group-label-updates"
>
<span data-l10n-id="addon-detail-updates-label"></span>
<div class="addon-detail-actions">
<button
class="button-link"
data-l10n-id="addon-detail-update-check-label"
action="update-check"
hidden
></button>
<label class="radio-container-with-text">
<input type="radio" name="autoupdate" value="1" />
<span data-l10n-id="addon-detail-updates-radio-default"></span>
</label>
<label class="radio-container-with-text">
<input type="radio" name="autoupdate" value="2" />
<span data-l10n-id="addon-detail-updates-radio-on"></span>
</label>
<label class="radio-container-with-text">
<input type="radio" name="autoupdate" value="0" />
<span data-l10n-id="addon-detail-updates-radio-off"></span>
</label>
</div>
</div>
<div
class="addon-detail-row addon-detail-row-has-help addon-detail-row-private-browsing"
role="group"
data-l10n-id="addon-detail-group-label-private-browsing"
hidden
>
<span data-l10n-id="detail-private-browsing-label"></span>
<div class="addon-detail-actions">
<label class="radio-container-with-text">
<input type="radio" name="private-browsing" value="1" />
<span data-l10n-id="addon-detail-private-browsing-allow"></span>
</label>
<label class="radio-container-with-text">
<input type="radio" name="private-browsing" value="0" />
<span
data-l10n-id="addon-detail-private-browsing-disallow"
></span>
</label>
</div>
</div>
<div
class="addon-detail-row addon-detail-help-row"
data-l10n-id="addon-detail-private-browsing-help"
hidden
>
<a
is="moz-support-link"
support-page="extensions-pb"
data-l10n-name="learn-more"
></a>
</div>
<div
class="addon-detail-row addon-detail-row-has-help addon-detail-row-private-browsing-disallowed"
hidden
>
<label data-l10n-id="detail-private-disallowed-label"></label>
</div>
<div
class="addon-detail-row addon-detail-help-row"
data-l10n-id="detail-private-disallowed-description2"
hidden
>
<a
is="moz-support-link"
data-l10n-name="learn-more"
support-page="extensions-pb"
></a>
</div>
<div
class="addon-detail-row addon-detail-row-has-help addon-detail-row-private-browsing-required"
hidden
>
<label
class="learn-more-label-link"
data-l10n-id="detail-private-required-label"
></label>
</div>
<div
class="addon-detail-row addon-detail-help-row"
data-l10n-id="detail-private-required-description2"
hidden
>
<a
is="moz-support-link"
data-l10n-name="learn-more"
support-page="extensions-pb"
></a>
</div>
<div
class="addon-detail-row addon-detail-row-has-help addon-detail-row-quarantined-domains"
role="group"
data-l10n-id="addon-detail-group-label-quarantined-domains"
hidden
>
<span data-l10n-id="addon-detail-quarantined-domains-label"></span>
<div class="addon-detail-actions">
<label class="radio-container-with-text">
<input
type="radio"
name="quarantined-domains-user-allowed"
value="1"
/>
<span
data-l10n-id="addon-detail-quarantined-domains-allow"
></span>
</label>
<label class="radio-container-with-text">
<input
type="radio"
name="quarantined-domains-user-allowed"
value="0"
/>
<span
data-l10n-id="addon-detail-quarantined-domains-disallow"
></span>
</label>
</div>
</div>
<div class="addon-detail-row addon-detail-help-row" hidden>
<span data-l10n-id="addon-detail-quarantined-domains-help"></span>
<a is="moz-support-link" support-page="quarantined-domains"></a>
</div>
<div class="addon-detail-row addon-detail-row-author">
<label data-l10n-id="addon-detail-author-label"></label>
<a target="_blank"></a>
</div>
<div class="addon-detail-row addon-detail-row-version">
<label data-l10n-id="addon-detail-version-label"></label>
</div>
<div class="addon-detail-row addon-detail-row-lastUpdated">
<label data-l10n-id="addon-detail-last-updated-label"></label>
</div>
<div class="addon-detail-row addon-detail-row-homepage">
<label data-l10n-id="addon-detail-homepage-label"></label>
<!-- URLs should always be displayed as LTR. -->
<a target="_blank" dir="ltr"></a>
</div>
<div class="addon-detail-row addon-detail-row-rating">
<label data-l10n-id="addon-detail-rating-label"></label>
<div class="addon-detail-rating">
<moz-five-star></moz-five-star>
<a target="_blank"></a>
</div>
</div>
</section>
<inline-options-browser name="preferences"></inline-options-browser>
<addon-permissions-list name="permissions"></addon-permissions-list>
<update-release-notes name="release-notes"></update-release-notes>
</named-deck>
</template>
<template name="taar-notice">
<moz-message-bar
class="discopane-notice"
data-l10n-id="discopane-notice-recommendations2"
dismissable
>
<a
is="moz-support-link"
support-page="personalized-addons"
data-l10n-id="discopane-notice-learn-more"
action="notice-learn-more"
slot="support-link"
></a>
</moz-message-bar>
</template>
<template name="recommended-footer">
<div class="amo-link-container view-footer-item">
<button
class="primary"
action="open-amo"
data-l10n-id="find-more-addons"
></button>
</div>
<div class="view-footer-item">
<a
class="privacy-policy-link"
data-l10n-id="privacy-policy"
target="_blank"
></a>
</div>
</template>
<template name="discopane">
<header>
<p>
<span data-l10n-id="discopane-intro2">
<a
class="discopane-intro-learn-more-link"
is="moz-support-link"
support-page="recommended-extensions-program"
data-l10n-name="learn-more-trigger"
>
</a>
</span>
</p>
</header>
<taar-notice></taar-notice>
<recommended-addon-list></recommended-addon-list>
<footer is="recommended-footer" class="view-footer"></footer>
</template>
<template name="recommended-extensions-section">
<h2
data-l10n-id="recommended-extensions-heading"
class="header-name recommended-heading"
></h2>
<taar-notice></taar-notice>
<recommended-addon-list
type="extension"
hide-installed
></recommended-addon-list>
<footer is="recommended-footer" class="view-footer"></footer>
</template>
<template name="recommended-themes-footer">
<p data-l10n-id="recommended-theme-1" class="theme-recommendation">
<a data-l10n-name="link" target="_blank"></a>
</p>
<div class="amo-link-container view-footer-item">
<button
class="primary"
action="open-amo"
data-l10n-id="find-more-themes"
></button>
</div>
</template>
<template name="recommended-themes-section">
<h2
data-l10n-id="recommended-themes-heading"
class="header-name recommended-heading"
></h2>
<recommended-addon-list
type="theme"
hide-installed
></recommended-addon-list>
<footer is="recommended-themes-footer" class="view-footer"></footer>
</template>
<template id="shortcut-view">
<div class="error-message">
<img
class="error-message-icon"
src="chrome://global/skin/arrow/panelarrow-vertical.svg"
/>
<div class="error-message-label"></div>
</div>
<message-bar-stack
id="duplicate-warning-messages"
reverse
max-message-bar-count="5"
>
</message-bar-stack>
</template>
<template id="shortcut-card-template">
<div class="card card-no-hover shortcut">
<div class="card-heading">
<img class="card-heading-icon addon-icon" />
<h2 class="addon-name"></h2>
</div>
</div>
</template>
<template id="shortcut-row-template">
<div class="shortcut-row">
<label class="shortcut-label"></label>
<input
class="shortcut-input"
data-l10n-id="shortcuts-input"
type="text"
readonly
/>
<button
class="shortcut-remove-button ghost-button"
data-l10n-id="shortcuts-remove-button"
data-l10n-attrs="aria-label"
></button>
</div>
</template>
<template id="expand-row-template">
<div class="expand-row">
<button class="expand-button"></button>
</div>
</template>
<template id="shortcuts-no-addons">
<div data-l10n-id="shortcuts-no-addons"></div>
</template>
<template id="shortcuts-no-commands-template">
<div data-l10n-id="shortcuts-no-commands"></div>
<ul class="shortcuts-no-commands-list"></ul>
</template>
</body>
</html>