CODEWITHSUNDEEP
google-chrome-extensiongoogle-chrome-devtools
Ram
Ram

Reputation: 191

how to access the "styles" sidebarpanel in chrome devtools

I'm trying to build a chrome devTools extension (an extension to the dev tools). The main intent is to create a new sidebarpanel under the "Elements" panel, where I can manipulate data from the Elements panels.

The goal is to observe the CSS changes which the user makes in the "styles" sidebarpanel, and reflect the same in the respective file on disk (I know there is a way to achieve this using source-maps concept. But I'm trying this way though).

I'm new to writing chrome extensions and trying to understand how I can achieve this. I have gone through chrome devtools extension docs, tutplus and many other sites where there are good explainations about writing chrome devtools extensions. But I'm still trying to figure out how I can monitor/observe the styles sidebarpanel in another new panel, and get the modified style info and respective file details. So that I can persist the same to respective physical file.

Thanks!

Upvotes: 2

Views: 358

Answers (1)

wong2
wong2

Reputation: 35700

it seems you can not do it.

you can get ElementsPanel which represents the Elements panel with chrome.devtools.panels.elements, but it only have one event: onSelectionChanged, nothing with the styles sidebar pane.

https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel

Upvotes: 2

Related Questions