I am developing a chrome extension that would like to add a tab at the bottom of the page to manipulate DOM elements. Chrome 'manifest.json' file doesn't provide such feature. So how to do it or rather how does Firebug add a tab at the bottom of the Chrome?
I would suggest inserting a panel in every page through a content script. You can style it in order to appear at the bottom of the page and be always visible.
In order for it to retain its state between navigation from one page to another, you need to persist it some how (example use chrome.storage or a similar mechanism through the background page to persist the content (or whatever you need).
See this answer on how to insert (and style) a toolbar-like div or iframe in a page through a content script. (It is fixed to the top of the page, but you can easily modify the code to fix its position at the bottom.)
Related
I developed a simple chrome extension. Following the answers in this SO post I was able to programmatically open the popup window on certain webpages. The default behavior of the popup is to open a window at the top right. Is it possible to modify this behavior? Ideally, I would like the popup window to slide in from the right after the automatic window.open is invoked in the background script.
No, you have no control over how and where it appears.
If you want something like slide-in, you're better off injecting your GUI elements into the page itself.
How feasible it is depends on whether you need to inject it into an arbitrary page or if you're working with just one specific website. Shadow DOM might help you isolate styles from the parent page.
I am making a Chrome extension, which can make DOM manipulation, such as text bold or italic. After manipulating DOM, I want to add bookmark a current webpage with changed DOM. However, the changed DOM is not reflected to added bookmark.
There are two questions.
Is it possible to add bookmark with changed DOM?
If it is possible, how can I do that? Do I have to include cache or local storage Chrome API?
Please give me fruitful advice:)
I want to dynamically generate some buttons on my chrome extension default_popup HTML page and I want on click to open a model in the middle of the screen NOT a new tab, I saw some other extensions having its options like this, and then display some info.
I think the only possibility isto get rid of the defalt_popup and inject all my scripts through the background page straight into the html page.
I need to have a small div like a popup
on my chrome extension.
This div needs to have a simple animation and not to have menu bar at all.
Is it possible to do it with chrome.windows.create
Method ? Is there another way to do it ?
What I need is similar to pocket's extension popup.
https://chrome.google.com/webstore/detail/save-to-pocket/niloccemoadcdkdjlinkgdfekeahmflj?hl=en
You need to use content scripts. If you have made a trigger the content script is able to change the page. By using that to your advantage you can add a div filled with all of the html you want to add. You can find a in depth example here.
The default behavior for browsers on page reload is to scroll back to the position where you last were on the page.
Let's say you scrolled to features section and then you hit F5. The browser will reload the page but it will remember the position you were at and scroll to features section.
Does anyone know how to reset this scroll state in browsers? In my application I need the browser to load page naturally and position the page on top on every page refresh.
There is not something that you can "configure" to avoid that behavior because that's the browser behavior.
What you can do is to add a simple javascript when the page has been loaded to scroll to the top (if you already are on the top, this will do nothing):
window.scrollTo(0, 0);
To know when the page has been loaded, you can use jQuery document on load functionality if you are using jQuery, the equivalent on your javascript framework or the body onload property to place a function that execute the above code.