0

I would like to make a chrome extension that is able to change between several different "subpages" (top part and logo stay the same, but different layouts + elements in the bottom) but I'm not sure how to add multiple HTML files into the extension.

Otherwise, if it is possible to somehow use javascript (its my first time learning it so I'm not sure) to selectively change which div elements to display (through clicking the buttons) that would be great as well!

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "wdith = device-width, initial-scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content = "ie=edge">
    <link rel="stylesheet" type="text/css" href="textdetails.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
    <title> Study Tracker </title>
  </head>
  <body>
    <div class = "layout-all">
        <div class = "modal-header">
            <div class = "name-version">
                <h1 class = "title">
                    STUDY TRACKER
                </h1>
                <span class = "version">(1.0.0)</span>
                <div class = "line"></div>
            </div>
            <div class="animate" id = "logo"></div>
        </div>
        <div class = "modal-subpages"> <!--buttons to switch between pages-->
            <button class = "subpage-button" onclick = "switchToday()" id = "todayb"> 
                Today
            </button>
            <button class = "subpage-button" onclick = "switchWeek()" id = "weekb"> 
                This Week
            </button>
            <button class = "subpage-button" onclick = "switchGoals()"id = "goalsb"> 
                Goals
            </button>
        </div>
        <div class = "modal-timer"> <!--main body-->
            <div id = "today"> <!--today page-->
                <h1 id="timer">00 : 00 : 00</h1>
                <div class = "timer">
                    <button name = "start" id = "start" class = "timer-button"> 
                        Start
                    </button>
                    <button name = "reset" id = "reset" class = "timer-button"> 
                        Reset
                    </button>
                </div>
            </div>
            <div id = "week"></div> <!--week page-->
            <div id = "goals"></div> <!--goals page-->
        </div>

    </div>
    <script src = "content.js"></script>
    <script src = "button.js"></script>
  </body>
</html>

basically clicking the 'weekb' button will make the 'week' div show up, but not the others

Manifest:

{
    "manifest_version": 2,
    "name": "Study Tracker",
    "description": "Quick launch Study Tracker",
    "version": "1.0.0",
    "icons": {"128": "logo128.png"},
    "browser_action":{
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    },
    "permissions": ["activeTab"]
}

JavaScript:

function switchToday() {
    var x = document.getElementById("today");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
wOxxOm
  • 53,493
  • 8
  • 111
  • 119
Anny
  • 1
  • The only part of the problem specific to extensions is that [(by default) you can't use attributes in html with js inside like onclick](/q/13591983). Otherwise this is something for which you can [find multiple examples](https://www.google.com/search?q=javascript+load+parts+of+html+on+click+dynamically). Note that if those examples load jquery or other scripts from https, it won't work in an extension by default, so you'll download jquery (or other library) to your extension and load it like button.js. – wOxxOm Aug 15 '21 at 04:57

0 Answers0