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!
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
Related
Is is possible to add a new sidebar to the network panel in Chrome devtools?
I have checked the chrome devtools API documentation (https://developer.chrome.com/extensions/devtools_panels) but there only seems to be mention of the elements and sources panels.
Just wondering if maybe someone knows if it is possible to gain access to the other panels?
My goal is to add a new tab after the timing tab that can show some relevant information about this specific request and its contents.
I have recently created a extension for devtools, which adds a new ExtensionPanel on devtools. Since this panel is useful only on certain pages, I wanted to show it conditionally depending on contents of current page. I can create a panel dynamically,depending on context of the page, but I was unable to find any way to close it (I've tried window.close() and panel itself doesn't have any methods like this).
So my question: Is there any way to close ExtensionPanel programmatically?
This is not supported by DevTools at the moment -- if you add a panel or sidebar, it's for the life of DevTools front-end. All stock DevTools panels are displayed unconditionally and the rationale for the lack of API methods to remove panels is to avoid confusion created by panels coming and going. If a panel is not applicable to the page being inspected at the moment, you can perhaps display a banner explaining why it's not applicable.
After many hours of research, I've seen multiple ways to do similar things. But I don't want to pigeonhole myself into approaching this in the wrong way, so I would appreciate any advice on how to achieve the following.
When clicking on my extension icon, I want to load a toolbar onto the current page. This toolbar has a number of links and forms that can:
Interact with the original page (DOM Listeners, changing the DOM)
Create additional extension popups on the original page
Make requests to external resources
From a JS perspective, I think it would be easiest to inject all my own HTML directly on the page and handle functionality via one content script. I abandoned that approach after realizing I'd never be able to account for all CSS conflicts in my popups.
So instead, this is what I have so far. When clicking on my Extension icon, I inject a div into the current page and load up an iframe sourced to a popup.html via chrome.extension.getURL('popup1.html'). This is where I get stuck. By loading my content into an iframe, I have isolated any CSS issues. But say I have text selected on the parent page and I click a button in my popup1.html. Is there then a way to pass the selected text back to the popup1.html or to show that selected text in a new popup2.html?
I hope that once I get the workflow down on how to do this kind of interaction I can move on with development. Thanks for your help!
When launching the Chrome Extension Google-Hangouts, a panel initially appears that lists members and a link/button to create a new Hangout.
This panel is initially pinned to the bottom right of the browser window. When pinned like this, it remains always on top as a browser navigation session continues: users can go to different URLs, change tabs, etc. and that panel stays at the bottom right and stays on top of all other windows (or at least on top of the main browser window).
Once it's unpinned, you can drag it around the window, but it no longer stays always on top.
My question is, how was that achieved - what code, or what functions, do i need to call to create that window/panel so that it stays initially pinned and always on top? Is there some binding to some native code that's involved? Some other approach?
If anyone know and can show or explain, i would be hugely grateful as this feature is key to an extension i'm trying to build.
Thanks a lot!
This may not be an answer but to get a clue of what is happening I extracted the crx file to view its content there are a few OS specific files : ace.dll , libace.so and ace. After researching a bit i found this. This is a plugin. Hangouts extension is using ace plugin which is actually running on your desktop(i'm not sure about this). You can check this article
I found this related post: How to build an chrome extension like Google Hangouts
ACE is actually not what makes the window, Chrome has that capability built in, apparently. Even if you don't enable panels, extensions from Google can still make them, provided your OS is capable.
I write a DOM tree protecter Chrome extension to examine if the DOM tree changes. I have the js files in background_page, how can i get those console.logs() in other test html files? What I can only find now is the debug information of chrome://extensions/ when i click on generated_background_page.html. So how can I get information of other webpages? Thanks for replying.
One thing I have found very useful when debugging chrome extensions is to use the "inspect element" feature of the chrome developer tools. If you have a page or an element (such as on a popup from your extension) that you want to debug:
Open up Developer Tools
Wait for your popup to appear (if its not already up)
Switch to the Elements view on Developer Tools
Click the magnifying glass at the bottom so you can select an element
Click on an element in the page you want to debug (e.g. the popup page)
Now your Sources view and other views line up to match the element you've clicked on. The console will now let you look at variables in that context.
If you are not able to get the extension to work, there could be a whole host of reasons.
Are all your scripts loaded form the extension's directory or are you serving
them from a site? Chrome will not load scripts from an external site
unless over https AND after the site that is serving the script has
been whitelisted. See the Chrome Content Security
Policy
for more info.
To inspect the DOM, you need to inject a content script into the page that is being loaded. Are you sure you are doing this correctly? The manifest.json must be done right or else your content script will not get loaded.
For your content script and extension to communicate, you must post and receive messages. More information is available here.
Perhaps the best suggestion I have is that you follow the Chrome extension "tutorial" carefully until you have something working and then amend it to suit your needs.