3

This may be a dupe of the question at Google Chrome DevTools Extension - Detect Page Change, but it's been sitting for over a year without a real answer, and maybe my question will provide some new insight into the problem.

I've written a Chrome Extension which inserts a sidebar panel into DevTools. The side panel lists the dataLayer events, a user can click on the desired event and then use the element picker to select another element on the page, and the plugin displays the path between the elements in dot notation.

Here's the link to the Github project: https://github.com/gruebleenagency/gtm-data-layer-sifter

It works as I'd like it to normally, but if you navigate to another page, the sidebar is not initialized again, so it displays the info from the previous page.

You can see that I have this in my background.js file:

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { if (changeInfo.status == 'complete') { reloadExtension(); } }); function reloadExtension() { // ??? }

I'm wondering if there's any way to make the sidebar reload at this point? Or am I going about this in the wrong way? I've spent a lot of time messing around with this trying to get it to work, but nothing seems to do the trick.

Thanks for any and all help.

Improve this question
2
  • 1
    I didn't try it myself but judging by the docs you can simply send a message to your panel. And then your panel can update itself. Not sure why a reload is needed. A seamless update of the UI is more user-friendly. Anyway, location.reload() should work inside the panel. Commented Aug 29, 2016 at 22:21
  • Thanks wOxxOm, that was helpful. The reason I wanted to reload instead of do a seamless update of the UI is that for some reason it seems like some scripts necessary for the page aren't there after navigating to new page. This could be just a design flaw, but I'm not interested in rewriting the whole plugin just yet. Thanks for your kind reply! I'm going to submit an answer to my own question, hopefully my solution will help someone in the future. Commented Aug 31, 2016 at 15:09

2 Answers 2

Reset to default
2

Here's my solution. It's very possible that this isn't the way it should be done, but I don't have the time to rewrite the whole plugin at the moment, so it'll have to do for now. Any suggestions for how I should have done it would be greatly appreciated. And maybe it will be helpful to someone in a different situation.

Essentially, listen to the tabs.onUpdated event waiting for the 'complete' status, which indicates we've navigated to a new page. Then send message to Devtools.js to refresh the side panel, by setting its page to 'panel.html' again.

In background.js:

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { if (changeInfo.status == 'complete') { reloadExtension(port); } }); function reloadExtension(port) { var message = {action: "reloadExtension"}; port.postMessage(message); }

In Devtools.js:

var sb; createSidebar(); function createSidebar() { chrome.devtools.panels.elements.createSidebarPane("GTM dataLayer Sifter", function(sidebar) { sb = sidebar; sb.setPage("panel.html"); }); } var port = chrome.extension.connect({ name: "Devtools.js Communication" }); // Listen to messages from the background page port.onMessage.addListener(function(message) { if(message.action == "reloadExtension"){ sb.setPage("panel.html"); } });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You can do it by listen onNavigated event:

In Devtools.js

chrome.devtools.network.onNavigated.addListener(() => { console.log('Inspected page reloaded'); });
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.