CODEWITHSUNDEEP
google-chrome-extensionfailed-installationchrome-web-store
user1299308
user1299308

Reputation: 11

Chrome inline installation works only half of the time

we've set up a simple inline webstore installer for our app.

The app site has been verified. The inline installation does work correctly for half of us inside our company, but it doesn't work for the other half. They would get "Uncaught TypeError: Cannot call method 'install' of undefined testsupport.html:15 Uncaught SyntaxError: Unexpected token ). It's as though the chrome or chrome.web variable isn't initialized.

Why does the inline installation work only on some machines but not on others? All these machines have the same chrome browser version.

TIA

Upvotes: 0

Views: 3449

Answers (3)

Mihai Parparita
Mihai Parparita

Reputation: 4236

Your inline installation markup is:

<a href="#" onclick="chrome.webstore.install()">
  CaptureToCloud Chrome Extension Installation
</a>

(per one of the comments, it used javascript:void(0) before, which is equivalent to # in this case).

Your <a> tag both navigates the page and has an onclick handler. In some cases, the navigation takes place before the onclick handler finishes running, which disturbs the code that supports inline installation.

If you switch to using a plain <span> (styled to look like a like, if you'd like), then you should no longer have this problem:

<span onclick="chrome.webstore.install()" style="text-decoration: underline; color:blue">
  CaptureToCloud Chrome Extension Installation
</span>

Alternatively, you can return false from your onclick handler to prevent the navigation:

<a href="#" onclick="chrome.webstore.install(); return false;">
  CaptureToCloud Chrome Extension Installation
</a>

(though since you're not actually linking anywhere, there isn't much point in using the <a> tag)

Upvotes: 1

neocotic
neocotic

Reputation: 2131

I've not seen this issue before but I will try to provide a breakdown of the setup I use to manage inline installations for the multiple Chrome extensions on my website.

Within the head node of every page (optionally, only pages that may include one or more Install links) I add the required links to each extension/app page on the Chrome Web Store. This allows me to easily add install links anywhere on the page for various extensions/apps. The JavaScript simply binds an event handler to each of the install links once the DOM has finished loading. This event handler's sole purpose is to install the extension/app that it links to when clicked and then to change its state to prevent further install attempts.

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Link for each extension/app page -->
    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/dcjnfaoifoefmnbhhlbppaebgnccfddf">
    <script>
      // Ensure that the DOM has fully loaded
      document.addEventListener('DOMContentLoaded', function() {
        // Support other browsers
        var chrome = window.chrome || {};
        if (chrome.app && chrome.webstore) {
          // Fetch all install links
          var links = document.querySelectorAll('.js-chrome-install');
          // Create "click" event listener
          var onClick = function(e) {
            var that = this;
            // Attempt to install the extension/app
            chrome.webstore.install(that.href, function() {
              // Change the state of the button
              that.innerHTML = 'Installed';
              that.classList.remove('js-chrome-install');
              // Prevent any further clicks from attempting an install
              that.removeEventListener('click', onClick);
            });
            // Prevent the opening of the Web Store page
            e.preventDefault();
          };
          // Bind "click" event listener to links
          for (var i = 0; i < links.length; i++) {
            links[i].addEventListener('click', onClick);
          }
        }
      });
    </script>
    ...
  </head>
  <body>
    ...
    <!-- Allow inline installation links to be easily identified -->
    <a href="https://chrome.google.com/webstore/detail/dcjnfaoifoefmnbhhlbppaebgnccfddf" class="js-chrome-install">Install</a>
    ...
  </body>
</html>

In order for this system to work fully you also need to support scenarios where the user has returned to your website after installing your extension/app. Although the official documentation suggests using chrome.app.isInstalled this doesn't work when multiple extensions/apps can be installed from a single page. To get around this issue you can simply add a content script to your extension/app like the following install.js file;

// Fetch all install links for this extension/app running
var links = document.querySelectorAll('.js-chrome-install[href$=dcjnfaoifoefmnbhhlbppaebgnccfddf]');
// Change the state of all links
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = 'Installed';
  // Website script will no longer bind "click" event listener as this will be executed first
  links[i].classList.remove('js-chrome-install');
}

Then you just need to modify your manifest.json file to ensure this content script is executed on your domain.

{
  ...
  "content_scripts": [
    {
      "js": ["install.js"],
      "matches": ["*://*.yourdomain.com/*"],
      "run_at": "document_end"
    }
  ]
  ...
}

This will result in the content script being run before the JavaScript on your website so there will be no install links with the js-chrome-install class by the time it is executed, thus no event handlers will be bound etc.

Below is an example of how I use this system;

Homepage: http://neocotic.com

Project Homepage: http://neocotic.com/template

Project Source Code: https://github.com/neocotic/template

Upvotes: 1

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37903

I get the error you mentioned AND a popup window that allows me to install the extension. So probably everybody get the error but for some it is preventing installation.

I got rid of the error by replacing javascript:void() by # in href.

<a href="#" onclick="chrome.webstore.install()">CaptureToCloud Chrome Extension Installation</a>

Upvotes: 0

Related Questions