How to reload current tab from within a chrome extension popup.html?

Question

I am trying to click on a button to refresh the current page from within a chrome extension.

(NOTE: The reason is because I loaded a script and I needed the page to refresh because presently I just have a disclaimer"you need to refresh the page for it to work", but I would like to remove this disclaimer and just have it done automatically).

I can't figure it out. Here is my code I am trying to refresh the page. If you know a way to eliminate this code and just use an onclick that would be great too, but I tried onclick="location.reload();" but it doesn't work because it isn't fetching the actual tab but just the popup page.

background.html

chrome.browserAction.onClicked.addListener(function (activeTab) {
    var newURL = toggleDevMode(activeTab.url);
    chrome.tabs.update({
        url: refresh
    });
});

refresh.js

document.getElementById("mydivtoclicky").onclick = function() {
    chrome.tabs.getSelected(null, function(tab) {
        tabId = tab.id;

        // send a request to the background page to store a new tabId
        chrome.runtime.sendMessage({type:"new tabid", tabid:tabId});
    });
};

chrome.runtime.sendMessage({type:"refresh"});

popup.html

<head>
    <script type="text/javascript" src="../refresh.js"></script>
</head>
<body>
    <div id="mydivtoclicky">REFRESH PAGE</div>
</body>

Please help thanks.

score 16 · Answer 1 · answered Nov 05 '16 at 03:11

Assume you want to refresh the tab the user is using in the current Chrome window from the extension background runtime, you can use the following example in background.html/background.js.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.reload(tabs[0].id);
});

More about chrome.tabs.reload.

score 13 · Accepted Answer · answered Sep 14 '15 at 17:11

13

To refresh the page use chrome.tabs.update with the tab's url.

refresh.js:

document.getElementById("mydivtoclicky").onclick = function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.update(tabs[0].id, {url: tabs[0].url});
    });
};

answered Sep 14 '15 at 17:11

wOxxOm

65,848
11
132
136

I don't need the other stuff? Just this? – wanna know Sep 14 '15 at 17:31
Ok thanks, but it didn't work. You know that I'm clicking this from within the chrome extension popup? – wanna know Sep 14 '15 at 17:36
How can I say not being there? Use the debugger: right click the popup and `Inspect popup`, open the Source tab, find your js file, set a breakpoint inside the onclick handler, then click your `mydivtoclicky`. – wOxxOm Sep 14 '15 at 17:38
Yes I had the tabs permission. But, it's not working still. When I click on the div, the page is not reloaded. I verified that refresh.js is being loaded into the popup, but it is not reloading the page. – wanna know Sep 14 '15 at 17:42
debugging says this in the debugging screen for refresh.js: `Uncaught TypeError: Cannot set property 'onclick' of null` – wanna know Sep 14 '15 at 17:48
Ahem. Well of course. The script is referenced in `` so it executes before the popup html page is loaded so you either have to use a `DOMContentLoaded` event listener or put the ` – wOxxOm Sep 14 '15 at 17:50
Perfect!! Okay so instead of putting in the popup head tag I placed it AFTER the div that needs to be clicked. Now it works! YAY!! Thank you :) p.s. I think these comments are relevant. They are good for people coming in to read and debug just like I am doing. :) Will accept the answer as soon as I can. Edit: accepted answer, will upvote as soon as I have 15 rep so I can. – wanna know Sep 14 '15 at 17:53
Well, those are basic gimmicks in js development, but okay, you have a point. – wOxxOm Sep 14 '15 at 17:56
1

In order to enable `chrome.tabs.update`, need `"permissions": [ "tabs" ],` in `manifest.json` – Ethan Yang May 01 '17 at 05:40

score 9 · Answer 3 · edited Jul 29 '22 at 09:19

9

My Chrome extension correctly reloads the active tab using chrome.tabs.reload() with all defaults. Very simple. The popup itself stays open.

In popup.js...

function reloadMainTab() {
    chrome.tabs.reload();
}
document.getElementById('reloadBtn').addEventListener('click', reloadMainTab);

You will need to have the tabs permission in your manifest.json.

edited Jul 29 '22 at 09:19

Adam Lynch

3,341
5
36
66

answered Feb 11 '16 at 01:25

Pomo

171
2
1

This looked the simplest. As opposed to what you might think, this only reloaded the tab I am currently on, rather than all tabs in the browser, which is exactly what I desired. – Volomike Feb 05 '19 at 03:12
This is the best answer. – Adam Lynch Jul 29 '22 at 09:18

How to reload current tab from within a chrome extension popup.html?

3 Answers3