在WebExtension中的后台脚本和内容脚本中调用API密钥 [英] Calling API Keys in background and content scripts in WebExtension

问题描述

我具有扩展程序所需的API密钥和机密，并且已将它们以自己的格式存储在文件中.

I have an API key and secret required for my extension and I've stored them in a file on their own formatted like so.

key.js

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

manifest.json

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个变量，但是我无法弄清楚如何引用它，因此我的背景和内容脚本也可以访问它们.

On the popup pages I can just reference this file like <script type="text/javascript" src="../js/key.js"></script> and it calls the 2 variables, but I can't work out how to reference it so my background and content scripts can also access them.

我尝试按如下方式引用我的manifest.json文件中的key.js文件

I've tried referencing the key.js file in my manifest.json file as follows

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

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

But that doesn't work. I'm getting an APP_KEY is not defined

main.js

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

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

Is there any way to try do what I'm doing?

推荐答案

这可以满足您的需求.单个JavaScript文件可在后台脚本和内容脚本中使用，以共享相同的函数或变量.

This works the way you desire. A single JavaScript file can be used in both background scripts and content scripts to share identical functions or variables.

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

All the scripts defined in the background key run in the same context. Thus, your variables APP_KEY and APP_SEC, as defined in key.js, are available to your code in background.js.

在单个 js 键位于 manifest.json 文件的 content_scripts 键共享一个上下文.这就是让您在代码中使用jQuery之类的东西的原因.我没有检查是否为单独的js列表创建了单独的上下文，如果matches键导致两个集合都加载到特定的页面或选项卡上.此外，我还没有检查过 manifest.json 文件的content_scripts加载内容脚本的方法和其他加载内容脚本的方法(例如

All the scripts defined in a single js key within a manifest.json file's content_scripts key share a single context. This is what allows you to use things like jQuery with your code. I have not checked to see if there is a separate context created for separate js lists, if the matches key results in both sets being loaded on a particular page, or tab. In addition, I have not checked to see if a single context is shared between the manifest.json file's content_scripts method of loading content scripts and other methods of loading content scripts (e.g. tabs.executeScript‌​()).

以下是在Firefox和Google Chrome中都经过测试的完整扩展.在这两种浏览器中，key.js中定义的变量在后台脚本和内容脚本中均可用.

The following is a complete extension that has been tested in both Firefox and Google Chrome. In both browsers, the variables defined in key.js are available in both the background and content scripts.

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);

在加载扩展程序时控制台输出:

Console output upon loading extension:

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

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

Console output upon navigating to mozilla.org:

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

我不确定为什么当您初次尝试时这对您不起作用.您已在评论中说它现在对您有用.

I am not sure why this did not work for you when you initially tried it. You have stated in a comment that it is working for you now.

这篇关于在WebExtension中的后台脚本和内容脚本中调用API密钥的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！