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

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 48x48 icon, for example:

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" , ...] ... 

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

I am using a shortcut to reload. I don't want to reload all the time when I save a file

So my approach is lightweight, and you can leave the reload function in

manifest.json

{ ... "background": { "scripts": [ "src/bg/background.js" ], "persistent": true }, "commands": { "Ctrl+M": { "suggested_key": { "default": "Ctrl+M", "mac": "Command+M" }, "description": "Ctrl+M." } }, ... } 

src/bg/background.js

chrome.commands.onCommand.addListener((shortcut) => { console.log('lets reload'); console.log(shortcut); if(shortcut.includes("+M")) { chrome.runtime.reload(); } }) 

Now press Ctrl + M in the chrome browser to reload

TL;DR

Create a WebSocket server that dispatches a message to a background script that can handle the update. If you are using webpack and don't plan to do it yourself, webpack-run-chrome-extension can help.

Answer

You can create a WebSocket server to communicate with the extension as a WebSocket client (via window object). The extension would then listen for file changes by attaching the WebSocket server to some listener mechanism (like webpack devServer).

Did the file change? Set the server to dispatch a message to the extension asking for updates (broadcasting the ws message to the client(s)). The extension then reloads, replies with "ok, reloaded" and keeps listening for new changes.

Plan

1. Set up a WebSocket server (to dispatch update requests)
2. Find a service that can tell you when did the files change (webpack/other bundler software)
3. When an update happens, dispatch a message to client requesting updates
4. Set up a WebSocket client (to receive update requests)
5. Reload the extension

How

For the WebSocket server, use ws. For file changes, use some listener/hook (like webpack's watchRun hook). For the client part, native WebSocket. The extension could then attach the WebSocket client on a background script for keeping sync persistent between the server (hosted by webpack) and the client (the script attached in the extension background).

Now, to make the extension reload itself, you can either call chrome.runtime.reload() in it each time the upload request message comes from the server, or even create a "reloader extension" that would do that for you, using chrome.management.setEnabled() (requires "permissions": [ "management" ] in manifest).

In the ideal scenario, tools like webpack-dev-server or any other web server software could offer support for chrome-extension URLs natively. Until that happens, having a server to proxy file changes to your extension seems to be the best option so far.

Available open-source alternative

If you are using webpack and don't want to create it all yourself, I made webpack-run-chrome-extension, which does what I planned above.

The great guys at mozilla just released a new https://github.com/mozilla/web-ext that you can use to launch web-ext run --target chromium

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.

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.

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)

Here's a function that you can use to watch files for changes, and reload if changes are detected. It works by polling them via AJAX, and reloading via window.location.reload(). I suppose you shouldn't use this in a distribution package.

function reloadOnChange(url, checkIntervalMS) { if (!window.__watchedFiles) { window.__watchedFiles = {}; } (function() { var self = arguments.callee; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (__watchedFiles[url] && __watchedFiles[url] != xhr.responseText) { window.location.reload(); } else { __watchedFiles[url] = xhr.responseText window.setTimeout(self, checkIntervalMS || 1000); } } }; xhr.open("GET", url, true); xhr.send(); })(); } reloadOnChange(chrome.extension.getURL('/myscript.js')); 

Maybe I'm a little late to the party, but I've solved it for me by creating https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

It works by reloading chrome://extensions page, whenever file.change events are incoming via websockets.

A Gulp-based example of how to emit file.change event upon file changes in an extension folder can be found here: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Why reloading the entire tab instead of just using the extensions management api to reload/re-enable extensions? Currently disabling and enabling extensions again causes any open inspection window (console log etc.) to close, which I found to be too annoying during active development.

There's an automatic reload plugin if you're developing using webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader'); plugins: [ new ChromeExtensionReloader() ] 

Also comes with a CLI tool if you don't want to modify webpack.config.js:

npx wcer 

Note: an (empty) background script is required even if you don't need it because that's where it injects reload code.

Maybe a bit late answer but I think crxreload might work for you. It's my result of trying to have a reload-on-save workflow while developing.

Use npm init to create a package.json in directory root, then

npm install --save-dev gulp-open && npm install -g gulp

then create a gulpfile.js

which looks like:

/* File: gulpfile.js */ // grab our gulp packages var gulp = require('gulp'), open = require('gulp-open'); // create a default task and just log a message gulp.task('default', ['watch']); // configure which files to watch and what tasks to use on file changes gulp.task('watch', function() { gulp.watch('extensionData/userCode/**/*.js', ['uri']); }); gulp.task('uri', function(){ gulp.src(__filename) .pipe(open({uri: "http://reload.extensions"})); }); 

This works for me developing with CrossRider, you might watch to change the path you watch the files at, also assuming you have npm and node installed.

Your content files such has html and manifest files are not changeable without installation of the extension, but I do believe that the JavaScript files are dynamically loaded until the extension has been packed.

