How do I auto-reload a Chrome extension I’m developing?

How do I auto-reload a Chrome extension I’m developing?

I’d like for my chrome extension to reload every time I save a file in the extension folder, without having to explicitly click “reload” in chrome://extensions/. Is this possible?
Edit: I’m aware I can update the interval at which Chrome reloads extensions, which is a half-way solution, but I’d rather either making my editor (emacs or textmate) trigger on-save a reload or asking Chrome to monitor the directory for changes.

Solutions/Answers:

Solution 1:

You can use Extensions Reloader for Chrome:

Reloads all unpacked extensions using the extension’s toolbar button or by browsing to “http://reload.extensions

If you’ve ever developed a Chrome extension, you might have wanted to
automate the process of reloading your unpacked extension without the
need of going through the extensions page.

“Extensions Reloader” allows you to reload all unpacked extensions
using 2 ways:

1 – The extension’s toolbar button.

2 – Browsing to “http://reload.extensions“.

The toolbar icon will reload unpacked extensions using a single click.

The “reload by browsing” is intended for automating the reload process
using “post build” scripts – just add a browse to
http://reload.extensions” using Chrome to your script, and you’ll
have a refreshed Chrome window.

Update: As of January 14, 2015, the extension is open-sourced and available on GitHub.

Related:  How do I handle a click anywhere in the page, even when a certain element stops the propagation?

Solution 2:

Update: I have added an options page, so that you don’t have to manually find and edit the extension’s ID any more. CRX and source code are at: https://github.com/Rob–W/Chrome-Extension-Reloader
Update 2: Added shortcut (see my repository on Github).
The original code, which includes the basic functionality is shown below.


Create an extension, and use the Browser Action method in conjunction with the chrome.extension.management API to reload your unpacked extension.

The code below adds a button to Chrome, which will reload an extension upon click.

manifest.json

{
    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": {"scripts": ["bg.js"] },
    "browser_action": {
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    },
    "permissions": ["management"]
}

bg.js

var id = "<extension_id here>";
function reloadExtension(id) {
    chrome.management.setEnabled(id, false, function() {
        chrome.management.setEnabled(id, true);
    });
}
chrome.browserAction.onClicked.addListener(function(tab) {
    reloadExtension(id);
});

icon48.png: Pick any nice 48×48 icon, for example:
Google Chrome http://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png Google Chrome

Solution 3:

in any function or event

chrome.runtime.reload();

will reload your extension (docs). You also need to change the manifest.json file, adding:

...
"permissions": [ "management" , ...]
...

Solution 4:

I’ve made a simple embeddable script doing hot reload:

https://github.com/xpl/crx-hotreload

It watches for file changes in an extension’s directory. When a change detected, it reloads the extension and refreshes the active tab (to re-trigger updated content scripts).

  • Works by checking timestamps of files
  • Supports nested directories
  • Automatically disables itself in the production configuration
Related:  javascript return true or return false when and how to use it?

Solution 5:

Another solution would be to create custom livereload script (extension-reload.js):

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_HOST = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) {
  console.log('reload connection got error:', error);
};

connection.onmessage = function (e) {
  if (e.data) {
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') {
      chrome.runtime.reload();
    }
  }
};

This script connects to the livereload server using websockets. Then, it will issue a chrome.runtime.reload() call upon reload message from livereload. The next step would be to add this script to run as background script in your manifest.json, and voila!

Note: this is not my solution. I’m just posting it. I found it in the generated code of Chrome Extension generator (Great tool!). I’m posting this here because it might help.

Solution 6:

Chrome Extensions have a permission system that it wouldn’t allow it (some people in SO had the same problem as you), so requesting them to “add this feature” is not going to work IMO. There’s a mail from Chromium Extensions Google Groups with a proposed solution (theory) using chrome.extension.getViews(), but is not guaranteed to work either.

Related:  How Do I Replace/Change The Heading Text Inside

, Using jquery?

If it was possible to add to the manifest.json some Chrome internal pages like chrome://extensions/, it would be possible to create a plugin that would interact to the Reload anchor, and, using an external program like XRefresh (a Firefox Plugin – there’s a Chrome version using Ruby and WebSocket), you would achieve just what you need:

XRefresh is a browser plugin which
will refresh current web page due to
file change in selected folders. This
makes it possible to do live page
editing with your favorite HTML/CSS
editor.

It’s not possible to do it, but I think you can use this same concept in a different way.

You could try to find third-party solutions instead that, after seeing modifications in a file (I don’t know emacs neither Textmate, but in Emacs it would be possible to bind an app call within a “save file” action), just clicks in an specific coordinate of an specific application: in this case it’s the Reload anchor from your extension in development (you leave a Chrome windows opened just for this reload).

(Crazy as hell but it may work)