如何在 Chrome 扩展程序中的后台脚本和内容脚本之间共享通用脚本？

Question

所以我有一个设置对象，它是由我的扩展中的选项页面配置的。这会将数据存储在 chrome.storage.local 中。

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

let settings = { ...DEFAULT_SETTINGS };

// Function to load settings from chrome.storage.local
function loadSettings(callback) {
    chrome.storage.local.get('settings', (result) => {
        if (result.settings) {
            settings = JSON.parse(result.settings);
        }
        if (callback) callback(settings);
    });
}

// Function to save settings to chrome.storage.local
function saveSettings(callback) {
    chrome.storage.local.set({ settings: JSON.stringify(settings) }, () => {
        console.log('Settings saved:', settings);
        if (callback) callback();
    });
}

 // Expose the functions and settings object
export { settings, loadSettings, saveSettings }; 

选项页面具有以下行，以便可以使用设置：

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

这一切都很完美。

我的后台脚本加载设置，并且还引用了 settings.js 文件，并通过消息传递使它们可供内容脚本使用。

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

/ Listen for messages from content scripts
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;
});

这一切都很好。

当我尝试在内容脚本中使用 settings.js 时出现问题

在我的清单中添加参考：

"content_scripts": [
      {
        "matches": ["http://localhost:8000/*", "https://www.amazon.co.uk/vine/vine-items*"],
        "js": ["settings.js", "manicviner.js"],
        "run_at": "document_start"
      }
    ],

当我重新加载扩展时出现错误，因为它不喜欢在 settings.js 中导出。

删除引用确实允许我通过消息传递将设置传递到内容脚本中。

chrome.runtime.sendMessage({ action: "getSettings" }, (response) => {
    const mysettings = response.settings;
    console.log(mysettings); // Now you can use the settings

});

但是，返回的只是 JSON - 我无法使用设置对象本身，因为内容脚本不了解对象结构。

显然，ES6 模块不能在内容脚本中使用 - 这是问题的根源。 Sp 我如何构建我的代码，以便当我在内容脚本中使用设置时，我可以访问 settings.js 中定义的对象模型，例如设置.css.测试。

Answer 1

从代码的角度来看，一切看起来都是正确的。是的，您可以在内容脚本文件中使用 ES6 模块。检查在内容脚本中导入文件时是否忘记在末尾指定 .js，这不太可能，但有可能。例如，您使用：

import { someObject } from './file';
// You should have used
import { someObject } from './file.js';

关于结构，我使用一个文件作为内容脚本，在其中执行其他所有操作，包括导入。也许这个选项也适合您。 对我来说它看起来像这样：

// manifest.json
...
content_scripts: [
  {
    matches: [
      // url matches
    ],
    js: ['src/contentScript/index.js'],
  }
]

// content-script index.js
import { settings } from './settings.js';
// Your other logic

// background-script index.js
import { settings } from './settings.js';
// Your other logic