chrome extension opens with page load - javascript

I need to create a chrome extension that for every web page te he user opens - he will have a button on top of the page (similar to the google translate extension - just that it will appear with page load, without the need to press a button) - preessing on it will do some activity.
from what i saw - the way to do it is to create a content script that will add an iframe that includes the button on the window.onload. just before i do that - i want to be sure there is no more simple way of doing that.
Thanks.

There is an experimental infobar API, but it's unknown when, if ever, it becomes stable.
As-is, you really need to inject your UI into the page DOM from a content script, with an iframe being a good solution to separate your UI from the page.

If it's just a button for each page then you could use a Browser Action
If you'd like for it to actually be in the page then an iframe is a good way to go.

Related

is it possible to use retrieving history (or document state) as a navigation in browser?

I'm worrying that I won't get any reply from stack overflow, because I couldn't get any reply from previous question. You don't need to fully read previous question, but It could be helpful to understand my question.
Our company is on service that html document builder(windows application) and I'm a desktop s/w engineer. after build html document with our windows app, we export all things to html/js/css.
Consumer of our application is a designer who creates or edits contents via our windows app. and the end-user of contents which is created by designer see contents via browser(chrome, safari (iphone), samsung browser).
The Problem is, my superior (programmer) wants use java-script as a navigation, this is possible. but, he want to save all state of document state before navigation, so after navigation to any page and then comeback to origin page, all state - animation (contents may have animation) and all script state - should be same exactly before he leaving origin page.
More specifically, main html has a iframe, and iframe can shows all contents. Main.html have a navigation button so iframe can navigate all contents created by designer. If user interacted with page1.html inside iframe, then make iframe to change its content to page2.html by clicking navigation button (go to second page button implemented inside main.html but outside of iframe). and then back to page1.html, he get exactly same state as before he leaving page1.html.
At a glance, It seems quite possible just implement go-forward or go-backward, but dynamically paging navigation is impossible to me. I found some techniques - access browser visit history and window.history object, but It seems there isn't user-defined way.
I thought Electron app(desktop) will be fine for our solution, but my superior says It should be works well with just html/js/css. Our final product should be shown in desktop, iPad, mobile or any device that handle web browser.
I need technical advice to accomplish this issue, I'm fine there is no way to control navigation while saving document state. Help me please.
Document state can be saved by using localstorage object in javascript.

is there any way to hide browsers loading icon?

Normally if you click a link the browser displays a little loading icon up in the tab until the page complete loading .
Is there any way to prevent the browser from displaying this little icon in the tab especially when dealing with iframes loading ?
Not directly, but you can design your website as a single page application. Implement your internal links with Javascript handlers which load the content with XMLHttpRequest and replace the current content when the response arrives.
Keep in mind that this makes your content practically invisible to search engines and breaks many browser navigation features your users will be used to.
You could write to the document via JavaScript after it has finished loading by using document.onload

Google Chrome Extension: How can I view a background page via an iframe on the popup page?

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

Change Default Action of IFRAME Hyperlink Clicks

I'm using Google search in a page, and it shows up in an IFRAME. However, when you click on a link in the search, it's leaving my site and redirecting to that other site. Is there a way to intercept that call with jQuery and make it open that link in a new window, instead?
Due to security reasons, what you can do with an iframe is very limited (In cases where you frame another domain).
The way this is implemented varies a bit from browser to browsers but most browsers won't let you manipulate the data in the iframe.
To my knowledge this isn't possible, assuming you are refering to an implementation of http://www.google.com/cse/

How to add Return Home button to external sites?

I am developing a website with some links to some pages on external websites (belonging to the same company).
The client wants to add a way to easily return to the home site, i.e. something better than just using the browser's Back button, and something better than just opening the external links in a new browser window.
Seeing as I can't control the content of the external pages, I'm guessing that I will have load those external pages into a frame somewhere along the line.
So is there a way for a link to load a local page with a frameset, with the external page loaded into one of the frames? (Then we could have a "Return Home" button in the other frame.)
Or is there a better way to accomplish this? I could stretch to a bit of JavaScript if pushed...
Thanks,
Stewart.
You'll need to display the external websites in an iframe, with a link at the top (outside of the iframe) back to your site. Note that some sites employ "iframe busters" which will get rid of your iframe.
The best option is to open in a new tab - it's how people expect the web to work.

Categories

Resources