☰

Text Explainer Settings

Settings module for Text Explainer

当前为 2025-03-04 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/528763/1547018/Text%20Explainer%20Settings.js 

  1. // ==UserScript==
  2. // @name         Text Explainer Settings
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.0
  5. // @description  Settings module for Text Explainer
  6. // @author       RoCry
  7. // @license      MIT
  8. // ==/UserScript==
  9.  
  10. class TextExplainerSettings {
  11.   constructor(defaultConfig = {}) {
  12.     this.defaultConfig = Object.assign({
  13.       model: "gemini-2.0-flash",
  14.       apiKey: null,
  15.       baseUrl: "https://generativelanguage.googleapis.com",
  16.       provider: "gemini",
  17.       language: "Chinese" 
  18.     }, defaultConfig);
  19.     
  20.     this.config = this.load();
  21.   }
  22.   
  23.   /**
  24.    * Load settings from storage
  25.    */
  26.   load() {
  27.     try {
  28.       const savedConfig = typeof GM_getValue === 'function' 
  29.         ? GM_getValue('explainerConfig', {})
  30.         : JSON.parse(localStorage.getItem('explainerConfig') || '{}');
  31.       return Object.assign({}, this.defaultConfig, savedConfig);
  32.     } catch (e) {
  33.       console.error('Error loading settings:', e);
  34.       return Object.assign({}, this.defaultConfig);
  35.     }
  36.   }
  37.   
  38.   /**
  39.    * Save settings to storage
  40.    */
  41.   save() {
  42.     try {
  43.       if (typeof GM_setValue === 'function') {
  44.         GM_setValue('explainerConfig', this.config);
  45.       } else {
  46.         localStorage.setItem('explainerConfig', JSON.stringify(this.config));
  47.       }
  48.       return true;
  49.     } catch (e) {
  50.       console.error('Error saving settings:', e);
  51.       return false;
  52.     }
  53.   }
  54.   
  55.   /**
  56.    * Get setting value
  57.    */
  58.   get(key) {
  59.     return this.config[key];
  60.   }
  61.   
  62.   /**
  63.    * Set setting value
  64.    */
  65.   set(key, value) {
  66.     this.config[key] = value;
  67.     return this;
  68.   }
  69.   
  70.   /**
  71.    * Update multiple settings at once
  72.    */
  73.   update(settings) {
  74.     Object.assign(this.config, settings);
  75.     return this;
  76.   }
  77.   
  78.   /**
  79.    * Reset settings to defaults
  80.    */
  81.   reset() {
  82.     this.config = Object.assign({}, this.defaultConfig);
  83.     return this;
  84.   }
  85.   
  86.   /**
  87.    * Get all settings
  88.    */
  89.   getAll() {
  90.     return Object.assign({}, this.config);
  91.   }
  92.   
  93.   /**
  94.    * Open settings dialog
  95.    */
  96.   openDialog(onSave = null) {
  97.     // First check if dialog already exists and remove it
  98.     const existingDialog = document.getElementById('explainer-settings-dialog');
  99.     if (existingDialog) existingDialog.remove();
  100.     
  101.     // Create dialog container
  102.     const dialog = document.createElement('div');
  103.     dialog.id = 'explainer-settings-dialog';
  104.     dialog.style = `
  105.       position: fixed;
  106.       top: 50%;
  107.       left: 50%;
  108.       transform: translate(-50%, -50%);
  109.       background: white;
  110.       padding: 16px;
  111.       border-radius: 8px;
  112.       box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  113.       z-index: 10001;
  114.       width: 400px;
  115.       max-width: 90vw;
  116.       font-family: system-ui, sans-serif;
  117.     `;
  118.     
  119.     // Add dark mode support
  120.     const styleElement = document.createElement('style');
  121.     styleElement.textContent = `
  122.       #explainer-settings-dialog {
  123.         color: #333;
  124.       }
  125.       #explainer-settings-dialog label {
  126.         display: block;
  127.         margin: 12px 0 4px;
  128.         font-weight: 500;
  129.       }
  130.       #explainer-settings-dialog input[type="text"],
  131.       #explainer-settings-dialog select {
  132.         width: 100%;
  133.         padding: 8px;
  134.         border: 1px solid #ccc;
  135.         border-radius: 4px;
  136.         box-sizing: border-box;
  137.         font-size: 14px;
  138.       }
  139.       #explainer-settings-dialog .buttons {
  140.         display: flex;
  141.         justify-content: flex-end;
  142.         gap: 8px;
  143.         margin-top: 20px;
  144.       }
  145.       #explainer-settings-dialog button {
  146.         padding: 8px 12px;
  147.         border: none;
  148.         border-radius: 4px;
  149.         cursor: pointer;
  150.         font-size: 14px;
  151.       }
  152.       #explainer-settings-dialog button.primary {
  153.         background-color: #4285f4;
  154.         color: white;
  155.       }
  156.       #explainer-settings-dialog button.secondary {
  157.         background-color: #f1f1f1;
  158.         color: #333;
  159.       }
  160.       @media (prefers-color-scheme: dark) {
  161.         #explainer-settings-dialog {
  162.           background: #333;
  163.           color: #eee;
  164.         }
  165.         #explainer-settings-dialog input[type="text"],
  166.         #explainer-settings-dialog select {
  167.           background: #444;
  168.           color: #eee;
  169.           border-color: #555;
  170.         }
  171.         #explainer-settings-dialog button.secondary {
  172.           background-color: #555;
  173.           color: #eee;
  174.         }
  175.       }
  176.     `;
  177.     document.head.appendChild(styleElement);
  178.     
  179.     // Create dialog content
  180.     dialog.innerHTML = `
  181.       <h3 style="margin-top:0;">Text Explainer Settings</h3>
  182.       <div>
  183.         <label for="explainer-language">Language</label>
  184.         <select id="explainer-language">
  185.           <option value="Chinese" ${this.config.language === 'Chinese' ? 'selected' : ''}>Chinese</option>
  186.           <option value="English" ${this.config.language === 'English' ? 'selected' : ''}>English</option>
  187.           <option value="Japanese" ${this.config.language === 'Japanese' ? 'selected' : ''}>Japanese</option>
  188.         </select>
  189.       </div>
  190.       <div>
  191.         <label for="explainer-provider">Provider</label>
  192.         <select id="explainer-provider">
  193.           <option value="gemini" ${this.config.provider === 'gemini' ? 'selected' : ''}>Gemini</option>
  194.           <option value="openai" ${this.config.provider === 'openai' ? 'selected' : ''}>OpenAI</option>
  195.           <option value="anthropic" ${this.config.provider === 'anthropic' ? 'selected' : ''}>Anthropic</option>
  196.         </select>
  197.       </div>
  198.       <div>
  199.         <label for="explainer-model">Model</label>
  200.         <input id="explainer-model" type="text" value="${this.config.model}">
  201.       </div>
  202.       <div>
  203.         <label for="explainer-api-key">API Key</label>
  204.         <input id="explainer-api-key" type="text" value="${this.config.apiKey || ''}">
  205.       </div>
  206.       <div>
  207.         <label for="explainer-base-url">API Base URL</label>
  208.         <input id="explainer-base-url" type="text" value="${this.config.baseUrl}">
  209.       </div>
  210.       <div class="buttons">
  211.         <button id="explainer-settings-cancel" class="secondary">Cancel</button>
  212.         <button id="explainer-settings-save" class="primary">Save</button>
  213.       </div>
  214.     `;
  215.     
  216.     document.body.appendChild(dialog);
  217.     
  218.     // Add event listeners
  219.     document.getElementById('explainer-settings-save').addEventListener('click', () => {
  220.       // Update config with form values
  221.       this.update({
  222.         language: document.getElementById('explainer-language').value,
  223.         model: document.getElementById('explainer-model').value,
  224.         apiKey: document.getElementById('explainer-api-key').value,
  225.         baseUrl: document.getElementById('explainer-base-url').value,
  226.         provider: document.getElementById('explainer-provider').value
  227.       });
  228.       
  229.       // Save to storage
  230.       this.save();
  231.       
  232.       // Remove dialog
  233.       dialog.remove();
  234.       styleElement.remove();
  235.       
  236.       // Call save callback if provided
  237.       if (typeof onSave === 'function') {
  238.         onSave(this.config);
  239.       }
  240.     });
  241.     
  242.     document.getElementById('explainer-settings-cancel').addEventListener('click', () => {
  243.       dialog.remove();
  244.       styleElement.remove();
  245.     });
  246.     
  247.     // Focus first field
  248.     document.getElementById('explainer-language').focus();
  249.   }
  250. }
  251.  
  252. // Make available globally and as a module if needed
  253. window.TextExplainerSettings = TextExplainerSettings;
  254.  
  255. if (typeof module !== 'undefined') {
  256.   module.exports = TextExplainerSettings;
  257. }