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!
Related
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
I am new to Chrome Extension. I have a popup.html that collects data and displays when mouse over on the current open page/tab. I also send data to popup.html on click on the current open page/tab.
The problem is when i click on the page data gets passed to the popup.html but popup.html disappears/closes. When i click on the extension again the data persists since i am persisting the data on a background page.
How do i avoid popup.html not to close/disappear on click on current open page/tab.
Thanks in advance
It is not possible.
The popup for Browser Actions / Page Actions is designed to close as soon as it loses focus. It is also not possible to programmatically open it.
You did correctly by making the background script handle the data. If you need persistent UI while you're interacting with a page, then your only option seems to be some HTML UI injected by a content script.
You might be interested in this question.
I understood that pop.html does not persist on the screen, hence took up a different route by getting my extension on to the chrome dev tools. They perform the same actions such as an extension the pain is that your dev tools have to be open always.
For my use case keeping the console open does not make much of a difference. This post helped me a lot set this up.
Thanks for your suggestions
I m not sure u can. There is a reason the page is named as popup. Although you can try notifications(https://developer.chrome.com/extensions/notifications) to provide the same functionality.
Is it possible to show chrome extension icon inside the web page?I am able to create an extension using page action ,icon is shown inside the address bar ,but i need to show it inside the web page ...
Well, there is no special API you can simply use for that.
You can inject your own UI elements into the page, but it's going to be difficult. I will only outline this, don't ask for specific code.
You will need a Content Script (also, read the Architecture Overview page if you haven't yet) to access the contents of the page.
Then, you need to create and append your elements to the DOM of the page. In your case, you could possibly add an <img> tag with your icon and a click listener that does something.
Note that to avoid clashes with CSS of the page itself it is recommended to use Shadow DOM techniques.
Of course, this may or may not work well depending on the page you're injecting into.
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.
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.