companion.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="A browser extension for Chrome and Firefox that displays partial commentary for Homestuck (up to and including two thirds of ACT 5 ACT 2), complete commentary for Problem Sleuth and adds keyboard navigation for all adventures on the site.">
    <meta name="Makin" content="">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://homestuck.net/companion.html" />
    <meta property="og:site_name" content="HOMESTUCK.NET" />
    <meta property="og:title" content="Homestuck Companion Browser Extension" />
    <meta property="og:description" content="A browser extension for Chrome and Firefox that displays partial commentary for Homestuck (up to and including two thirds of ACT 5 ACT 2), complete commentary for Problem Sleuth and adds keyboard navigation for all adventures on the site.">
    <meta property="og:keywords" content="browser, extension, chrome, firefox, download, homestuck, hiveswap, community, andrew hussie, hussie, resources, games, music, news, information" />
    <meta property="og:image" content="https://homestuck.net/img/tools/homestuck-companion.png" />
    <meta property="og:locale" content="en-US" />

      <meta name="msapplication-TileColor" content="#00CC00">
      <meta name="theme-color" content="#00CC00">
    <title>Homestuck Companion Browser Extension - HOMESTUCK.NET</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

    <link rel="apple-touch-icon" href="/favicon.png" sizes="180x180">
    <link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
    <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
    <link rel="icon" href="/favicon.png">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
        
        html {
            background-image: url("/img/background.png");
            background-repeat: repeat;
        }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
  <nav class="site-header sticky-top py-1">
    <div class="container d-flex flex-column flex-md-row justify-content-between">
      <a class="navbar-spiro py-2" href="/index.html" aria-label="Homestuck.net">
      
      <img class="bd-placeholder-img mr-2 rounded" height="25" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" src="img/templogowhite.png">
      </a>
      <a class="py-2 d-none d-md-inline-block" href="/games">Games</a>
      <a class="py-2 d-none d-md-inline-block" href="/music">Music</a>
      <a class="py-2 d-none d-md-inline-block" href="/resources">Resources</a>
      <a class="py-2 d-none d-md-inline-block" href="/tools">Tools</a>
      <a class="py-2 d-none d-md-inline-block" href="/meta">Meta</a>
      <a class="py-2 d-none d-md-inline-block" href="/fanworks">Fanworks</a>
      <a class="py-2 d-none d-md-inline-block" href="/official">Official</a>
    </div>
  </nav>
  <div class="container">
      <div class="row"><div class="col-md-12">
        <p><h1 class="my-4">Homestuck Companion</h1></div></div>
      <div class="row"><div class="col-md-12"><img title="Homestuck Companion Browser Extension" class="img-fluid rounded mb-5 mb-md-3" src="/img/tools/homestuck-companion.png"></div></div>
      <hr>
      <div class="row"><div class="col-md-12"><h4>As of 2023, you're probably better off using either version of the <a href="/homestuck.html">Homestuck Collection</a> with the commentary mod (which is automatically installed in the online version). Only use this if you can only use homestuck.com for whatever reason.</h4></div></div>
      <hr>
      <div class="row"><div class="col-md-12">
        <h3>What is this?</h3>
        <p>Homestuck Companion is an extension for your desktop or mobile browser, which displays Andrew Hussie's commentary for Homestuck up to the first two thirds of Act 5 Act 2, complete commentary for Problem Sleuth and enables keyboard navigation for all adventures on the site.</p>
        <p>Additionally, it links your browser to the <a href="https://bambosh.github.io/unofficial-homestuck-collection/"></a>Homestuck Collection</a>, so that navigating to a Homestuck page makes the corresponding page open in the latter.</p>
        <h3>How do I use it?</h3>
        <ul><li>Mozilla Firefox (and mobile): Click <a href="https://addons.mozilla.org/en-US/firefox/addon/homestuck-companion/" title="Homestuck Companion for Firefox">here</a> to install the extension on Firefox.</li>
        <li>Google Chrome: Click <a href="https://chrome.google.com/webstore/detail/homestuck-companion/iflmcpajnjgcmfcdlokppahkgkolmcfd?hl=en" title="Homestuck Companion for Chrome">here</a> to install the extension on Chrome.</li></ul>
        <p>Afterwards, navigate to a valid Homestuck.com page like <a href="https://www.homestuck.com/story/1">https://www.homestuck.com/story/1</a>. You will be able to see the commentary for pages that have it. You can use the Settings menu to disable this behavior as well as the redirection.</p>
        <p><b>Keyboard controls</b>: the Left and Right Arrow Keys allow you to move back and forward in the story. The <i>right</i> Ctrl key is used to open or close Pesterlogs and logs of any kind.</p>
      <hr>     
  </div>
  
  <script src="/js/jquery.min.js"></script>
  <script src="/js/tether.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>

</body>
<footer class="container py-5">
  <div class="row">
    <div class="col-12 col-md">
      <img class="logo" src="/img/templogo.png">
      <small class="d-block mb-3 text-muted">Public Domain 2020 - ∞</small>
    </div>
    <div class="col-6 col-md">
      <h5>Analysis and Meta</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="/meta/analysis.html">Homestuck analysis</a></li>
        <li><a class="text-muted" href="/meta/stats.html">Homestuck stats</a></li>
        <li><a class="text-muted" href="/meta/surveys.html">Surveys and censuses</a></li>
        <li><a class="text-muted" href="/meta/liveblogs.html">Liveblogs</a></li>
        <li><a class="text-muted" href="/meta/other.html">Other meta</a></li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>Music Resources</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="/music/references.html">Music references</a></li>
        <li><a class="text-muted" href="/music/visualizer.html">Reference visualizer</a></li>
        <li><a class="text-muted" href="/music/sheetmusic">Sheet music and MIDIs</a></li>
        <li><a class="text-muted" href="/music/albums.html">Fan albums</a></li>
        <li><a class="text-muted" href="/music/misc.html">Other resources</a></li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>Fan Resources</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="/resources/cosplay.html">Cosplay guides</a></li>
        <li><a class="text-muted" href="/resources/roleplaying.html">Roleplaying guides</a></li>
        <li><a class="text-muted" href="/resources/assets.html">Art assets</a></li>
        <li><a class="text-muted" href="/resources/other.html">Other resources</a></li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>Other</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="/fanworks">Homestuck fanworks</a></li>
        <li><a class="text-muted" href="/games">Homestuck games</a></li>
        <li><a class="text-muted" href="/tools">Software and tools</a></li>
        <li><a class="text-muted" href="/official">Official content</a></li>
        <li><a class="text-dark" href="/archives.html">Homestuck Archives</a></li>
        <li><a class="text-muted" href="/about.html">About</a></li>
      </ul>
    </div>
  </div>
</footer>

</html>