Customize Google Chrome browser to contain a single webpage - google-chrome

Is there any way to customize Google Chrome? Which technology/language would be used? Is it possible to build a customized version with no toolbars and a webpage inside (I'm interested in something like this one, but for Chrome)?

I guess that you are talking about web apps. You can start Chrome from command line like this:
chrome --app=http://stackoverflow.com/
You can also add the --start-maximized command line switch if you want that window to be maximized.

Related

"Articles for you" suggestion on Chrome Desktop (Chrome Content Suggestions)

Chrome mobile shows "Articles for you" formally known as "Chrome Content Suggestions" on the new tab page chrome://newtab (screenshot below).
I would really like to have these suggestions also on my desktop New Tab Page (NTP), I know they are loathed, but I actually find them very useful (look at those suggestions in the screenshot!).
My hope was that using the Developer Tools > Useragent spoofer to set the useragent to Pixel 2XL would be sufficient, but it does not appear to be the case (I have tested this on Linux and on Windows desktops).
The "snippets" appear to be downloaded (on mobile) using fetch.py, tried running this but it gives the following error.
FileNotFoundError: [Errno 2] No such file or directory: '../../../google_apis/internal/google_chrome_api_keys.h'
Which indeed does not exist (the internal directory doesn't in fact).
Is there any way to fix this?
I love this feature on my ipad. If you make this https://news.google.com/foryou your homepage on Desktop Chrome I believe you get the same results.
Go to https://news.google.com and select "For you" from left side panel. You need to already login to Chrome with Google ID.

Why does my page look different in design than at run-time?

I'm studying HTML/CSS and doing a single-page project using WebStorm and Chrome. Normally I test the way my page running Chrome in WebStorm which results in opening http://localhost:63342/ in my browser address line.
After I finished my project I closed WebStorm and ran it again in Chrome, but this time I open it by clicking on the shortcut on my desktop.
To my surprise, the way the page looks was different from the one that I saw when I opened Chrome through WebStorm.
The question is: Why so? It's the same HTML/CSS code, the same browser.
You can use http://brackets.io/ as an alternative. It has a similar feature called "live preview".
It seems that there is no style applied to your page. If you have your css in a separate file, my guess is that WebStorm doesn't locate your CSS file or you are not referencing it correctly in your html. Try looking at the "Sources" tab from the Chrome Developer Tools (F18) and see if it loaded the .css file.
It turned out that it had something to do with the page scale. When I press cmd and + and the page zooms in, it gets a slightly different look.

Using chrome to convert window.open to Chrome always on top panel

I have a web app that is using javascript window.open command, my wish is to make these popups always on top.
Looking on the internet I saw recommendation to add body.onBlur='self.focus'.
This is not good for me because other windows cannot be accessed in this kind of approach.
What I thought is to write an extension that on pop-out will convert the window.open-opened pages to a chrome dialog.
The big question: This is even possible?
In the chrome dialog that I have tested the panels are always on to only if they are positioned in the top right of the window but if I am moving them to a different location the always on to function doesn't work
https://chrome.google.com/webstore/detail/site-on-panel/pcjbpfaogjhnnnhdldamflaelejhbhag?utm_source=chrome-app-launcher-info-dialog
https://chrome.google.com/webstore/detail/picture-in-picture-viewer/efaagmolahogmekmnmkigonhfcdiemnl?utm_source=chrome-app-launcher-info-dialog
If you control the web app, you can replace window.open with a Chrome App. You can send a message from the web app to the chrome app, which can then use the always on top app window option and display it in a webview.

Not able to copy text,XPath or other attribute from the chrome developer tool

I followed the approach mentioned in how to emulate a mobile (android) browser on desktop
to project the mobile webpage's properties on desktop chrome browser. I was successfully able to do that but now I have some queries as mentioned below, please let me know your inputs on that
a) How to use the "Select element option" of chrome developer toolbar to view an element's property for a mobile webpage. In normal desktop chrome browser we have the web page displayed and below that the developer toolbar is displayed and we can easily spot the element using a pointer but with mobile webpage displayed on desktop chrome browser i am not able to use this option as the webpage is not displayed.
b) I tried to copy the xpath and other things from the displayed HTML (HTML of mobile webpage on desktop chrome browser) but it gave me an error that "You need to install a Chrome extension that grants clipboard access to Developer tools". I installed one such extension named: "Auto Copy" but then also I was not able to copy. Please let me know how to go about it.
Thanks a lot in advance,
Namit
For (B) – Judging from the discussion when that message was introduced, it sounds like you need to roll your own simple custom extension to enable clipboard access. Here's a sample manifest.json – I haven't tested it out myself, but it looks pretty straightforward. The extension development Getting Started guide explains how to turn a file like this into a working extension and install it locally.

Can i resize Chrome window using the console?

Is it possible to resize the Chrome window using the developer tool's console? If so, what would the command be? becuase the window.resizeTo(w,h) didn't work for me.
Official Chrome issue says:
By Design we don't support resize/move for tabs, only constrained windows.
Windows in Chrome can be resized via Chrome extensions API, however it's not available from console. You should probably try using one of many 'window resizing' extensions. In the near future it will be possible for extensions to add own console commands, however as for now it's an experimental feature.
i think you can only resize windows that's you have created from the console, like popups
for example:
var pop=window.open("","","width=1024,height=768");
pop.resizeTo(100,100);
On macOS you can run: open -a Google\ Chrome --args --window-size=1366,768
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
found on https://developer.mozilla.org/en-US/docs/DOM/window.resizeTo#Notes
some try and error seems to prove that these rules also apply in Chrome.