Question

我有Chrome扩展程序和Chrome应用程序。我需要在同一个域上为它们进行内联安装。

根据Googles说明（对于一个内联安装），我添加了标题链接标记：

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/itemID">

然后在正文中添加onclick函数：

<button onclick="chrome.webstore.install()" id="install-button">Add to Chrome</button>
<script>
if (chrome.app.isInstalled) {
  document.getElementById('install-button').style.display = 'none';
}
</script>

我需要知道的是如何添加两个实例。一个用于扩展，一个用于应用。我是否在标题中添加了两个链接标记，然后编辑onclick函数？

这就是Google对多个实例所说的内容，但我不知道在哪里编辑onclick函数来区分这两个实例。

要实际开始内联安装，   chrome.webstore.install（url，successCallback，failureCallback）   必须调用函数。只能在响应中调用此函数   用户手势，例如在点击事件处理程序内;一个   如果不是，则抛出异常。功能可以有   以下参数：

url（可选字符串）如果您有多个标记   使用chrome-webstore-item关系的页面，您可以选择哪个项目   你想通过在这里传递其URL来安装。如果省略，   然后将使用第一个（或唯一的）链接。会有例外   如果传入的URL在页面上不存在则抛出。

successCallback（可选功能）此功能在调用时调用   内联安装成功完成（显示对话框后）   并且用户同意将该项添加到Chrome）。你可能希望使用   这样可以隐藏提示用户的用户界面元素   安装应用或扩展程序。

failureCallback（可选功能）这个   在内联安装不成功时调用函数   完成。可能的原因包括用户取消   对话框，未在商店中找到链接的项目或安装   从未经验证的网站发起。回调给出了一个   失败详细信息字符串作为参数。您可能希望检查或记录   该字符串用于调试目的，但您不应该依赖   特定字符串被传回。

我目前在标题中有一个链接标记用于扩展名。我需要在不同的页面上添加另一个内联安装，同一个域，但是第二个onclick代码需要不同，所以它不会引用我标题中的现有链接标记。

非常感谢。

Answer 1

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/itemID1">
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/itemID2">

<button onclick="chrome.webstore.install('https://chrome.google.com/webstore/detail/itemID1')" id="install-button-1">Add App to Chrome</button>
<button onclick="chrome.webstore.install('https://chrome.google.com/webstore/detail/itemID2')" id="install-button-2">Add Extension to Chrome</button>

Answer 2

very same docs page显示扩展方法。

基本上，您的扩展程序可以向DOM注入<div id="somethingYouExpect">，并且页面的脚本可以检测到它。

虽然它有点笨拙：我试图让它用于测试代码并且没有设法以一种好的方式这样做，因为内容脚本是在构建DOM之前或在文档就绪之后注入的。您可以使用变异观察者绕过它，但 meh 并且您的按钮将在瞬间可见。

如果你只是隐藏一个元素，你可以通过注入一个隐藏它的css文件来节省一些痛苦。或者，您可以隐藏注入代码中的元素。无论哪种方式都有点布局敏感。

如果你必须独立于布局并且同时想要比元素隐藏更复杂的东西，或者去（div inject + mutation observer）路由，或者你可以尝试window.postMessage approach来表示页面隐藏元素。

扩展/ CSS变体的分步指南。

假设您的扩展程序安装UI包含在标识为extension-install的元素中。

将内容脚本添加到清单文件中：

"content_scripts": [
  {
    "matches": ["*://yourdomain/*"],
    "css": ["iaminstalled.css"],
    "run_at": "document_start"
  }
],

CSS：

#extension-install {
  display: none !important;
}

所以，回顾一下：

要允许安装应用和扩展程序，头部需要两个<link>标记
要安装，请将url参数传递给chrome.webstore.install
如果安装了应用，则会在页面的上下文中定义chrome.app.isInstalled。您可以从页面检查它以隐藏安装按钮。
如果扩展程序已安装，它可以将CSS / JS注入页面以隐藏安装按钮。

为不同的链接标记添加多个chrome内联安装相同的域

2 个答案:

扩展/ CSS变体的分步指南。

所以，回顾一下：