Google Chrome: updating extension in "Developer mode" (locally) from userscript

Question

I created an extension for Google Chrome which runs a small userscript for designated web-page and makes some requests via background.js to the chrome APIs (such chrome.tabs and others).

now, I'm testing it locally in "Developer mode" like this:

I edit my userscript.js and background.js;
then I go to chrome://extensions tab in Google Chrome and manually reload (CTR+R) my extension from local D:\my-extension folder.
finally, I switch to the tab with designated web-page and reload it to see the changes.

the problem is:
since I'm a beginner, a lot of changes have to be done to my userscript.js and background.js before my extension and userscript start working as expected. so, this process involves a lot of monotonous switching between extensions and page tabs while testing.

the idea is:
it would be nice to add a button or a shortcut key on the page where the userscript is being tested and attach a sort of 'update_extension_and_reload_page' function to it in my userscript, so that evey time when I click this button it will call extension update from the local folder D:\my-extension then followed by page reload. (another alternative would be to assign such 'update_extension_and_reload_page' function to extension's browser_action icon.)

now, I'm just interested:
is there any sort of 'chrome.extesion.update' method, so that I could make a request to it from my userscript.js via background.js and call automatic reload of the extension (in "Developer mode") without need to go to the chrome://extensions tab.

possible duplicate of [How do I auto-reload a Chrome extension I'm developing?](http://stackoverflow.com/questions/2963260/how-do-i-auto-reload-a-chrome-extension-im-developing) — rsanchez, Jan 19 '14 at 14:53
I don't think it is much of a duplicate: This one is about reloading the extension along with the active tab. The other one is about automating extension reloading "on-save". Besides, applying the accepted answer to this question would mean reloading **all** unpackaged extension and requiring an extra "click" to reload the active page. — gkalpak, Jan 20 '14 at 08:33

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

is this what you are looking for?

https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid

Credit goes go

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

edited May 23 '17 at 10:31

Community

1
1

answered Jan 20 '14 at 03:14

Abdullah Choudhury

436
3
5

Imho so far the best plugin, with shortcut and the ability to refresh the chrome tab as well. Great! – TefoD Aug 19 '21 at 08:14

score 1 · Accepted Answer · edited May 23 '17 at 10:31

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

The code below attaches the following functionality to the browser-action button:

Keeps track of the active tab.
Reloads the extension.
Reloads the active tab.

manifest.json

...
"browser_action": {
    "default_title": "Reload"
//    "default_icon": {
//        "19": "img/icon19.png",
//        "38": "img/icon38.png"
//    },
},
...

background.js

chrome.browserAction.onClicked.addListener(function (tab) {
    localStorage.tabToReload = tab.id;
    chrome.runtime.reload();
});

function reloadTab() {
    var tabID = localStorage.tabToReload;
    if (tabID) {
        chrome.tabs.reload(parseInt(tabID));
        delete(localStorage.tabToReload);
    }
}
reloadTab();
...

See, also, this answer on how to automate the re-loading process.

score 1 · Answer 3 · edited May 23 '17 at 12:28

slightly modified the ExpertSystem's code above to call reload of extension followed by reload of tab where the content script (userscript.js) is being performed, all triggered by #reload-btn button (in case the browser_action icon is occupied with popup.html).

manifest.json

...
"background":{ "scripts": ["background.js"]},

"content_scripts" : [{
        "matches" : ["https://stackoverflow.com/*"],
        "css": ["userscript.css"],          
        "js": ["jquery-latest.min.js", "userscript.js"],
        "run_at":"document_end"  
}], 

"web_accessible_resources": ["jquery-latest.min.map"],

"permissions": ["tabs"], 

"browser_action": {
    "default_icon": "icon19.png",
    "default_title": "My Extension Title",
    "default_popup": "popup.html"
}
...

userscript.css

...
#reload-btn { position: fixed; top: 0; right: 0; } /* or any other position on the page */
...

userscript.js

...
$("body").prepend("<button id='reload-btn'>reload extension + page reload</button>"); // some shortcut key can be additionally assigned to this button

$("#reload-btn").on("click", function() { 
    chrome.runtime.sendMessage("please, reload me");
});
...

background.js

...
chrome.runtime.onMessage.addListener(
    function(message, sender) {
        if (message == "please, reload me"){
            localStorage.tabToReload = sender.tab.id;
            chrome.runtime.reload();
    }
});

function reloadTab() {
    var tabID = localStorage.tabToReload;
    if (tabID) {
        chrome.tabs.reload(parseInt(tabID));
        delete(localStorage.tabToReload);
    }
}

reloadTab();
...

Google Chrome: updating extension in "Developer mode" (locally) from userscript

3 Answers3

Linked