Chrome扩展：如何在后台与内容脚本间共享带对象结构的设置脚本？

我在Chrome扩展中通过Options页配置settings对象，存储在chrome.storage.local中，编写了settings.js作为ES6模块，导出settings对象及loadSettings、saveSettings函数，选项页和后台脚本可以正常通过import使用。但内容脚本无法直接引用该模块（Chrome内容脚本不支持ES6模块，添加到manifest会报错），只能通过消息传递获取JSON格式的设置，没法像原脚本那样用settings.css.test的方式访问对象结构，请问怎么调整代码结构让内容脚本也能完整使用这个设置对象？

原settings.js代码 #

const DEFAULT_SETTINGS  = {
    css: {
        test:true
       }
    }

let settings = { ...DEFAULT_SETTINGS };

// 从chrome.storage.local加载设置
function loadSettings(callback) {
    chrome.storage.local.get('settings', (result) => {
        if (result.settings) {
            settings = JSON.parse(result.settings);
        }
        if (callback) callback(settings);
    });
}

// 将设置保存到chrome.storage.local
function saveSettings(callback) {
    chrome.storage.local.set({ settings: JSON.stringify(settings) }, () => {
        console.log('Settings saved:', settings);
        if (callback) callback();
    });
}

export { settings, loadSettings, saveSettings }; 

选项页引用方式 #

import { settings, loadSettings, saveSettings } from './settings.js';

后台脚本消息处理 #

import { settings, loadSettings, saveSettings } from './settings.js';

// 监听内容脚本的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    switch (request.action) {
    case "getSettings":
            sendResponse({ settings });
            break;
        case "saveSettings":
            settings = request.settings;
            saveSettings(() => sendResponse({ status: "success" }));
            break;
    }
    return true;
});

内容脚本当前获取设置的方式（仅能拿到JSON） #

chrome.runtime.sendMessage({ action: "getSettings" }, (response) => {
    const mysettings = response.settings;
    console.log(mysettings); // 只能通过mysettings.css.test访问，但没法像原模块那样直接用全局的settings对象
});

下面提供几种可行的调整方案，让内容脚本可以像原模块那样便捷访问设置结构：

方案1：在内容脚本中封装设置访问工具 #

在内容脚本里创建一个工具对象，模拟原settings.js的结构，通过消息获取设置后将其挂载到该对象上，同时封装加载、更新方法：

内容脚本中的工具代码 #

// 内容脚本内的设置工具
let contentSettings = {
    css: { test: false } // 初始化默认值，与DEFAULT_SETTINGS保持一致
};

// 从后台加载设置
function loadContentSettings(callback) {
    chrome.runtime.sendMessage({ action: "getSettings" }, (response) => {
        if (response?.settings) {
            // 深拷贝覆盖当前设置，保持对象引用稳定
            Object.assign(contentSettings, response.settings);
        }
        callback?.(contentSettings);
    });
}

// 更新设置并同步到后台
function saveContentSettings(newSettings, callback) {
    chrome.runtime.sendMessage({ action: "saveSettings", settings: newSettings }, (response) => {
        if (response?.status === "success") {
            Object.assign(contentSettings, newSettings);
        }
        callback?.(response?.status);
    });
}

// 初始化加载设置
loadContentSettings();

使用方式 #

之后在内容脚本里可直接用contentSettings.css.test访问，和原模块使用方式一致：

// 示例：访问设置项
console.log(contentSettings.css.test);

// 示例：修改并保存设置
contentSettings.css.test = false;
saveContentSettings(contentSettings, (status) => {
    console.log('保存状态:', status);
});

方案2：抽离核心逻辑为非模块文件，实现多环境兼容 #

把settings.js的核心逻辑（默认设置、加载、保存）抽成非ES6模块的文件，让内容脚本可以直接引用，同时保留ES6模块版本供选项页和后台使用：

步骤1：创建settings-core.js（非模块，挂载到全局） #

// settings-core.js：无模块导出，直接挂载到全局对象
window.SettingsCore = {
    DEFAULT_SETTINGS: {
        css: { test: true }
    },
    settings: { ...this.DEFAULT_SETTINGS },
    loadSettings(callback) {
        chrome.storage.local.get('settings', (result) => {
            if (result.settings) {
                this.settings = JSON.parse(result.settings);
            }
            callback?.(this.settings);
        });
    },
    saveSettings(callback) {
        chrome.storage.local.set({ settings: JSON.stringify(this.settings) }, () => {
            console.log('Settings saved:', this.settings);
            callback?.();
        });
    }
};

步骤2：修改原settings.js（ES6模块，复用核心逻辑） #

// settings.js：ES6模块，复用核心逻辑
import './settings-core.js';

const { settings, loadSettings, saveSettings, DEFAULT_SETTINGS } = window.SettingsCore;

export { settings, loadSettings, saveSettings, DEFAULT_SETTINGS };

步骤3：在manifest中配置内容脚本引用settings-core.js #

{
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["settings-core.js", "content-script.js"]
        }
    ]
}

使用方式 #

• 选项页和后台脚本：继续使用原import方式
• 内容脚本：直接通过全局对象访问，或解构到本地：

// 内容脚本中使用
const { settings, loadSettings, saveSettings } = window.SettingsCore;

// 加载设置
loadSettings(() => {
    console.log(settings.css.test);
});

// 修改并保存设置
settings.css.test = false;
saveSettings();

方案3：内容脚本直接读取chrome.storage.local（需权限） #

如果扩展已申请storage权限，可让内容脚本直接读取存储，无需通过后台消息传递：

步骤1：确保manifest中声明storage权限 #

{
    "permissions": ["storage"]
}

步骤2：内容脚本中直接加载设置 #

const DEFAULT_SETTINGS = { css: { test: true } };
let contentSettings = { ...DEFAULT_SETTINGS };

function loadContentSettings(callback) {
    chrome.storage.local.get('settings', (result) => {
        if (result.settings) {
            contentSettings = JSON.parse(result.settings);
        }
        callback?.(contentSettings);
    });
}

// 初始化加载设置
loadContentSettings();

// 使用示例
loadContentSettings(() => {
    console.log(contentSettings.css.test);
});

这种方式无需依赖后台消息，内容脚本可独立加载和使用设置，逻辑与原模块一致。

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