内容表

• 句法
• 范例
• 浏览器兼容性

theme_experiment

"theme_experiment": {
  "stylesheet": "style.css",
  "colors": {
    "popup_affordance": "--arrowpanel-dimmed"
  },
  "images": {
    "theme_toolbar": "--toolbar-bgimage"
  },
  "properties": {
    "toolbar_image_alignment":
    "--toolbar-bgalignment"
  }
}
									

This key enables the definition of experimental theme key properties for the Firefox interface. These experiments are a precursor to proposing new theme features for inclusion in Firefox. Experimentation is done by:

• creating a stylesheet that defines mappings between internal CSS selectors for Firefox UI elements and arbitrary CSS variables. The CSS variables are then mapped in the colors , 图像 ，和 properties objects to new theme key properties.
• (without a stylesheet) using colors , 图像 ，和 properties to map internal Firefox CSS selectors, such as --arrowpanel-dimmed to new theme key properties. This option limits experimentation to UI components that are associated with an inbuilt CSS variable.

To discover the CSS selectors for Firefox UI elements or internal Firefox CSS variables use the browser toolbox .

注意： This key is only available for use in Firefox Developer Edition and Firefox Nightly channels and requires the extensions.experiments.enabled preference to be enabled. In Firefox 73 and earlier, the extensions.legacy.enabled had to be used instead.

警告： This feature is experimental and could be subject to change.

句法

The theme_experiment key is an object that takes the following properties:

范例

This example uses a stylesheet named style.css to provide the ability to set a color for the browser reload button in the theme key.

The stylesheet defines:

#reload-button {
  fill: var(--reload-button-color);
}

					

where #reload-button is the Firefox internal CSS selector for the reload button and --reload-button-color is an arbitrary name.

在 manifest.json file, --reload-button-color is then mapped to the name to be used in the theme colors 特性：

"theme_experiment": {
  "stylesheet": "style.css",
  "colors": {
    "reload_button": "--reload-button-color"
  }
}

					

自变量 reload_button is used in the same way as any other theme 特性：

"theme": {
  "colors": {
    "reload_button": "orange"
  }
}

					

This has the effect of making the reload icon orange.

This property can also be used in browser.theme.update() . 图像 and properties work in a similar way to colors .

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Jan 22, 2022 , 由 MDN 贡献者

相关话题

1. 浏览器扩展名
2. 快速入门

   1. What are extensions?
   2. Your first extension
   3. Your second extension
   4. Anatomy of an extension
   5. Example extensions
   6. What next?
3. 概念

   1. Using the JavaScript APIs
   2. Content scripts
   3. Match patterns
   4. Working with files
   5. 国际化
   6. Content Security Policy
   7. Native messaging
   8. Differences between API implementations
   9. Chrome incompatibilities
4. 用户界面

   1. 用户界面
   2. Toolbar button
   3. Address bar button
   4. Sidebars
   5. Context menu items
   6. Options page
   7. Extension pages
   8. Notifications
   9. Address bar suggestions
   10. Developer tools panels
5. 如何

   1. Intercept HTTP requests
   2. Modify a web page
   3. Insert external content
   4. Share objects with page scripts
   5. Add a button to the toolbar
   6. Implement a settings page
   7. Work with the Tabs API
   8. Work with the Bookmarks API
   9. Work with the Cookies API
   10. Work with contextual identities
   11. Interact with the clipboard
   12. Build a cross-browser extension
6. Firefox differentiators
7. JavaScript API

   1. Browser support for JavaScript APIs
   2. alarms
   3. bookmarks
   4. browserAction
   5. browserSettings
   6. browsingData
   7. captivePortal
   8. clipboard
   9. 命令
   10. contentScripts
   11. contextualIdentities
   12. Cookie
   13. devtools
   14. dns
   15. downloads
   16. events
   17. extension
   18. extensionTypes
   19. find
   20. history
   21. i18n
   22. identity
   23. idle
   24. management
   25. menus
   26. notifications
   27. omnibox
   28. pageAction
   29. permissions
   30. pkcs11
   31. privacy
   32. proxy
   33. runtime
   34. search
   35. sessions
   36. sidebarAction
   37. storage
   38. tabs
   39. theme
   40. topSites
   41. 类型
   42. userScripts
   43. webNavigation
   44. webRequest
   45. windows
8. Manifest keys

   1. 介绍

   1. 作者
   2. background
   3. browser_action
   4. browser_specific_settings
   5. chrome_settings_overrides
   6. chrome_url_overrides
   7. 命令
   8. content_scripts
   9. content_security_policy
   10. default_locale
   11. description
   12. developer
   13. devtools_page
   14. dictionaries
   15. externally_connectable
   16. homepage_url
   17. icons
   18. incognito
   19. manifest_version
   20. name
   21. offline_enabled
   22. omnibox
   23. optional_permissions
   24. options_page
   25. options_ui
   26. page_action
   27. permissions
   28. protocol_handlers
   29. short_name
   30. sidebar_action
   31. storage
   32. theme
   33. theme_experiment
   34. user_scripts
   35. version
   36. version_name
   37. web_accessible_resources
9. Extension Workshop

   1. Develop
   2. Publish
   3. Manage
   4. Enterprise
10. Contact us
11. Channels

    1. Add-ons blog
    2. Add-ons forum
    3. Add-ons chat