0

I will try to make this as short as possible. I am making a Chrome extension and I wanted to have an integrated settings tab so users can customize their experience. Now, I want this settings tab to be somewhat of an "extension" to an existing settings tab in a website. Let me explain.

The website I am talking about is Roblox.com, a popular gaming platform. When logged in, you have the ability to visit your settings, which look something like this:

Roblox Settings

Now, in order to navigate the different setting "tabs," you simply click on a button and it takes you to another change. The URL corresponding to each page is https://www.roblox.com/my/account#!/TAB_NAME, with TAB_NAME being the name of the tab. What I want to do is make my own "tab" where once the player clicks, it will bring them to a settings tab where they can tweak the extension's settings. This would look something like this:

Custom Settings Tab

I am fully aware on how to this (inject a button into the list and customize said button), but what I don't know what to do is make it so that once the button is clicked, it will not redirect you to another website, but will simply "switch tabs" like it would with any other setting. There is an extension that already does that called "Roblox+", where it adds a button to the list, and once clicked, it takes you to a similar-looking page with the URL https://www.roblox.com/my/account?tab=rplus#!/info. From my understanding, since the tab name isn't a header, the URL does not change, which allows for a custom webpage. Now, if you were to paste that URL in a browser without the extension, then it would simply redirect you to the "Account Info" tab (although the URL remains). Here is how the Roblox+ extension settings page looks like:

Roblox+ Settings Page

Now, from what I can assume, what happens is that right after the normal account information page is loaded, it removes all the HTML elements that are related to the account information tab and re-creates the entire page using custom HTML elements. That is something similar to what I want to do. Regardless of this, I do have one question. Is it possible to somehow "overwrite" a certain domain so that, let's say, the URL https://www.roblox.com/my/account#!/my_plugin_settings led to my custom page (even if that means that the page is made from an HTML file) instead of where it was supposed to lead? If that isn't possible, would it be better to create a custom settings page outside of the Roblox website or somehow inject my own into the current settings?

This is the question that I have. Hopefully I explained it well. If someone could assist me on this, then that would be amazing. Thank you for your time and help, I truly appreciate it.

Batimius
  • 99
  • 3
  • 10
  • 1
    No need to overwrite the page: add a `hashchange` event listener to detect the change of URL and optionally use MutationObserver to wait for the selector of the last tab name in the settings, then add your DOM element with a click listener. When it's clicked you'll replace the contents area on the right with your own DOM or show a new element that covers the area entirely via CSS. – wOxxOm Mar 09 '22 at 02:11
  • @wOxxOm Thank you for the reply and the information. I had no idea the `hashchange` event even existed. I will most certainly use something like this while editing the contents of the area. I do have a question though. Whenever I try to go to my custom hash (say `https://www.roblox.com/my/account#!/pluginsettings`), it automatically redirects to `https://www.roblox.com/my/account#!/info`. Is it possible to somehow prevent this behavior so I can have a hash dedicated to my settings? Thank you again for your time and help, I greatly appreciate it. – Batimius Mar 09 '22 at 13:42
  • I think I found the source of what is causing the redirection. It is a script that basically checks if the tab is in a list, and if it isn't, it redirects back to info. The code can be found [here](https://js.rbxcdn.com/22a78d7a88632dddcae3b217c204dc9ab4fd07fdb9765ad8c5a114b02dbe07da.js). Once you beautify the script, just `Ctrl + F` `a.templates.accountSocial` and it should bring you to the proper function (function 4395). I assume that there isn't a way to edit this script, so what can I do to prevent the script from re-directing on my hash? Thanks again. – Batimius Mar 09 '22 at 14:26
  • 1
    Assuming the site also listens to this event using addEventListener, you can override addEventListener in [page context](/a/9517879) using a content script that runs at `document_start`. In your override you'll check if the hash is yours, and show the UI accordingly, otherwise you'll call the original function reference of addEventListener. – wOxxOm Mar 09 '22 at 18:34

0 Answers0