Google Chrome “Application Shortcut”: How to auto-load JavaScript?

Google Chrome “Application Shortcut”: How to auto-load JavaScript?

Introduction
Google chrome has a feature that allows you to create shortcuts to web pages and make them appear like traditional desktop applications.
For example, a shortcut to twitter mobile might be
C:\Users\\AppData\Local\Google\Chrome\Application\chrome.exe –app=https://mobile.twitter.com/

The file icon for this app is stored in
C:\Users\\AppData\Local\Google\Chrome\User Data\Default\Web Applications\mobile.twitter.com\https_80

My Question
It’s been a while since I’ve used this feature and I seem to remember that you could add your own JavaScript files to the app folder which were included when the application was loaded. However, I cannot find any documentation that discusses this feature but I’m 99% certain it exists.
Does anyone have any details if this feature is available and what files I need to create?
Clarification
I’m basically opening a webpage using Chrome’s “Application Shortcut” and I want this webpage to refresh every x seconds. However, I do not have control over this webpage.
I’m sure in older versions of Chrome this used to be possible… unless I’m going mad.

Related:  Check if year is leap year in javascript [duplicate]

Solutions/Answers:

Solution 1:

Chrome extensions and their content scripts are also loaded when Chrome starts in the App mode.

So, you can create a simple extension, which injects JavaScript code in the page as follows:

1. Create a manifest.json file:

{
    "name": "Run code on twitter mobile",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": ["http://mobile.twitter.com/*"]
    }],
    "web_accessible_resources": ["script.js"]
}

2. The content script

Then, create a file called contentscript.js, and add the desired JavaScript code.
This script is included at every load of the matched page. All DOM methods, via the document object is directly available. However, window and document.defaultView do not point to the window object in the page [source].

If you want to access global methods or properties, you have to dynamically create a <script>, and inject it in the page (see Building a Chrome Extension – Inject code in a page using a Content script).

contentscript.js

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.parentNode.removeChild(s);
};

3. The script which will be injected.

Then, create a file called script.js, and place it in the same folder as manifest.json and contentscript.js. The code in script.js executes as if it was a true part of the affected page.

Related:  how to compare two elements in jquery [duplicate]

The reference for content scripts is available here.

Solution 2:

I assume you want to include a javascript to do some ‘launching’ of the application, perhaps to resize the window when loading your target url?

Here is something you could do, as suggested in this post

Create an Html page locally that contains the javascript that you need to run.

Change this:
C:\Users\<username>\AppData\Local\Google\Chrome\Application\chrome.exe --app=https://mobile.twitter.com/

to this:

C:\Documents and Settings\<username>\Local Settings\Application Data\Google\Chrome\Application\chrome.exe” –app=file:///C:/Documents%20and%20Settings/<username>/My%20Documents/My
%20Custom%20Shortcuts/twitter_mobile_launcher.html

and your twitter_mobile_launcher.html file would look like this:

<html>  
 <head>  
  <script type="text/javascript">  
   // Do what you need with your javascript, for example, resizing your window...
   window.resizeTo(300,400);  
   window.moveTo(300,0);  
   window.location = "https://mobile.twitter.com/";  
  </script>  
 </head>  
 <body>  
  <h1>If you see this, the redirect did not work properly.</h1>  
 </body>  
</html>  

References