commit 761fcac37a4c696a72933d3c609adccc35d6291c · indexx.dev/polyplus

+28

entrypoints/devtools/index.html

···

       1
       1
       +
       <!doctype html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
         <head>

     

       4
       4
       +
           <meta charset="UTF-8" />

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       6
       6
       +
           <script src="main.ts" type="module"></script>

     

       7
       7
       +
         </head>

     

       8
       8
       +
         <body>

     

       9
       9
       +
           <dialog class="polyplus-modal" style="width: 95%; height: 95%; border: 1px solid #484848; background-color: #181818; border-radius: 20px; overflow: hidden;">

     

       10
       10
       +
             <div class="row text-muted mb-2" style="font-size: 0.8rem;">

     

       11
       11
       +
               <div class="col">

     

       12
       12
       +
                 <h5 class="mb-0" style="color: #fff;" id="modal-title"></h5>

     

       13
       13
       +
                 <span id="modal-desc"></span>

     

       14
       14
       +
               </div>

     

       15
       15
       +
               <div class="col-auto">

     

       16
       16
       +
                 <button id="modal-close" class="btn btn-info mx-auto">X</button>

     

       17
       17
       +
               </div>

     

       18
       18
       +
             </div>

     

       19
       19
       +
             <div class="modal-body" style="overflow-y: auto; height: calc(100% - 50px); padding-right: 10px; word-wrap: break-word; word-break: break-word;"></div>

     

       20
       20
       +
           </dialog>

     

       21
       21
       +
       

     

       22
       22
       +
           <div class="container text-center mt-5">

     

       23
       23
       +
             <button id="view-preferences" class="btn btn-primary btn-sm w-100 mb-2">View Preferences</button>

     

       24
       24
       +
             <button id="view-cache" class="btn btn-warning btn-sm w-100 mb-2">View Cache</button>

     

       25
       25
       +
             <button id="expose-config" class="btn btn-secondary btn-sm w-100 mb-2">Expose Config</button>

     

       26
       26
       +
           </div>

     

       27
       27
       +
         </body>

     

       28
       28
       +
       </html>

+61

entrypoints/devtools/main.ts

···

       1
       1
       +
       import config from "@/utils/config.json";

     

       2
       2
       +
       import { preferences, cache } from "@/utils/storage";

     

       3
       3
       +
       browser.devtools.panels.create("Poly+", "icon/128.png", "devtools.html");

     

       4
       4
       +
       

     

       5
       5
       +
       for (const src of [

     

       6
       6
       +
         "/css/polytoria.css",

     

       7
       7
       +
         "/css/preferences.css"

     

       8
       8
       +
       ]) {

     

       9
       9
       +
         const css = browser.runtime.getURL(src as any);

     

       10
       10
       +
         const link = document.createElement('link');

     

       11
       11
       +
         link.rel = 'stylesheet';

     

       12
       12
       +
         link.href = css;

     

       13
       13
       +
         document.head.appendChild(link);

     

       14
       14
       +
       };

     

       15
       15
       +
       

     

       16
       16
       +
       const modal: HTMLDialogElement = document.getElementsByTagName('dialog')[0]!;

     

       17
       17
       +
       const openModal = (title: string, description: string, body: any, json: boolean) => {

     

       18
       18
       +
         if (json) {

     

       19
       19
       +
           body = `

     

       20
       20
       +
           <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">

     

       21
       21
       +
             ${JSON.stringify((body || []), null, 2)

     

       22
       22
       +
               .replaceAll('\n','<br>')

     

       23
       23
       +
               .replaceAll(' ', '&nbsp;')

     

       24
       24
       +
               .replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')}

     

       25
       25
       +
           </div>

     

       26
       26
       +
           `;

     

       27
       27
       +
         };

     

       28
       28
       +
       

     

       29
       29
       +
         modal.getElementsByTagName('h5')[0]!.textContent = title;

     

       30
       30
       +
         modal.getElementsByTagName('span')[0]!.textContent = description;

     

       31
       31
       +
         modal.getElementsByClassName('modal-body')[0]!.innerHTML = body;

     

       32
       32
       +
       

     

       33
       33
       +
         modal.showModal();

     

       34
       34
       +
       };

     

       35
       35
       +
       

     

       36
       36
       +
       document.getElementById('view-preferences')!.addEventListener('click', async () => {

     

       37
       37
       +
         openModal(

     

       38
       38
       +
           "Preferences",

     

       39
       39
       +
           "The following values are the user's preferences.",

     

       40
       40
       +
           await preferences.getPreferences(),

     

       41
       41
       +
           true

     

       42
       42
       +
         );

     

       43
       43
       +
       });

     

       44
       44
       +
       

     

       45
       45
       +
       document.getElementById('view-cache')!.addEventListener('click', async () => {

     

       46
       46
       +
         openModal(

     

       47
       47
       +
           "Cache",

     

       48
       48
       +
           "The following values are saved for a certain period of time, before being \"replenished\" when next requested.",

     

       49
       49
       +
           await cache.getValue(),

     

       50
       50
       +
           true

     

       51
       51
       +
         );

     

       52
       52
       +
       });

     

       53
       53
       +
       

     

       54
       54
       +
       document.getElementById('expose-config')!.addEventListener('click', () => openModal(

     

       55
       55
       +
         "Configuration",

     

       56
       56
       +
         "The defining values for several features of the extension.",

     

       57
       57
       +
         config,

     

       58
       58
       +
         true

     

       59
       59
       +
       ));

     

       60
       60
       +
       

     

       61
       61
       +
       document.getElementById('modal-close')!.addEventListener('click', () => modal.close());