在后台调用API key，在WebExtension中调用内容脚本

Calling API Keys in background and content scripts in WebExtension

本文关键字：调用 脚本 后台 API key WebExtension      更新时间：2023-09-26

我有一个API密钥和我的扩展所需的秘密，我已经将它们存储在一个文件中，按照自己的格式，像这样。

key.js 

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

manifest.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>一样引用这个文件，它调用了2个变量，但我不知道如何引用它，所以我的背景和内容脚本也可以访问它们。

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

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

但这不起作用。我得到一个APP_KEY is not defined

main.js 

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

有什么方法可以尝试做我正在做的吗?

这是您希望的工作方式。一个JavaScript文件可以在后台脚本和内容脚本中使用，以共享相同的函数或变量。

在background键中定义的所有脚本都在相同的上下文中运行。因此，在key.js中定义的变量APP_KEY和APP_SEC可以在background.js中使用。

在清单中的单个js键中定义的所有脚本。json文件的content_scripts密钥共享一个上下文。这允许您在代码中使用jQuery之类的东西。我没有检查是否有一个单独的上下文创建单独的js列表，如果matches键结果在两个集合被加载到一个特定的页面，或选项卡。此外，我还没有检查是否在清单之间共享单个上下文。文件的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

我不知道为什么当你最初尝试它时，它没有为你工作。

相关文章：