Styling for google search app pages - html

I am currently working on a project and mobile design is great and works well except for when using the google search app.
I have buttons at the bottom of the page which work on all mobile browsers except on google search app. When clicking the buttons the bottom bar of the search app opens and doesn't allow click.
My answer is to move the buttons up with styling so that these will not interfere with the app but how do i apply the styling to move these specifically to the google search app app and not apply to all other mobile browsers?
can anyone help?

I would use PHP to check for the user agent. if it contains "PSA" it means it is the google search browser. you can then define an IF that will modify the CSS code in that case.

Related

How to access Gmail messages selected (checkbox)

I am trying to build an Add-On for gmail which will perform some actions on a set of messages selected by the user.
Looking at the gmail Apps Script API, I cannot see a method that allows me to do that.
I've noticed that some AddOns operate on selected messages, just like what I want to do. See picture below...
The checkboxes (highlighted in green) tell the AddOn what to operate on.
What am I missing?
The opened menu has options to forward the messages selected by combining them.
Also, I noticed that this AddOn is placed by google along the top. The same happen to the boomerange AddOn. The AddOn I am developing, always appears on the right hand side (pink arrows).
How can you place your addOn along the top menu?
The items you reference with the orange arrows in the image are not Gmail Add-ons, they are actually Chrome Extensions. Chrome Extensions are installed in the browser and they can add functionality by manipulating the DOM (Document Object Model) of a webpage. The chrome extension in question is probably specifically targeting chrome tabs with Gmail loaded and injecting content in the respective pages.
If you want to learn more about developing Chrome Extensions check out the following documentation:
https://developer.chrome.com/extensions/devguide
And for developing gmail specific Chrome Extensions you might want to check out the InboxSDK framework linked below:
https://www.inboxsdk.com/

How do I get a keyboard shortcut to translate a google chrome webpage? Not looking for auto-translate options

I need to frequently translate the webpage manually for work purpose. Although not looking for auto-translate options, I need a keyboard shortcut or a handy extension to translate the page. The right click option on google or the google chrome translator extension need multiple clicks in order to translate. The middle mouse button to translate the whole web page would do some good to me.
I tried looking out for extensions out of which context menus was related to my issue. I couldn't figure out how it works.
The right click option on chrome has 7th option for translate page which is not handy. I need it to be the first option on right click or the middle mouse button to translate the google page would help.
I am working on windows and not MAC.

Google Chrome vs extension

I want to build app that would allow me to open website, select some data from this website and send them to my server. I imagine that it works in this way:
Application id displayed in browser sidebar sidebar
I open certain website
Select address (City) on opened website
Click "City" button on sidebar
"City" value is copied from website to sidebar
Select address (Zip code) in browser
Click "Zip code" button on side bar
"Zip code" value is copied from website to sidebar
... (and so on)
Finally I click "submit" button on sidebar and data is send to server.
What will be better option for such use case? Chrome app or chrome extension? I am not sure if there is way to display sidebar using chrome extension. I also haven't seen in reference option to open certain url in chrome app. Any advises will be appreciated.
I guess an extension would be more appropriate as it is just one click away from the website you want to select some data from. The user interaction could be done in various ways:
select text and use the context menu (right mouse click) to activate the extension logic
activate extension via toolbar and add UI as a part of the website being viewed or in a separate window
You can pop up a window, but it will disappear when you click back on the website. You can manually create a "sidebar" by having your extension open a new window whose url is inside the extension and subsequently manually placing it alongside the browser window.
Unfortunately there is no sidebar feature for chrome extensions. That would be cool if there were, though.

Chrome app navigate htmls without creating windows

I'm creating a chrome packaged app, and I need to navigate my htmls without creating a lot of windows, like, if the user click one button, it opens the html in the same window the user are.
Is it even possible? If not, is there a way to make windows modal? So the user can't focus another window without closing the current?
Packaged apps intentionally do not support navigation. Apps are not in a browser, there is no concept of forward, back, or reload. Applications which do require the concept of navigation, or modal dialogs, should use a user interface framework that supports that functionality. In fundamentals, you can navigate by manipulating the DOM or by using CSS to animate and control visibility of components of your app.
The page you want to navigate to can be opened in a new window, then the previous page can be closed.
function navigateToLink (link) {
var current = chrome.app.window.current();
chrome.app.window.create(link);
current.close();
}

How to acomplish the Google Phone stay on top effect html?

Google phone opens up a small widget on the right of Gmail and stays there. Even when navigating to other emails or composing at email (similar effect is achieved I believe by Facebook chat).
Are they using frames? I hope not.
I need to keep some images open while the user navigates other parts of the application so using the approach of google to place my image holders would be ideal.
I'm not familiar with google phone, but maybe an iframe is what you are after:
http://www.w3schools.com/tags/tag_iframe.asp
It's an inline reference to another document.