From a94eb3480cb6f2a812a81121234664a62aa852de Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Tue, 16 Apr 2024 09:34:19 -0700 Subject: [PATCH 1/9] devtools docs WIP --- docs/site/pages/tools/devtools.mdx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/site/pages/tools/devtools.mdx diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx new file mode 100644 index 000000000..c361020d3 --- /dev/null +++ b/docs/site/pages/tools/devtools.mdx @@ -0,0 +1,20 @@ +# Devtools + +Our Devtools player extension has been redesigned to work with manifest v3. It leverages plugins to handle communicated between the inspected Player-UI instance and the devtools extension panel. + +## Devtools architecture +The devtools extension is running an instance of Player. By running an instance of Player in the devtools extension; we are able to leverage the Player plugin system. The plugin author can select which hooks to tap in, what information to gather, and how to interact with it. + +The two instances of Player-UI [The extension and the inspected instance] are communicating through a Messenger class. This messenger class acts as a communication layer this is agnostic, self-sufficient, and a loss-less messenger designed for seamless communication between instances. +It operates indepdently without a bookkeeper ensuring no data loss during communication. + + +## Devtools basic plugin +We provide a basic dev tools plugin that displays information about the inspected Player-ui Instance. It provides plugin information, flow, logs, and exposes a console for expression evaluation. + +## Devtools assets +https://github.com/player-ui/devtools-assets, devtools UI is our collection of asset packages and assets that's designed to be leveraged with our devtools basic plugin. + +## How to write your own devtools plugins + + From 99fd25b29cd4d9a3df156bff0437788db2558b05 Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Wed, 17 Apr 2024 08:15:42 -0700 Subject: [PATCH 2/9] devtools site --- docs/site/pages/tools/devtools.mdx | 35 +++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index c361020d3..7f21afac7 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -1,20 +1,49 @@ # Devtools +## Introduction +https://github.com/player-ui/browser-devtools Our Devtools player extension has been redesigned to work with manifest v3. It leverages plugins to handle communicated between the inspected Player-UI instance and the devtools extension panel. ## Devtools architecture The devtools extension is running an instance of Player. By running an instance of Player in the devtools extension; we are able to leverage the Player plugin system. The plugin author can select which hooks to tap in, what information to gather, and how to interact with it. -The two instances of Player-UI [The extension and the inspected instance] are communicating through a Messenger class. This messenger class acts as a communication layer this is agnostic, self-sufficient, and a loss-less messenger designed for seamless communication between instances. +The two instances of Player-UI [The extension and the inspected instance] are communicating through a Messenger class injected into the content script. This messenger class acts as a communication layer this is agnostic, self-sufficient, and a loss-less messenger designed for seamless communication between instances. It operates indepdently without a bookkeeper ensuring no data loss during communication. +Read more about the Devtools Messenger here https://github.com/player-ui/tools/blob/3ca98bdc70c76e290084b75c5b8f26ebb35b0dd0/devtools/messenger/README.md + +The `devtools-client` is used in our browser-extension https://github.com/player-ui/browser-devtools. This is where you can create custom devtool panels that can be used to debug and inspect your Player-UI Experiences. + ## Devtools basic plugin -We provide a basic dev tools plugin that displays information about the inspected Player-ui Instance. It provides plugin information, flow, logs, and exposes a console for expression evaluation. +We provide a basic dev tools plugin that displays information about the inspected Player-ui Instance. [devtools/plugins/desktop/basic]. This is essentially a player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets +to render the UI. + +As of the current state; the basic plugin will help debug flows, data, and views within player. In the future; we hope to release plugins that will also help with content authoring. ## Devtools assets https://github.com/player-ui/devtools-assets, devtools UI is our collection of asset packages and assets that's designed to be leveraged with our devtools basic plugin. -## How to write your own devtools plugins + +## Usage +To use the extension, you need to have the Player UI Devtools running in the inspected page leveraging one or more devtools plugins and have the extension installed. For more information on how to install and use the Player UI Devtools, check out the Player UI Devtools documentation. +## How to write your own devtools plugins +You may create your own plugins and test them by adding them into the ReactPlayerOptions as plugins. Check out our Player UI Devtools Plugin template thats coming soon. + +``` +const testingPlugins: ReactPlayerOptions["plugins"] = [ + new BasicWevDevtoolsPlugin() as unknown as ReactPlayerPlugin, +]; + +const config: ReactPlayerOptions = { + plugins: [ + new ReferenceAssetsPlugin() as unknown as ReactPlayerPlugin, + ...testingPlugins, + ], +}; +``` + +## Chromestore && Firefox Downloads +Coming soon. From c2cab0ab85faaaf8792155bc0f9ce5b1d4c43ab3 Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Fri, 19 Apr 2024 09:40:03 -0700 Subject: [PATCH 3/9] added more info on usage --- docs/site/pages/tools/devtools.mdx | 54 ++++++++++++++++++++---------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index 7f21afac7..b01ca82f0 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -12,25 +12,12 @@ It operates indepdently without a bookkeeper ensuring no data loss during commun Read more about the Devtools Messenger here https://github.com/player-ui/tools/blob/3ca98bdc70c76e290084b75c5b8f26ebb35b0dd0/devtools/messenger/README.md -The `devtools-client` is used in our browser-extension https://github.com/player-ui/browser-devtools. This is where you can create custom devtool panels that can be used to debug and inspect your Player-UI Experiences. - - -## Devtools basic plugin -We provide a basic dev tools plugin that displays information about the inspected Player-ui Instance. [devtools/plugins/desktop/basic]. This is essentially a player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets -to render the UI. - -As of the current state; the basic plugin will help debug flows, data, and views within player. In the future; we hope to release plugins that will also help with content authoring. - -## Devtools assets -https://github.com/player-ui/devtools-assets, devtools UI is our collection of asset packages and assets that's designed to be leveraged with our devtools basic plugin. - +The `@player-tools/devtools-client` exposes the Panel containing the ReactPlayer responsible for running the content sent by the Player devtool plugins on the inspected Player UI instance and the navigation bar. ## Usage -To use the extension, you need to have the Player UI Devtools running in the inspected page leveraging one or more devtools plugins and have the extension installed. For more information on how to install and use the Player UI Devtools, check out the Player UI Devtools documentation. +Install the devtool extension from the chrome store and firefox store. [Link TBA] - -## How to write your own devtools plugins -You may create your own plugins and test them by adding them into the ReactPlayerOptions as plugins. Check out our Player UI Devtools Plugin template thats coming soon. +In order for the devtools extension communicating with the player in your content; you must have a plugin that is using devtools-client. You may use our `BasicWevDevtoolsPlugin` as one the plugins in your Player UI and that will connect to the browser extension if it is installed. ``` const testingPlugins: ReactPlayerOptions["plugins"] = [ @@ -45,5 +32,36 @@ const config: ReactPlayerOptions = { }; ``` -## Chromestore && Firefox Downloads -Coming soon. + +## Devtools basic plugin +We provide a basic dev tools plugin that displays information about the inspected Player-ui Instance. [devtools/plugins/desktop/basic]. This is essentially a player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets to render the UI. + +As of the current state; the basic plugin will help debug flows, data, and views within player. In the future; we hope to release plugins that will also help with content authoring. + +## Devtools assets +https://github.com/player-ui/devtools-assets, devtools UI is our collection of asset packages and assets that's designed to be leveraged with our devtools basic plugin. + + +## How to write your own devtools plugins +You may create your own plugins and test them by adding them into the ReactPlayerOptions as plugins. In our BasicWebDevtoolsPlugin, we are leveraging the `@player-tools/devtools-messenger` to communicate with the extension. + +const messenger = useMemo(() => { + const options: MessengerOptions = { + id: playerID, + context: "player", + messageCallback: (message) => + dispatch(message as Parameters[0]), + sendMessage, + addListener, + removeListener, + logger: console, + }; + + return new Messenger(options); + }, [addListener, removeListener, sendMessage]); + +You may write other plugins that talk to our extension; or even extend our BasicWebDevtoolsPlugin to add additional views. + +Check out our Player UI Devtools Plugin template thats coming soon. + + From 3ed624192472d5c204306a332dce904fef9df24d Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Mon, 22 Apr 2024 08:12:34 -0700 Subject: [PATCH 4/9] updated with comment suggestions and codeblock --- docs/site/pages/tools/devtools.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index b01ca82f0..4a063ace7 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -2,12 +2,12 @@ ## Introduction https://github.com/player-ui/browser-devtools -Our Devtools player extension has been redesigned to work with manifest v3. It leverages plugins to handle communicated between the inspected Player-UI instance and the devtools extension panel. +Our Devtools player extension has been redesigned to work with manifest v3. It leverages plugins to handle communication between the inspected Player-UI instance and the devtools extension panel. ## Devtools architecture The devtools extension is running an instance of Player. By running an instance of Player in the devtools extension; we are able to leverage the Player plugin system. The plugin author can select which hooks to tap in, what information to gather, and how to interact with it. -The two instances of Player-UI [The extension and the inspected instance] are communicating through a Messenger class injected into the content script. This messenger class acts as a communication layer this is agnostic, self-sufficient, and a loss-less messenger designed for seamless communication between instances. +The two instances of Player [The extension and the inspected instance] are communicating through a Messenger class injected into the content script. This messenger class acts as a communication layer this is agnostic, self-sufficient, and a loss-less messenger designed for seamless communication between instances. It operates indepdently without a bookkeeper ensuring no data loss during communication. Read more about the Devtools Messenger here https://github.com/player-ui/tools/blob/3ca98bdc70c76e290084b75c5b8f26ebb35b0dd0/devtools/messenger/README.md @@ -17,9 +17,9 @@ The `@player-tools/devtools-client` exposes the Panel containing the ReactPlayer ## Usage Install the devtool extension from the chrome store and firefox store. [Link TBA] -In order for the devtools extension communicating with the player in your content; you must have a plugin that is using devtools-client. You may use our `BasicWevDevtoolsPlugin` as one the plugins in your Player UI and that will connect to the browser extension if it is installed. +In order for the devtools extension communicating with the Player in your content; you must have a plugin that is using devtools-client. You may use our `BasicWevDevtoolsPlugin` as one the plugins in your Player integration and that will connect to the browser extension if it is installed. -``` +```javascript const testingPlugins: ReactPlayerOptions["plugins"] = [ new BasicWevDevtoolsPlugin() as unknown as ReactPlayerPlugin, ]; @@ -34,7 +34,7 @@ const config: ReactPlayerOptions = { ## Devtools basic plugin -We provide a basic dev tools plugin that displays information about the inspected Player-ui Instance. [devtools/plugins/desktop/basic]. This is essentially a player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets to render the UI. +We provide a basic dev tools plugin that displays information about the inspected Player Instance. [devtools/plugins/desktop/basic]. This is essentially a Player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets to render the UI. As of the current state; the basic plugin will help debug flows, data, and views within player. In the future; we hope to release plugins that will also help with content authoring. @@ -45,6 +45,9 @@ https://github.com/player-ui/devtools-assets, devtools UI is our collection of a ## How to write your own devtools plugins You may create your own plugins and test them by adding them into the ReactPlayerOptions as plugins. In our BasicWebDevtoolsPlugin, we are leveraging the `@player-tools/devtools-messenger` to communicate with the extension. +```javascript +import { Messenger } from "@player-tools/devtools-messenger"; + const messenger = useMemo(() => { const options: MessengerOptions = { id: playerID, @@ -59,6 +62,7 @@ const messenger = useMemo(() => { return new Messenger(options); }, [addListener, removeListener, sendMessage]); + ``` You may write other plugins that talk to our extension; or even extend our BasicWebDevtoolsPlugin to add additional views. From a9c2af13f8519060fee3b108847ce95495fa70d6 Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Mon, 22 Apr 2024 08:24:43 -0700 Subject: [PATCH 5/9] removed redesigned portion --- docs/site/pages/tools/devtools.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index 4a063ace7..dc14886c7 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -2,7 +2,7 @@ ## Introduction https://github.com/player-ui/browser-devtools -Our Devtools player extension has been redesigned to work with manifest v3. It leverages plugins to handle communication between the inspected Player-UI instance and the devtools extension panel. +Our Devtools Player leverages plugins to handle communication between the inspected Player instance and the devtools extension panel. ## Devtools architecture The devtools extension is running an instance of Player. By running an instance of Player in the devtools extension; we are able to leverage the Player plugin system. The plugin author can select which hooks to tap in, what information to gather, and how to interact with it. From 6cb26d27645389cc38c6740347c4ac86a3340839 Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Mon, 22 Apr 2024 08:26:16 -0700 Subject: [PATCH 6/9] capitalization --- docs/site/pages/tools/devtools.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index dc14886c7..14dacccb1 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -4,7 +4,7 @@ https://github.com/player-ui/browser-devtools Our Devtools Player leverages plugins to handle communication between the inspected Player instance and the devtools extension panel. -## Devtools architecture +## Devtools Architecture The devtools extension is running an instance of Player. By running an instance of Player in the devtools extension; we are able to leverage the Player plugin system. The plugin author can select which hooks to tap in, what information to gather, and how to interact with it. The two instances of Player [The extension and the inspected instance] are communicating through a Messenger class injected into the content script. This messenger class acts as a communication layer this is agnostic, self-sufficient, and a loss-less messenger designed for seamless communication between instances. @@ -33,16 +33,16 @@ const config: ReactPlayerOptions = { ``` -## Devtools basic plugin -We provide a basic dev tools plugin that displays information about the inspected Player Instance. [devtools/plugins/desktop/basic]. This is essentially a Player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets to render the UI. +## Devtools Basic Plugin +We provide a basic devtools plugin that displays information about the inspected Player Instance. [devtools/plugins/desktop/basic]. This is essentially a Player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets to render the UI. As of the current state; the basic plugin will help debug flows, data, and views within player. In the future; we hope to release plugins that will also help with content authoring. -## Devtools assets +## Devtools Assets https://github.com/player-ui/devtools-assets, devtools UI is our collection of asset packages and assets that's designed to be leveraged with our devtools basic plugin. -## How to write your own devtools plugins +## How To Write Your Own Devtools Plugins You may create your own plugins and test them by adding them into the ReactPlayerOptions as plugins. In our BasicWebDevtoolsPlugin, we are leveraging the `@player-tools/devtools-messenger` to communicate with the extension. ```javascript From 7d1c45fab7fe6ef752fe9cbefcacf90df7513ecd Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Tue, 30 Apr 2024 09:29:44 -0700 Subject: [PATCH 7/9] updated content for devtools website --- docs/site/pages/tools/devtools.mdx | 47 ++++++------------------------ 1 file changed, 9 insertions(+), 38 deletions(-) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index 14dacccb1..cfa754ac3 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -1,23 +1,19 @@ # Devtools ## Introduction -https://github.com/player-ui/browser-devtools -Our Devtools Player leverages plugins to handle communication between the inspected Player instance and the devtools extension panel. +It is essential to have developer tool extensions to ensure efficient debugging and inspection of the Player while it runs in the user's application. To make this possible, we have decided to utilize the Player's content and plugin system instead of defining a limited set of features. This approach enables users to represent their specific requirements and utilize the Player to its full potential. ## Devtools Architecture -The devtools extension is running an instance of Player. By running an instance of Player in the devtools extension; we are able to leverage the Player plugin system. The plugin author can select which hooks to tap in, what information to gather, and how to interact with it. +The Devtools extension utilizes an instance of Player to take advantage of its plugin system. Plugin authors can choose which hooks to use, what information to collect, and how to interact with it. -The two instances of Player [The extension and the inspected instance] are communicating through a Messenger class injected into the content script. This messenger class acts as a communication layer this is agnostic, self-sufficient, and a loss-less messenger designed for seamless communication between instances. -It operates indepdently without a bookkeeper ensuring no data loss during communication. +The extension and the inspected instance of Player communicate through a Messenger class that is injected into the content script. The Messenger class is an efficient, agnostic, and self-sufficient layer that enables seamless communication between instances. You can find more information about the Devtools Messenger here: https://github.com/player-ui/tools/blob/3ca98bdc70c76e290084b75c5b8f26ebb35b0dd0/devtools/messenger/README.md. -Read more about the Devtools Messenger here https://github.com/player-ui/tools/blob/3ca98bdc70c76e290084b75c5b8f26ebb35b0dd0/devtools/messenger/README.md - -The `@player-tools/devtools-client` exposes the Panel containing the ReactPlayer responsible for running the content sent by the Player devtool plugins on the inspected Player UI instance and the navigation bar. +The @player-tools/devtools-client package provides a ReactPlayer panel that displays the content sent by the Player dev tool plugins on the inspected Player UI instance and the navigation bar. This allows users to create plugins according to their specific needs, rather than being restricted to a pre-defined set of features. Additionally, they can combine plugins and use different sets for each Player instance. This browser extension provides users with a high degree of flexibility and customization. ## Usage -Install the devtool extension from the chrome store and firefox store. [Link TBA] +To install the dev tool extension, go to the Chrome or Firefox store and download it. After that, register the dev tool plugins into the Player instance by following the same procedure as any other plugin. You can find more information about this in the Player configuration docs. -In order for the devtools extension communicating with the Player in your content; you must have a plugin that is using devtools-client. You may use our `BasicWevDevtoolsPlugin` as one the plugins in your Player integration and that will connect to the browser extension if it is installed. +Please note that dev tools plugins can affect your application's performance. Therefore, we recommend that you only register them when working in development environments. In case you accidentally register a plugin, the browser extension has a checkbox that you can use to enable or disable it. This is an effective way to avoid running plugins unnecessarily or forcing them on production environments. ```javascript const testingPlugins: ReactPlayerOptions["plugins"] = [ @@ -34,38 +30,13 @@ const config: ReactPlayerOptions = { ## Devtools Basic Plugin -We provide a basic devtools plugin that displays information about the inspected Player Instance. [devtools/plugins/desktop/basic]. This is essentially a Player plugin that provides plugin information, flow, logs, and exposes a console for expression evaluation. It uses our devtools-assets to render the UI. +We offer a basic devtools plugin at devtools/plugins/desktop/basic. This plugin includes features that we expect from a dev tools extension and can serve as an example for creating your own. -As of the current state; the basic plugin will help debug flows, data, and views within player. In the future; we hope to release plugins that will also help with content authoring. ## Devtools Assets -https://github.com/player-ui/devtools-assets, devtools UI is our collection of asset packages and assets that's designed to be leveraged with our devtools basic plugin. +You have the freedom to generate any content for your plugin, leveraging all the hooks that Player exposes. However, if you wish to use the Player's dev tool extension, you must use the devtools-assets as assets plugin. On the other hand, if you plan to maintain your extension, you are free to use any assets plugin. ## How To Write Your Own Devtools Plugins -You may create your own plugins and test them by adding them into the ReactPlayerOptions as plugins. In our BasicWebDevtoolsPlugin, we are leveraging the `@player-tools/devtools-messenger` to communicate with the extension. - -```javascript -import { Messenger } from "@player-tools/devtools-messenger"; - -const messenger = useMemo(() => { - const options: MessengerOptions = { - id: playerID, - context: "player", - messageCallback: (message) => - dispatch(message as Parameters[0]), - sendMessage, - addListener, - removeListener, - logger: console, - }; - - return new Messenger(options); - }, [addListener, removeListener, sendMessage]); - ``` - -You may write other plugins that talk to our extension; or even extend our BasicWebDevtoolsPlugin to add additional views. - -Check out our Player UI Devtools Plugin template thats coming soon. - +We're currently working on a template for bootstraping you dev tools plugins. Meanwhile, you can use the (basic devtools plugin)[devtools/plugins/desktop/basic] and test it locally using the (test-env)[devtools/plugins/desktop/basic]. From 125379ea5e5171124438c82df4f67a8e72b81544 Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Tue, 30 Apr 2024 09:52:59 -0700 Subject: [PATCH 8/9] added download link for chrome --- docs/site/pages/tools/devtools.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index cfa754ac3..2eda5e2d5 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -40,3 +40,7 @@ You have the freedom to generate any content for your plugin, leveraging all the ## How To Write Your Own Devtools Plugins We're currently working on a template for bootstraping you dev tools plugins. Meanwhile, you can use the (basic devtools plugin)[devtools/plugins/desktop/basic] and test it locally using the (test-env)[devtools/plugins/desktop/basic]. + +## Downloads +[Chrome](https://chromewebstore.google.com/detail/player-ui-devtools/oookcmbndmalnmacldppblmblakggabo) +Firefox (Coming Soon) \ No newline at end of file From 827be24523c983b6f1fc0db2caf63451d10065f4 Mon Sep 17 00:00:00 2001 From: marky ercillo Date: Tue, 30 Apr 2024 10:03:23 -0700 Subject: [PATCH 9/9] updated Firefox spacing --- docs/site/pages/tools/devtools.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/site/pages/tools/devtools.mdx b/docs/site/pages/tools/devtools.mdx index 2eda5e2d5..363a7632a 100644 --- a/docs/site/pages/tools/devtools.mdx +++ b/docs/site/pages/tools/devtools.mdx @@ -41,6 +41,7 @@ You have the freedom to generate any content for your plugin, leveraging all the We're currently working on a template for bootstraping you dev tools plugins. Meanwhile, you can use the (basic devtools plugin)[devtools/plugins/desktop/basic] and test it locally using the (test-env)[devtools/plugins/desktop/basic]. -## Downloads -[Chrome](https://chromewebstore.google.com/detail/player-ui-devtools/oookcmbndmalnmacldppblmblakggabo) -Firefox (Coming Soon) \ No newline at end of file +## Extension Downloads +[Google Chrome](https://chromewebstore.google.com/detail/player-ui-devtools/oookcmbndmalnmacldppblmblakggabo) + +Firefox | Coming soon \ No newline at end of file