devtools.panels.create()

Adds a new panel to the devtools.

This function takes: a title, a URL to an icon file, and a URL to an HTML file. It creates a new panel in the devtools, whose content is specified by the HTML file. It returns a Promise that resolves to an ExtensionPanel object representing the new panel.

句法

var creating = browser.devtools.panels.create(
title

,


// string

iconPath

,


// string

pagePath

// string


)


					

参数

title

string . The panel's title. This will appear in the row of tabs along the top of the devtools window, and is the main way the user will be able to identify your panel.

iconPath

string . Specifies an icon which will be shown next to the title. It's provided as a URL to an image file that's been bundled with your extension. The URL is resolved as relative to the current extension page (unless expressed as an absolute url, e.g. "/icons/panel.png").

pagePath

string. Specifies an HTML file that defines the actual content of the panel. It's provided as a URL to an HTML file that's been bundled with your extension. The URL is resolved as relative to the current extension page (unless expressed as an absolute url, e.g. "/devtools/panel.html"). The HTML file may include CSS and JavaScript files, just like a normal web page. The JavaScript running in the panel will be able to use the devtools APIs. See Extending the developer tools .

返回值

A Promise that will be fulfilled with an ExtensionPanel object representing the new panel.

浏览器兼容性

BCD tables only load in the browser

范例

Create a new panel, and add listeners to its onShown and onHidden events:

function handleShown() {
  console.log("panel is being shown");
}
function handleHidden() {
  console.log("panel is being hidden");
}
browser.devtools.panels.create(
  "My Panel",                 // title
  "/icons/star.png",           // icon
  "/devtools/panel/panel.html" // content
).then((newPanel) => {
  newPanel.onShown.addListener(handleShown);
  newPanel.onHidden.addListener(handleHidden);
});

					

注意: This API is based on Chromium's chrome.devtools.panels API。

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

Found a problem with this page?

最后修改: , 由 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
      1. dns
      2. downloads
      3. events
      4. extension
      5. extensionTypes
      6. find
      7. history
      8. i18n
      9. identity
      10. idle
      11. management
      12. menus
      13. notifications
      14. omnibox
      15. pageAction
      16. permissions
      17. pkcs11
      18. privacy
      19. proxy
      20. runtime
      21. search
      22. sessions
      23. sidebarAction
      24. storage
      25. tabs
      26. theme
      27. topSites
      28. 类型
      29. userScripts
      30. webNavigation
      31. webRequest
      32. windows
    14. 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
    15. Extension Workshop
      1. Develop
      2. Publish
      3. Manage
      4. Enterprise
    16. Contact us
    17. Channels
      1. Add-ons blog
      2. Add-ons forum
      3. Add-ons chat