javascript - 在 WebExtension 的后台和内容脚本中调用 API key

Question

我的扩展程序需要一个 API key 和密码，我已将它们存储在一个文件中，其格式如下。

key.js

var APP_KEY = 'App Key Goes Here';
var APP_SEC = 'App Secret Goes Here';

list .json

// manifest.json
{
    "manifest_version": 2,
    "name": "Trakt for IMDb",
    "version": "0.1a",
    "background": {
        "scripts": [
                "js/key.js",
                "js/background.js"]
    },
    "content_scripts": [
        {
            "js": [
                "js/key.js",
                "js/main.js"
            ]
        }
    ]
}

在弹出页面上，我可以引用此文件，例如 <script type="text/javascript" src="../js/key.js"></script>它调用这两个变量，但我不知道如何引用它，以便我的背景和内容脚本也可以访问它们。

我尝试引用key.js文件在我的manifest.json文件如下

"background": {
    "scripts": [
        "js/key.js",
        "js/background.js"
    ]
}

但这行不通。我收到 APP_KEY is not defined

main.js

console.log('Content: ' + APP_KEY);

有什么办法可以尝试做我正在做的事情吗？

Answer 1

这会按照您想要的方式工作。单个 JavaScript 文件可以在后台脚本和内容脚本中使用，以共享相同的函数或变量。

background 中定义的所有脚本关键run in the same context 。因此，您的变量 APP_KEY和APP_SEC ，如 key.js 中定义，可用于 background.js 中的代码.

单个 js 中定义的所有脚本manifest.json 内的键文件的 content_scripts key 共享一个上下文。这使得您可以在代码中使用 jQuery 之类的东西。我还没有检查是否有为单独的 js 创建单独的上下文列出，如果 matches key 导致这两个集合都加载到特定页面或选项卡上。此外，我还没有检查 manifest.json 文件的 content_scripts 之间是否共享单个上下文。加载内容脚本的方法和其他加载内容脚本的方法(例如 tabs.executeScript‌​() )。

以下是一个完整的扩展，已在 Firefox 和 Google Chrome 中进行了测试。在这两种浏览器中， key.js 中定义的变量在后台和内容脚本中都可用。

manifest.json:

{
    "manifest_version": 2,
    "name": "Variables in other files",
    "description": "Test availability of variables from anther JavaScript file",
    "version": "0.1",
    "background": {
        "scripts": [
                "js/key.js",
                "js/background.js"]
    },
    "content_scripts": [
        {
            "matches": ["*://*.mozilla.org/*"],
            "js": [
                "js/key.js",
                "js/contentScript.js"
            ]
        }
    ]
}

js/key.js:

var APP_KEY = 'App Key Goes Here';
var APP_SEC = 'App Secret Goes Here';

js/background.js:

console.log('Background: ' + APP_KEY);
console.log('Background: ' + APP_SEC);

js/contentScript.js:

console.log('Content: ' + APP_KEY);
console.log('Content: ' + APP_SEC);

加载扩展时的控制台输出:

Background: App Key Goes Here
Background: App Secret Goes Here

导航到 mozilla.org 时的控制台输出:

Content: App Key Goes Here
Content: App Secret Goes Here

我不确定为什么当您最初尝试时这对您不起作用。您在评论中表示它现在对您有用。