谷歌扩展内联安装和验证无法正常工作 [英] google extension inline install and Verified not working

问题描述

1. google.com/webstore我已添加我的扩展程序


2. 我检查此项目使用内联安装。



3. 网站：选择验证网站

4. 
   

5. google.com/webmasters我已添加网站并已验证。

当我把这段代码放到我的网站上时：

 < link rel =chrome-webstore-itemhref =https://chrome.google.com/webstore/detail/itemID> 
 
< button onclick =chrome.webstore.install（）id =install-button>添加到Chrome< / button> 
< script> 
 if（document.getElementById（'extension-is-install'））{
 document.getElementById（'install-button'）。style.display ='none'; 
} 
< / script> 
  

我点击按钮添加到Chrome安装应用扩展程序，但是当我刷新网站按钮添加到Chrome显示。为什么？我无法理解 解决方案

您明显遵循 https://developer.chrome.com/webstore/inline_installation

在这种情况下，您错过了我们来看看代码。

$ b

  if （document.getElementById（'extension-is-install'））{
 document.getElementById（'install-button'）。style.display ='none'; 
} 
  

这里的条件是ID是否为 -is-installed 出现在页面上。但是，它增加了什么？

退一步：

例如，你可以有一个以安装页面为目标的内容脚本：
$ b

  var isInstalledNode = document.createElement（' DIV'）; 
 isInstalledNode.id ='extension-is-installed'; 
 document.body.appendChild（isInstalledNode）; 
  

所以，你需要添加一个内容脚本，它将这个元素添加到页面中。

---

然而，我怀疑指南会起作用。默认情况下，内容脚本在加载DOM后执行（因此，隐藏脚本已执行）。你可以让它们运行在 document_start ，但是 body 还不存在。

让我使用扩展名使用externally_connectable 。假设你的网站是 example.com ，你的扩展ID是 itemID

1. 将 example.com 添加到您希望收到消息的网站：

   externally_connectable：{
matches：[
*：//*.example.com / *

}，





2. ，准备来自网页的讯息：
   
   

     chrome.runtime.onMessageExternal.addListener（
   函数（message，sender，sendResponse）{
    if（message.areYouThere）sendResponse（true）; 
   } 
   ）; 
     




3. 在 example.com ，添加一个按钮（默认隐藏）并在适当的时候显示代码：

html prettyprint-override> < button onclick =chrome.webstore.install（）
id =install-buttonstyle =display：none;>
添加到Chrome
< / button>
< script>
if（chrome）{
//浏览器是Chrome，所以我们可能需要显示按钮
if（chrome.runtime&& chrome.runtime.sendMessage）{
//一些扩展程序已准备好接收来自我们的消息
//测试它：
chrome.runtime.sendMessage（
itemID，
{areYouThere：true}，
函数（响应）{
if（响应）{
//扩展已经安装，隐藏
} else {
//没有正面答案 - 它没有我们的扩展
document.getElementById（'install-button'）。style.display ='block';
}
}
）;
} else {
//扩展未安装，显示按钮
document.getElementById（'install-button'）。style.display ='block';
}
}
< / script>






---





请求在安装后添加页面重新加载。 chrome.webstore.install 有一个回调参数。





代替使用 onclick 属性，分配一个函数：

  document.getElementById（'install-button'）。addEventListener（click，function（e） {
 chrome.webstore.install（function（）{
 //安装成功
 location.reload（）; 
}）; 
}）; 
  




1. google.com/webstore i have add my extension
2. i Have check "This item uses inline install."

3. Websites: chose Verify site

4. google.com/webmasters i have add site and Verifyed.

when i put this code on me site:

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

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

i click on button "Add to Chrome" install app extension, but when i refresh site button "Add to Chrome" is display. why? i cant Understanding

解决方案

You're obviously following the guide at https://developer.chrome.com/webstore/inline_installation

In that case, you missed a step.. Let's look at the code.

if (document.getElementById('extension-is-installed')) {
  document.getElementById('install-button').style.display = 'none';
}

The condition here is whether an element with ID extension-is-installed is present on the page. But what adds it?

A step back:

For example, you could have a content script that targets the installation page:

var isInstalledNode = document.createElement('div');
isInstalledNode.id = 'extension-is-installed';
document.body.appendChild(isInstalledNode);

So, you need to add a Content Script that adds that element to the page.

---

However, I doubt that guide will work. By default, content scripts execute after DOM is loaded (and therefore, that hiding script has executed). You can make them run at document_start, but then body does not exist yet.

Let me make an alternative hiding script, based on communicating with the extension using "externally_connectable". Suppose your website is example.com, and your extension's ID is itemID

1. Add example.com to sites you want to be messaged from:

     "externally_connectable" : {
       "matches" : [
         "*://*.example.com/*"
       ]
     },
   

2. In your background page, prepare for the message from the webpage:

   chrome.runtime.onMessageExternal.addListener(
     function(message, sender, sendResponse) {
       if(message.areYouThere) sendResponse(true);
     }
   );
   

3. In your page at example.com, add a button (hidden by default) and code to show it when appropriate:

    <button onclick="chrome.webstore.install()"
      id="install-button" style="display:none;">
      Add to Chrome
    </button>
    <script>
      if (chrome) {
        // The browser is Chrome, so we may need to show the button
        if(chrome.runtime && chrome.runtime.sendMessage) {
          // Some extension is ready to receive messages from us
          // Test it:
          chrome.runtime.sendMessage(
            "itemID",
            {areYouThere: true},
            function(response) {
              if(response) {
                // Extension is already installed, keep hidden
              } else {
                // No positive answer - it wasn't our extension
                document.getElementById('install-button').style.display = 'block';
              }
            }
          );
        } else {
          // Extension is not installed, show button
          document.getElementById('install-button').style.display = 'block';
        }
      }
    </script>

---

Was requested to add page reload after install. chrome.webstore.install has a callback parameter specifically for this.

Instead of using onclick attribute, assign a function:

document.getElementById('install-button').addEventListener("click", function(e) {
  chrome.webstore.install(function() {
    // Installation successful
    location.reload();
  });
});

这篇关于谷歌扩展内联安装和验证无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！