I know this because of a current project im working on via the Chrome Extensions API, and seems to load every-time i refresh a page.

Disclaimer: I developed this extension myself.

Clerc - for Chrome Live Extension Reloading Client

Connect to a LiveReload compatible server to automatically reload your extension every time you save.

Bonus: with a little extra work on your part, you can also automatically reload the webpages that your extension alters.

Most webpage developers use a build system with some sort of watcher that automatically builds their files and restarts their server and reloads the website.

Developing extensions shouldn't need to be that different. Clerc brings this same automation to Chrome devs. Set up a build system with a LiveReload server, and Clerc will listen for reload events to refresh your extension.

The only big gotcha is changes to the manifest.json. Any tiny typos in the manifest will probably cause further reload attempts to fail, and you will be stuck uninstalling/reinstalling your extension to get your changes loading again.

Clerc forwards the complete reload message to your extension after it reloads, so you can optionally use the provided message to trigger further refresh steps.

MAC ONLY

Using Extensions Reloader:

Using Typescript

1. Add the watcher of your to your project: yarn add tsc-watch

2. Add command to scripts to package.json

... "scripts": { "dev": "tsc-watch --onSuccess \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\"" }, ... 

3. Run script yarn dev

Using JavaScript

1. Add the watcher of your to your project: yarn add watch-cli

2. Add command to scripts to package.json

... "scripts": { "dev": "watch -p \"**/*.js\" -c \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\"" }, ... 

3. Run script yarn dev

Bonus: Turn on 'reload current tab' in Extensions Reloader options, so it reloads after a change was made:

If you are using Vite, here is a simple Vite plugin to reload the chrome extension when developing for mv3.

Usage

$ npm i hot-reload-extension-vite -D 

import hotReloadExtension from 'hot-reload-extension-vite'; export default { plugins: [ hotReloadExtension({ log: true, backgroundPath: 'path/to/background' // src/pages/background/index.ts }) ] }; 

Then run

$ NODE_ENV=development vite build --watch 

Extension and your tab will reload when vite detects file change.

Thanks to @GmonC and @Arik and some spare time, I managet to get this working. I have had to change two files to make this work.

(1) Install LiveReload and Chrome Extension for that application. This will call some script on file change.

(2) Open <LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) change line #509 to

this.window.location.href = "http://reload.extensions";

(4) Now install another extension Extensions Reloader which has useful link handler that reload all development extensions on navigating to "http://reload.extensions"

(5) Now change that extension's background.min.js in this way

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))

replace with

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload")) 

Open LiveReload application, hide Extension Reloader button and activate LiveReload extension by clicking on button in toolbar, you will now reload page and extensions on each file change while using all other goodies from LiveReload (css reload, image reload etc.)

Only bad thing about this is that you will have to repeat procedure of changing scripts on every extension update. To avoid updates, add extension as unpacked.

When I'll have more time to mess around with this, I probably will create extension that eliminates need for both of these extensions.

Untill then, I'm working on my extension Projext Axeman

Just found a newish grunt based project that provides bootstrapping, scaffolding, some automated pre-processing faculty, as well as auto-reloading (no interaction needed).

Bootstrap Your Chrome Extension from Websecurify

I want to reload (update) my extensions overnight, this is what I use in background.js:

var d = new Date(); var n = d.getHours(); var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; // refresh after 24 hours if hour = 0 else // refresh after 24-n hours (that will always be somewhere between 0 and 1 AM) setTimeout(function() { location.reload(); }, untilnight); 

Regards, Peter

I primarily develop in Firefox, where web-ext run automatically reloads the extension after files change. Then once it's ready, I do a final round of testing in Chrome to make sure there aren't any issues that didn't show up in Firefox.

If you want to develop primarily in Chrome, though, and don't want to install any 3rd party extensions, then another option is to create a test.html file in the extension's folder, and add a bunch of SSCCE's to it. That file then uses a normal <script> tag to inject the extension script.

You could use that for 95% of testing, and then manually reload the extension when you want to test it on live sites.

That doesn't identically reproduce the environment that an extension runs in, but it's good enough for many simple things.

You can reload the extension by calling chrome.runtime.reload(). If you want to reload the extension automatically on each build, you can set up a script to poll for changes.

Here's an example with a package.json file:

// package.json // public is the folder containing the unpacked extension { "name": "package-name", "type": "module", "scripts": { "build": "tsc && vite build", "build-and-reload": "echo $(date +%s) > public/.timestamp && npm run build" } } 

// background.ts import { log } from "./log"; export const initAutoUpdater = () => { log("initAutoUpdater"); const loop = async () => { const currentTS = await fetch("./.timestamp").then((_) => _.json()); while (true) { log("checking for updates..."); const newTS = await fetch("./.timestamp") .then((_) => _.json()) .catch(() => "unknown"); if (newTS === "unknown" || newTS === currentTS) { await new Promise((resolve) => setTimeout(resolve, 1000)); } else { log(`new update found! ${new Date(currentTS)} -> ${new Date(newTS)}`); chrome.runtime.reload(); return; } } }; loop(); }; 

Here's how I use it:

1. I have a build task mapped to CMD+shift+B in VSCode
2. on each build we re-generate the .timestamp file with the current Unix timestamp
3. background.js polls for that file and compares it with the version it accessed on first load (req.json() works as Number is a valid JSON value)
4. if the timestamp is different, we reload the runtime

I've forked LiveJS to allow for live reloading of Packaged Apps. Just include the file in your app and every time you save a file the app will autoreload.

Yes,you can do it indirectly! Here is my solution.

In manifest.json

{ "name": "", "version": "1.0.0", "description": "", "content_scripts":[{ "run_at":"document_end", "matches":["http://*/*"], "js":["/scripts/inject.js"] }] } 

In inject.js

(function() { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'Your_Scripts'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); })(); 

