Learn

The forum of documents and methods for study - Lượm lặt kiến thức


How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites

QaniTri
QaniTri
Admin

Nam Libra Monkey
Tổng số bài gửi : 1492
Tiền xu Ⓑ : 3758
Được cảm ơn № : 2
Ngày khởi sự Ngày khởi sự : 07/01/2013
Đến từ Đến từ : HCMC
Côngviệc / Sởthix Côngviệc / Sởthix : Languages, Softwares, Sciences, Martial arts

How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites Empty How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites

Bài gửi by QaniTri on 8th August 2016, 22:46

How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x300xcustom-chrome-bookmark-web-app4.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.jq_DFm42sc
Google is now pushing Chrome packaged apps , but many Chrome apps are still shortcuts to websites. You can make  your own custom web apps that function as shortcuts if the website you want isn’t available in the Chrome Web Store.
These Chrome web apps will also appear in the Chrome app launcher  on Windows, Mac, Linux, and Chrome OS . You’ll be able to open them from the launcher and set them to always open as a window or pinned tab  — you can’t do that with standard bookmarks.
This is different from creating taskbar and desktop shortcuts, allowing websites to run in their own windows . You can do that for any website.

Create a Custom Web App

To do this, we’ll essentially be creating the simplest kind of Chrome web app from scratch. All you really need is an icon and a web address.
First, create a new folder on your computer for your web app.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x321xcreate-folder-for-chrome-web-app.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.Vq0YSz-SbM
Next, create a new text file named manifest.json inside your new folder.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x321xcreate-manifest.json_.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.xqLLSmhKhQ
Open the manifest.json file in any text editor — Notepad, for example. Copy and paste the following text into it:
{
“manifest_version”: 2,
“name”: “Website Name“,
“description”: “Description of website“,
“version”: “1.0”,
“icons”: {
“128”: “128.png”
},
“app”: {
“urls”: [
“http://example.com/”
],
“launch”: {
“web_url”: “http://example.com/”
}
},
“permissions”: [
“unlimitedStorage”,
“notifications”
]
}
Change the bolded parts of the example code, replacing the website’s name, description, and URLs. For example, if you wanted to launch How-To Geek, you’d fill in “How-To Geek” in the name field, enter any description you like, and use the URL http://howtogeek.com.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x566xmanifest-json-file-for-chrome-web-app.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.a2PA8_0QAC
Next, find a 128×128 PNG image file that will be used as the website’s logo. If you don’t have an image that’s exactly the right size, you can crop and resize a larger image with an image editor like Paint.NET.
Save the image file with the name 128.png in the folder you created.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x321xcreate-icon-for-chrome-web-app.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.V9ahNab-U0
Finally, open Chrome’s extensions page at chrome://extensions/ . Enable the Developer mode checkbox and click the Load unpacked extension button.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x379xload-unpacked-extension-in-chrome.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.6LCUEMs3PA
Browse to the folder you created and click OK — Chrome will install the web app you just created.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x379xcustom-chrome-bookmark-web-app.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.2wivOMZ22t
With the app installed, you can launch it from the new tab page, customize how it will open by right-clicking it, or launch it from the Chrome app launcher.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x551xcustom-shortcut-in-chrome-web-app-launcher.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.dEWSn9e39a
You can also click the Pack extension button to package the extension as a single installable .crx file. You can distribute this file to other people so they can install it, too.
Locally installed Chrome web apps and extensions won’t sync between your computers with Chrome Sync. To save time in the future, you may want to back up your web app folders or .crx files so you can easily install them on other computers.

The Quick and Ugly Way

You can also add custom shortcuts to your new tab page by dragging a bookmark from the bookmarks bar to the grid of icons.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x343xeasily-create-chrome-bookmark-web-app.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.CZ7pQ0rHUc
Unfortunately, the large icon will be rather ugly, without a proper name or icon. This bookmark will function just like a standard bookmark app, but there’s no way to tweak it and make it look better.
How to Create Custom Chrome Web App Shortcuts For Your Favorite Websites 650x344xugly-chrome-web-app-shortcut.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.WHAtrBrv-1


Ideally, Google would extend the drag-and-drop functionality with a way to rename these custom shortcuts and easily assign better icons. For now, we’ll have to make do with the manual solution.
howtogeek


Change the name="" in two places:
1. C:\Users\*\AppData\Local\Google\Chrome\User Data\Default\Extensions\ggjpggkpjbfajhlicjafmndmjijndmef\2013.1.15.52988_0\manifest.json
2. C:\Users\*\AppData\Local\Google\Chrome\User Data\Default\Preferences
You may wanna change something like this:
Code:

   "app": {
      "launch": {
         "web_url": "[url=https://www.google.com/]https://www.google.com[/url]"
      },
      "urls": [ "[url=https://www.google.com/]https://www.google.com[/url]" ]
   },
   "description": "",
   "icons": {
   },
   "key": "CubOAd25vhM1H1FPbAmuxG5u4d/tmn5SIhCTrbYBvrI=",
   "name": "[url=https://www.google.com/]https://www.google.com[/url]",
   "permissions": [  ],
   "version": "2013.1.15.52988"
}
...to...
...
"name": "The Google",

how to rename a app or website saved in the chrome "apps" ?


    Hôm nay: 28th September 2020, 17:19