谷歌浏览器“应用程序快捷方式”：如何自动加载 JavaScript？答案

【问题标题】：Google Chrome "Application Shortcut": How to auto-load JavaScript?谷歌浏览器“应用程序快捷方式”：如何自动加载 JavaScript？
【发布时间】：2012-03-05 00:58:50
【问题描述】：

简介
Google chrome 有一项功能，可让您创建网页快捷方式并使它们看起来像传统的桌面应用程序。

例如，移动 twitter 的快捷方式可能是

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

此应用的文件图标存储在

C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\Web Applications\mobile.twitter.com\https_80

我的问题
自从我使用此功能以来已经有一段时间了，我似乎记得您可以将自己的 JavaScript 文件添加到应用程序加载时包含的应用程序文件夹中。但是，我找不到任何讨论此功能的文档，但我 99% 确定它存在。

如果此功能可用以及我需要创建哪些文件，是否有人提供任何详细信息？

澄清

我基本上是使用 Chrome 的“应用程序快捷方式”打开一个网页，我希望这个网页每 x 秒刷新一次。但是，我无法控制此网页。

我确信在旧版本的 Chrome 中这曾经是可能的……除非我要疯了。

【问题讨论】：

你能澄清一下你想用你的javascript文件做什么吗？当你说在应用程序加载时包含，你到底是什么意思？既然我假设您想要一个网站链接，那么 javascript 文件的目的是什么？
@GGG 我不明白问这个有什么问题。可能还有其他方法可以做他打算做的事情。知道最终目的可能会帮助人们以更好的方式回答而不是猜测。有些人可能会这样回答：我不确定这是否正是您所追求的，这表明他们不确定问题的最初目的是什么。
@agarcian 很公平。我以为他想要完整的用户脚本功能，我什至没有考虑过这样的情况。
仅供参考，我写了一个答案，建议将其设置为托管应用程序并包含内容脚本，但我只是尝试过，显然 chrome 不允许托管应用程序中的内容脚本，所以我m 删除答案。

标签： javascript web-applications google-chrome google-chrome-extension

【解决方案1】：

Chrome 扩展程序及其内容脚本也会在 Chrome 以 App 模式启动时加载。

因此，您可以创建一个简单的扩展，在页面中注入 JavaScript 代码，如下所示：

1。创建`manifest.json`文件

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

2。内容脚本

然后，创建一个名为 contentscript.js 的文件，并添加所需的 JavaScript 代码。
此脚本包含在匹配页面的每次加载中。所有 DOM 方法，通过 document 对象直接可用。但是，window 和 document.defaultView 确实不指向页面 ^[source] 中的 window 对象。

如果要访问全局方法或属性，则必须动态创建<script>，并将其注入页面中（参见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。将被注入的脚本

然后，创建一个名为script.js 的文件，并将其放在与manifest.json 和contentscript.js 相同的文件夹中。 script.js 中的代码执行起来就好像它是受影响页面的真实部分。

Reference for content scripts.

Reference for web accessible resources.

【讨论】：

要加载一个扩展，导航到chrome://extensions/，激活Developer mode，然后点击Load unpacked extension按钮。然后，选择包含您的manifest.json（和contentscript.js、script.js）文件的目录，然后确认。如果您想在隐私浏览模式下测试扩展程序，请展开描述，然后选中该框。当您更新脚本时，您必须点击Reload extension，以查看更改。
非常感谢你:)
@GateKiller 你最好使用setInterval(function(){location.reload(true);}, 30000); 不鼓励使用字符串作为setTimeout 的参数。我用setInterval 替换了setTimeout，以处理意外取消导航（这可能会破坏您的脚本）。如果你真的喜欢这个功能，请使用setTimeout(function(){location.reload(true);},3000);。
@Sudarshan 它不是被复制的（那会很昂贵），而是通过代理访问。明确一点，window、parent、top、frames、document.defaultView等都是在内容脚本中引用全局对象，这与页面的完全不同。跨度>
我在使用它时遇到了错误，因为“web_accessible_resources”的格式发生了变化，请参阅developer.chrome.com/docs/extensions/mv3/manifest/…。应该这样做："web_accessible_resources": [ {"matches": ["http://mobile.twitter.com/*"], "resources":["script.js"] } ]

【解决方案2】：

我假设您想包含一个 javascript 来“启动”应用程序，也许是在加载目标 url 时调整窗口大小？

您可以按照this post 中的建议执行以下操作

在本地创建一个 Html 页面，其中包含您需要运行的 javascript。

改变这个： C:\Users\<username>\AppData\Local\Google\Chrome\Application\chrome.exe --app=https://mobile.twitter.com/

到这里：

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

您的 twitter_mobile_launcher.html 文件将如下所示：

<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>

【讨论】：

1。创建manifest.json文件

2。内容脚本

3。将被注入的脚本

1。创建`manifest.json`文件