How to Enable Inline Chrome Extension Installation in Chrome Browser?

In case you didn’t notice [inline chrome extension example], I have added an button/link to allow inline chrome extension without leaving the current page/site.

When the users click the button on the top-right corner (+ Chrome Extension), the Chrome users will see this dialog popup, which allows users intall the chrome extension without leaving the tool, i.e. the inline chrome extension installation.

add-chrome-extension-inline

However, if you are non-Chrome users, the link will redirect you to the Chrome webstore, the extension/plugin page for more details.

How to Install Inline Chrome Extension?

According to Official document, it is very simple. First you need to add the following to the head section of your HTML source code.

1

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

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

Of course, you need to replace the last bit of the extension ID with yours. Then you just need to specify the click-event to the following:

1

chrome.webstore.install();

chrome.webstore.install();

That will automatically detect the extension item and pop up the inline-installation dialog. An example use will be putting the code in the onclick event of a button:

1

<button onclick="chrome.webstore.install()">+Chrome Extension</button>

<button onclick="chrome.webstore.install()">+Chrome Extension</button>

How to Check If Chrome Users?

To redirect the non-chrome users to a proper page instead of doing nothing i.e. chrome/chrome webstore objects are undefined in other browsers, you need the following code to check if it is a chrome user:

1
2

// check if current user is using Chrome browser
var isChrome = chrome && (chrome.webstore != undefined);

// check if current user is using Chrome browser
var isChrome = chrome && (chrome.webstore != undefined);

To put these together:

1
2
3
4
5
6
7
8
9

function chromeExt() {
  // check if current user is using Chrome browser
  var isChrome = chrome && (chrome.webstore != undefined);
  if (isChrome) { // inline-installation for Chrome users.
    chrome.webstore.install();
  } else { // redirect non-chrome users to a proper page.
    location = "https://chrome.google.com/webstore/detail/simple-video-download-hel/ilcdiicigjaccgipndigcenjieedjohj";
  }
}

function chromeExt() {
  // check if current user is using Chrome browser
  var isChrome = chrome && (chrome.webstore != undefined);
  if (isChrome) { // inline-installation for Chrome users.
    chrome.webstore.install();
  } else { // redirect non-chrome users to a proper page.
    location = "https://chrome.google.com/webstore/detail/simple-video-download-hel/ilcdiicigjaccgipndigcenjieedjohj";
  }
}

–EOF (The Ultimate Computing & Technology Blog) —

chrome-extension