Your injected script can inject other script from any location.

Another benefit from this technic is that you can just ignore the limitation of isolated world. see content script execution environment

As mentioned in the docs: the following command line will reload an app

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ] 

so I just created a shell script and called that file from gulp. Super simple:

var exec = require('child_process').exec; gulp.task('reload-chrome-build',function(cb){ console.log("reload"); var cmd="./reloadchrome.sh" exec(cmd,function (err, stdout, stderr) { console.log("done: "+stdout); cb(err); } );}); 

run your necessary watch commands on scripts and call the reload task when you want to. Clean, simple.

This is where software such as AutoIt or alternatives shine. The key is writing a script which emulates your current testing phase. Get used to using at least one of them as many technologies do not come with clear workflow/testing paths.

Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe") WinWaitActive("New Tab - Google Chrome") Send("^l") Send("chrome://extensions{ENTER}") WinWaitActive("Extensions - Google Chrome") Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}") Send("{ENTER}") WinWaitActive("Extensions - Google Chrome") Send("{TAB}{TAB}") Send("{ENTER}") WinWaitActive("Developer Tools") Send("^`") 

Obviously you change the code to suit your testing/iterating needs. Make sure tab clicks are true to where the anchor tag is in the chrome://extensions site. You could also use relative to window mouse movements and other such macros.

I would add the script to Vim in a way similar to this:

map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR> 

This means that when I'm in Vim I press the button above ENTER (usually responsible for: | and \) known as the leader button and follow it with a capital 'A' and it saves and begins my testing phase script.

Please make sure to fill in the {input...} sections in the above Vim/hotkey script appropriately.

Many editors will allow you to do something similar with hotkeys.

Alternatives to AutoIt can be found here.

For Windows: AutoHotkey

For Linux: xdotool, xbindkeys

For Mac: Automator

If you have a Mac, ¡the easiest way is with Alfred App!

Just get Alfred App with Powerpack, then add the workflow provided in the link below and customise the hotkey you want (I like to use ⌘ + ⌥ + R). That's all.

Now, every time you use the hotkey, Google Chrome will reload, no matter which application you're at that moment.

If you want to use other browser, open the AppleScript inside Alfred Preferences Workflows and replace "Google Chrome" with "Firefox", "Safari", ...

I also will show here the content of the /usr/bin/osascript script used in the ReloadChrome.alfredworkflow file so you can see what it is doing.

tell application "Google Chrome" activate delay 0.5 tell application "System Events" to keystroke "r" using command down delay 0.5 tell application "System Events" to keystroke tab using command down end tell 

The workflow file is ReloadChrome.alfredworkflow.

The author recommended the next version of that webpack plugin: https://github.com/rubenspgcavalcante/webpack-extension-reloader. It works very well for me.

Here is a Reload URL solution for MacOS and WebPack that is an essence of what Extension Reloader offers but which might be build into your project. The principle might be adapted to any development environment.

It consists of two parts:

• The trigger that opens the Reload URL, a special URL that triggers the reload of the extension.
• The Reload URL listener on the extension Background script.

1. Register a pseudo-plugin in WebPack config

// webpack.config.js { ... plugins: [ ... { apply: (compiler) => { compiler.hooks.afterEmit.tap('ReloadExtensionPlugin', () => { exec('open "https://unique-url-to-trigger-reload"') }) }, }, ]} 

2. Introduce a reload handler in Background script which will listen for this Reload URL in development mode:

// background.js if (DEVELOPMENT) { chrome.tabs.onCreated.addListener(async (tab) => { const url = tab.url || tab.pendingUrl const isReloadUrl = url === 'https://unique-url-to-trigger-reload' if (isReloadUrl) { console.log(`[Reload extension]`) chrome.tabs.remove(tab.id!) chrome.runtime.reload() } }) } 

You can find out the details in this project.