google extension inline install and Verified not working

Question

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

Answer 1

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();
  });
});