logo

9、界面优化与用户交互

作者
Modified on
Reading time
3 分钟阅读:..评论:..

在本章中，我们将讨论如何优化插件的用户界面，以及如何增强用户交互体验。我们将改进 Popup 界面，添加多语言支持，并实现用户设置选项。

改进 Popup 界面

首先，我们需要对 Popup 界面进行改进，使其更加美观和用户友好。我们将使用 HTML 和 CSS 来设计一个简洁、现代的界面。

创建改进后的 popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Translation and Dictionary Plugin</title>
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div id="popup-container">
      <h1>Translation Plugin</h1>
      <textarea
        id="text-to-translate"
        placeholder="Enter text here..."
      ></textarea>
      <button id="translate-button">Translate</button>
      <div id="translation-result"></div>
      <button id="settings-button">Settings</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

编写 popup.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 400px;
  overflow: hidden;
}

#popup-container {
  padding: 20px;
}

h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}

button:hover {
  background-color: #45a049;
}

#translation-result {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 10px;
}

添加多语言支持

为了让插件支持多语言，我们需要添加国际化（i18n）文件。首先，我们创建不同语言的消息文件，然后在 manifest.json 中声明支持的语言。

创建 locales/en/messages.json

{
  "appName": {
    "message": "Translation and Dictionary Plugin"
  },
  "translateButton": {
    "message": "Translate"
  },
  "settingsButton": {
    "message": "Settings"
  },
  "placeholderText": {
    "message": "Enter text here..."
  }
}

创建 locales/zh/messages.json

{
  "appName": {
    "message": "翻译和词典插件"
  },
  "translateButton": {
    "message": "翻译"
  },
  "settingsButton": {
    "message": "设置"
  },
  "placeholderText": {
    "message": "在此输入文本..."
  }
}

修改 manifest.json 以支持多语言

{
    "name": "__MSG_appName__",
    "default_locale": "en",
    ...
}

在 popup.html 中使用国际化消息

<h1 data-i18n="appName">Translation Plugin</h1>
<textarea
  id="text-to-translate"
  placeholder="__MSG_placeholderText__"
></textarea>
<button id="translate-button" data-i18n="translateButton">Translate</button>
<button id="settings-button" data-i18n="settingsButton">Settings</button>

在 popup.js 中加载国际化消息

document.addEventListener("DOMContentLoaded", function () {
  const elements = document.querySelectorAll("[data-i18n]");
  elements.forEach((el) => {
    const messageKey = el.getAttribute("data-i18n");
    el.textContent = chrome.i18n.getMessage(messageKey);
  });

  const textArea = document.getElementById("text-to-translate");
  textArea.placeholder = chrome.i18n.getMessage("placeholderText");
});

实现用户设置选项

为了提供更好的用户体验，我们可以添加用户设置选项，使用户能够根据自己的需求自定义插件的行为。

创建 settings.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Settings</title>
    <link rel="stylesheet" href="settings.css" />
  </head>
  <body>
    <div id="settings-container">
      <h1>Settings</h1>
      <label for="language-select">Choose language:</label>
      <select id="language-select">
        <option value="en">English</option>
        <option value="zh">中文</option>
      </select>
      <button id="save-settings-button">Save Settings</button>
    </div>
    <script src="settings.js"></script>
  </body>
</html>

编写 settings.js

document.addEventListener("DOMContentLoaded", function () {
  const languageSelect = document.getElementById("language-select");
  const saveButton = document.getElementById("save-settings-button");

  // 加载保存的设置
  chrome.storage.sync.get(["language"], function (result) {
    if (result.language) {
      languageSelect.value = result.language;
    }
  });

  // 保存设置
  saveButton.addEventListener("click", function () {
    const selectedLanguage = languageSelect.value;
    chrome.storage.sync.set({ language: selectedLanguage }, function () {
      alert("Settings saved!");
    });
  });
});

通过以上的步骤，我们已经大大改进了插件的用户界面，并添加了多语言支持和用户设置选项。这些改进不仅提升了插件的美观度和易用性，也为用户提供了更多的自定义选项。

< 8、数据存储与同步
10、性能优化 >