How to reload a chrome extension automatically?

Question

I am developing a chrome extension, and I found that there are repeating useless manual reloading works.

When you save a file, you have to refresh the chrome:\\extensions page to let browser to reload the extension. And then you have to reload the test page to see if the changes to files take effect.

I am newbie to Chrome extension development. And are there any ways to reduce the repeating works? I am also curious that what is the best practice of chrome extension development workflow.

Poor English, feel free to correct.

You can see this: http://stackoverflow.com/questions/2963260/how-do-i-auto-reload-a-chrome-extension-im-developing — user2666750, Dec 23 '13 at 03:48
@user2666750 What I need is that when you save the file, the browser will automatically refresh without even a click on the toolbar. Something like `grunt-watch`. — Jerry, Dec 23 '13 at 03:51

score 22 · Accepted Answer · answered Dec 23 '13 at 09:19

The extension can reload itself, by calling chrome.runtime.reload(), so it's a matter of triggering the extension to do it.

One method that worked for me, is to watch for tabs' onUpdated event and look for a specific URL (you have come up with), e.g. http://localhost/reloadX?id=....

This is the sample code (to be placed in background.js):

var myReloadURL = 'http://localhost/reloadX?id='
                  + chrome.i18n.getMessage('@@extension_id');

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    if (info.url === myReloadURL) {
        chrome.tabs.remove(tabId);
        chrome.runtime.reload();
    }
});

Additional permissions (to be declared in manifest.json):

...
"permissions": [
    ...
    "tabs",
    "http://localhost/reloadX?id=*"

_{myReloadURL is arbitrary and can be any URL, just doesn't have to be a real URL or the resource will be rendered unreachable.}

Now, in order to reload your extension, you need to open the following address in Chrome:
http://localhost/reloadX?id=<your_extension_id>

It is up to you to choose how to trigger that on save. It could be an on-save hook in your editor, a custom grunt-watch task (since you seem to be familiar with grunt) etc .

(BTW, you don't need to reload the chrome://extensions page. It suffices to reload the extension.)

I have solve this problem by using `grunt` and `Extension Reloader`, but it's very tricky. Your way is more elegant. Nice answer, thx! :) — Jerry, Dec 23 '13 at 12:46

score 0 · Answer 2 · answered Sep 21 '17 at 02:37

0

I built Clerc to work out-of-the-box with any LiveReload server. Just include any LiveReload compatible watcher in your build process and Clerc will take care of reloading.

answered Sep 21 '17 at 02:37

skylize

1,401
1
9
21

Tonecops · Answer 3 · 2020-04-18T05:41:51.287

I have to reveal this because it is little bit more boiled down for dummies (->miself) than gkalpak's solution but is based on that. This uses a plain bookmark to reload Chrome extension. As prerequisite an Apache is running at port 80.

Create a bookmark at bookmark bar with real functioning localhost url: 'http://localhost/subdir/reload_dummy.php'. That php file was empty. You can change the url to be any valid url on the web to match your need.
Add webRequest permission item to manifest.json:

"permissions":[ "webRequest","tabs"],

Then copy some code to background.js:

var reloadURL = 'http://localhost/subdir/reload_dummy.php';
var cbBeforeRequest = function (info) {

    if (info.url === reloadURL) {
          chrome.runtime.reload();
           alert("HiiHaa!:" + info.url);
    }

}
var filters = {urls: [reloadURL]};
chrome.webRequest.onBeforeRequest.addListener(cbBeforeRequest, filters);

How to reload a chrome extension automatically?

3 Answers3

Linked