I have this small toolbar-like html page:
Currently, a user clicks on a link and this page opens in a new tab at the size shown. The user places this at the top of their screen then opens another tab below it taking up the rest of their screen. The user mainly works out of the larger window and interacts with this "toolbar" periodically.
This setup is obviously not ideal. Especially since you cant hide the chrome frame or the address bar which make the toolbar twice the height it needs to be.
What I'd like to do is make this an actual tool bar in Chrome, something like:
I did see How to make a toolbar in Google Chrome? but I'm not sure which method would best suit my needs.
A few details:
The toolbar must remain visible anytime its turned on/opened (as I
understand it 'infobars' close themselves when not active? not 100%
on that though)
Navigating to a new page should not close the bar
Navigating to a new page should not reload / render the bar (as I understand it using content scripts would reload the bar every time the user goes to a new page,)
I guess we could use a content scripts / local storage type solution to render the bar then set it up as it was on the previous page, seems hacky though.
Am I missing a better way to do this?
Could anyone help me get started down the right path to achieve this result?
A toolbar is an extension.
use content script. The easiet way would be to download a sample from official google chrome's developper site.. and you will be able to change it the way you want.
Related
I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]
I'm looking for behaviour similar to pinned Gmail tabs, where tab head blinks when there's a new email and the tab is not in focus.
chrome.windows.update(..) has a 'drawAttention' option. But chrome.tabs.update(..) only has 'active' and 'highlight' options.
I couldn't locate a method of indicating an updated tab in the active window without switching to it/or highlighting it (which seems to have almost similar behaviour to active).
The glowing tab effect is specific to pinned tabs, and only happens when the page's title changes. This feature is not Chrome-specific, it also available in Firefox.
There is no way to get this effect for unpinned tabs, but if the tab is pinned, then you could change the page's title to get the desired effect via content script. To use this, you must declare the permissions to access the host.
Here is minimal example to achieve the goal:
chrome.tabs.executeScript(tabId, {
'document.title += ".";'
});
If you want to use this feature, I suggest to switch between two states (e.g. with trailing dot and without dot), to prevent the title from getting too long.
Unless the tab content is really updated, I recommend against using this trick, because the visual indicator is misleading when there is no update in the tab.
Alternative ugly ways to draw attentions to unpinned tabs with chrome.tabs.update are:
Pin/unpin tab
Move tabs across the tab strip
Activate/deactive the tab
I'm afraid that highlighting is as far as tabs API goes.
You could use a content script to show an annoying animated favicon until the tab gets visible as a possible workaround.
I'm a writing a chrome extension that allows users to do the following:
Load data into the popup when the icon is clicked
Change the data in the popup based on actions the user takes on the page
Append elements to the DOM of the page based on actions taken in the popup
It seems that I can accomplish 1 with a script in the browser_action field of the manifest, but perhaps I need a page_action script for 2 and 3?
The core of the problem is that I do not know exactly how browser_actions and page_actions differ from each other. My limited understanding is that page actions allow data populated in the popup to be manipulated dynamically. Is this true? I cannot find an explanation about the differences that makes sense to me.
Browser Action is a type of extensions that use icon on the right of address bar. You click on that icon and popup page is loading. Those extensions work regardless of page currently opened.
Page Action only works while certain webpage(s) is opened. It displays as an icon inside the address bar (near page URL). This is for extensions only working on certain websites.
If you want to make your extension working on every website, you should use browser_action.
For further information you may want to visit these pages:
http://developer.chrome.com/extensions/browserAction.html
http://developer.chrome.com/extensions/pageAction.html
I've been trying for a while now and can't get this to work.
Basically, when the extension is enabled, I want a persistent page (That will hold a socket connection regardless of whether the Browser Action icon is clicked).
The background page functions in this way. Now, I want this background page to show in the popup page (via iframe or any alternative so that it's not another instance of the Background page.
I get something like this when I try:
"The webpage at chrome-extension://invalid/ might be temporarily down or it may have moved permanently to a new web address."
Any ideas on a direction I could try?
The real background page is hidden, and cannot be shown (the Dev Tools for the background page can be opened by clicking on the background.html link at chrome://extensions/, in Developer mode).
From the popup, you can directly access methods and properties from the background page, using chrome.extension.getBackgroundPage(). This can be used to maintain a (session-)persistent state of your extension's popup window.
When you try to load the background page in a frame/tab, a new instance of the page is shown. This, however, is not a background page. It's treated as a normal HTML file within your extension.
If you want the url for the background page I'd recommend using chrome.extension.getURL('background.html')
But I don't recommend this method for what you're doing, though I suppose it would work. I would instead recommend using some simple message passing. With this, you're popup/browser action will actually hold your html for your UI, and send a message to the background page asking for the live web socket stuff from the background page.
These are the docs on message passing: http://code.google.com/chrome/extensions/messaging.html
Have fun and good luck! It's not bad at all, let me know if you have questions though
I have a web page jammed full with a few hundred rows of tabular numerical data. It's fearsome. The user wants to see as many data rows as he can in one single view, without scrolling vertically. I'm thinking to serve that page with just a title bar -- no back or refresh button, no address bar, no Google toolbar, no status pane, nothing but a title bar. The user reaches the page by way of a normal html link.
Is there a way to do that in the CGI that writes the page? The CGI is already writing content and cache-control headers.
If not, then (next best thing) is there a way to do it with JavaScript, without opening a new browser window, perhaps in the onload event handler?
Thanks!
Is there a way to do that in the CGI that writes the page?
No.
If not, then (next best thing) is there a way to do it with JavaScript, without opening a new browser window, perhaps in the onload event handler?
Well, you could, on onload open a new ("chromeless") browser window with your page, but that's about it.
You can't control the user's current browser window from within an HTML page.
Pretty sure you can't do this cross browser and I'm positive you can't do it server side. However most browsers allow a full screen view which the user can get to.
In Internet Explorer and firefox the shortcut is F11. I know that's not the solution your looking for. However I'm pretty sure thats all there is.
I didn't see n0nick answer when I typed mine up. I agree with his answer I'm leaving mine in here for the F11 part.