Can one Google Chrome extension have several browser action icons? - google-chrome-extension

I've made an extension that adds one icon that shows a popup. But I need to show 2 icons. I've read the https://developer.chrome.com/extensions/browserAction but couldn't find a reference to any limitations on this regard. However in the manifest.json, I can only define one popup.
Is there a way for one extension to have several icons on the Chrome toolbar?

No. Each extension can have at most one browser action or page action. You could create multiple extensions that pass messages.

Related

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!
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

How to close/destroy chrome devtools ExtensionPanel programmatically?

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.

Interaction between Chrome extension popups and DOM w/o running into CSS conflicts

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!

Chrome extension: Multiple tabs in popup window

I was wondering if there is a way to divide the popup window into more than one tab, when each tab functions as a different web page, using chrome extension APIs. Does somebody know if that's possible?
If I can't do that, I thought I will give up the division into separate web pages and just use tabs on the same web page, like UI tabs for example.
Can you suggest a third way?
Browser\Page Action Windows are Windows of type Popup, you cannot add further tabs to the popup window.
As pointed out using some sort of UI Tabs will solve your problem. Let me know if you need more information.

Modal Dialog in Google Chrome Extension

I need a truly modal dialog to run in Google Chrome in Windows using extension, where the dialog doesn't allow users to click on other tabs etc. The search results so far seem to suggest that showModalDialog() doesn't give a true modal dialog, and the jQuery examples (like SimpleModal) don't seem to be able to stop users from accessing the other tabs or the other parts of the browser.
Alerts seem to be be working, so I was wondering if there is any other solution to this problem? Or do I really need to write a modal dialog from scratch using Javascript?
Using the hidden div methods in the web pages is not an option because I can't modify them.
You can simply use the native javascript function confirm
But I don't like when I can't do what I want without good reasons.
Furthermore, the user will can always switch to another Chrome window.
No sort of in tab HTML modal dialog will prevent a user from switching tabs. Even alert will allow users to switch tabs. You may be able to achieve this through a NPAPI plugin though.

Resources