14

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.

Improve this question
4
  • 1
    should be chrome://extensions, right ? Commented Dec 23, 2013 at 3:41
  • @ShivanRaptor You're right, I updated it. Commented Dec 23, 2013 at 3:42
  • 2
    You can see this: stackoverflow.com/questions/2963260/… Commented Dec 23, 2013 at 3: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. Commented Dec 23, 2013 at 3:51

3 Answers 3

Reset to default
23

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.)

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I have solve this problem by using grunt and Extension Reloader, but it's very tricky. Your way is more elegant. Nice answer, thx! :)
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.

Improve this answer

Comments

0

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.

  1. 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.

  2. 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);
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.