在半离线Chrome App中创建设置页面：搜索引擎持久化配置问题

作为刚接触Chrome App二次开发的新手，你遇到的核心问题就是没把修改后的搜索引擎设置存到持久化存储里——内存里的变量重启就清零了，自然会回到默认值。咱们用Chrome官方提供的chrome.storage API就能搞定，具体步骤如下：

第一步：给你的App加存储权限 #

首先得在manifest.json里声明storage权限，不然调用存储API会直接报错。打开你的manifest.json，在permissions数组里加上这一项：

{
  "manifest_version": 2, // Chrome App用的是manifest v2，注意别写错
  "name": "你的App名称",
  "version": "1.0",
  "permissions": [
    "storage",
    // 保留你原来的其他权限，比如"tabs"之类的
  ],
  // 其他原有配置...
}

第二步：保存用户选择的搜索引擎 #

当用户切换搜索引擎时，别只改内存里的searchEngine变量，要把选择的值存到chrome.storage.local里。比如写个保存函数：

// 传入用户选择的引擎标识，比如"google"、"bing"
function saveSearchEngine(engine) {
  chrome.storage.local.set({ preferredSearchEngine: engine }, () => {
    if (chrome.runtime.lastError) {
      console.error("保存设置失败：", chrome.runtime.lastError);
    } else {
      console.log("搜索引擎设置已保存");
      // 这里可以同步更新内存里的searchEngine变量
      searchEngine = engine;
    }
  });
}

用户点选搜索引擎选项时，调用这个函数就行。

第三步：App启动时加载保存的设置 #

在App初始化的地方（比如主页面的DOMContentLoaded事件，或者background脚本的启动逻辑里），读取之前存的设置，把它赋值给全局的searchEngine变量：

function loadSavedSearchEngine() {
  chrome.storage.local.get("preferredSearchEngine", (result) => {
    // 如果有保存的值就用它，没有就用默认的DuckDuckGo
    const savedEngine = result.preferredSearchEngine || "duckduckgo";
    // 更新全局变量
    searchEngine = savedEngine;
    // 这里可以调用初始化搜索逻辑的函数，确保设置生效
    initSearchFunctionality(savedEngine);
  });
}

// App启动时触发加载
document.addEventListener("DOMContentLoaded", loadSavedSearchEngine);

第四步：修改你的搜索逻辑 #

原来的switch逻辑不用大改，只要确保用的是加载后的searchEngine变量就行：

function getSearchUrl(query) {
  switch(searchEngine){
    case "google":
      return `https://www.google.com/search?q=${encodeURIComponent(query)}`;
    case "bing":
      return `https://www.bing.com/search?q=${encodeURIComponent(query)}`;
    default:
      // 默认返回DuckDuckGo
      return `https://duckduckgo.com/?q=${encodeURIComponent(query)}`;
  }
}

额外小提示 #

• 如果想让用户的设置在多设备同步（比如登录Chrome账号后），可以把chrome.storage.local换成chrome.storage.sync，用法完全一样，数据会同步到用户的Chrome账户里。
• 记得处理存储API的错误，比如上面代码里的chrome.runtime.lastError，避免出问题找不到原因。

这样改完之后，用户选的搜索引擎就会存在Chrome的本地存储里，重启App时会自动加载，再也不会回到默认值啦！

内容的提问来源于stack exchange，提问作者Aquamarine