Open a "Help" page after Chrome extension is installed first time

32
votes

I am new to Chrome extension. I have a question about how to make the extension to open a "Help" page automatically after installation. Currently, I am able to check whether the extension is running the first time or not by saving a value into localStorage. But this checking is only carried out when using click the icon on the tool bar. Just wondering if there is a way that likes FF extension which uses the javascript in to open a help page after the installation. Thanks.

Edit: Thanks for the answer from davgothic. I have solved this problem. I have another question about the popup. My extension checks the url of current tab, 

if OK(url){
    //open a tab and do something
}
else{
    //display popup
}
Is it possible to show the popup in this way?
5
google-chromegoogle-chrome-extension
possible duplicate of Detect Chrome extension first run / update - Alvin Wong

5 Answers

81
votes

Check this updated and most reliable solution provided by Chrome: chrome.runtime Event 

chrome.runtime.onInstalled.addListener(function (object) {
    chrome.tabs.create({url: "http://yoursite.com/"}, function (tab) {
        console.log("New tab launched with http://yoursite.com/");
    });
});

Add this to your background.js I mean the the page you defined on manifest like following,

....
"background": {
      "scripts": ["background.js"],
      "persistent": false
  }
...
30
votes

UPDATE: This method is no longer recommended. Please see Nuhil's more recent answer below.

I believe what you need to do is put something like this into a script in the <head> section of your extension's background page, e.g. background.html

function install_notice() {
    if (localStorage.getItem('install_time'))
        return;

    var now = new Date().getTime();
    localStorage.setItem('install_time', now);
    chrome.tabs.create({url: "installed.html"});
}
install_notice();
5
votes

It would be better to place a "version" number so you can know when an extension is updated or installed.

It has been answered here: Detect Chrome extension first run / update

5
votes

As of now (Nov 2020) the right way to execute code on first install or update of an extension is by using the runtime.onInstalled event.

This event is documented here: https://developer.chrome.com/extensions/runtime#event-onInstalled

chrome.runtime.onInstalled.addListener(function (details) {
  if (details.reason === "install") {
    // Code to be executed on first install
    // eg. open a tab with a url
    chrome.tabs.create({
      url: "https://google.com"
    });
  } else if (details.reason === "update") {
    // When extension is updated
  } else if (details.reason === "chrome_update") {
    // When browser is updated
  } else if (details.reason === "shared_module_update") {
    // When a shared module is updated
  }
});

This code can be added to a background script: https://developer.chrome.com/extensions/background_pages

0
votes

All you need to do is adding the snippet below to your background.js file

chrome.runtime.onInstalled.addListener(function (object) {
    chrome.tabs.create({url: `chrome-extension://${chrome.runtime.id}/options.html`}, function (tab) {
        console.log("options page opened");
    });
});