在WebExtension中調用背景和內容腳本中的API密鑰

我有一個API密鑰和我的擴展需要的機密，我將它們存儲在自己格式化的文件中。在WebExtension中調用背景和內容腳本中的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);

有沒有辦法去嘗試做我在做什麼？

來源

2016-08-14 dpDesignz

請編輯您的問題，以包含**完整** [mcve]。在'background'鍵中定義的所有腳本[在相同的上下文中運行]（https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Specifying_background_scripts）。因此，* key.js *中定義的「APP_KEY」和「APP_SEC」可用於* background.js *中的代碼。 [續...] – Makyen

[續]：如果你只是在談論從那裏獲取信息到內容腳本，那麼你將不得不[把它作爲消息傳遞]（https://developer.mozilla.org/ en-US/Add-ons/WebExtensions/Content_scripts＃Communicating_with_background_scripts）或內容腳本如何啓動。具體取決於你的代碼。因此，我們需要一個[mcve]。 – Makyen

@makyen謝謝我試着添加一些更多的信息。有任何想法嗎？我看到你已經提到過內容腳本是如何啓動的？ – dpDesignz

這種工作方式您的願望。一個JavaScript文件可以用於後臺腳本和內容腳本，以共享相同的功能或變量。

在background鍵run in the same context中定義的所有腳本。因此，您的變量APP_KEY和APP_SEC（在key.js中定義）可用於background.js中的代碼。

在manifest.json文件的content_scripts密鑰中的單個js密鑰中定義的所有腳本共享一個上下文。這就是允許你在代碼中使用jQuery之類的東西。如果兩個集合中的matches關鍵結果都加載到特定頁面或選項卡上，我沒有檢查是否爲單獨的js列表創建了單獨的上下文。另外，我還沒有檢查過是否在加載內容腳本的方法和其他加載內容腳本的方法（例如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);

控制檯在加載擴展輸出：

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

我不知道爲什麼，這不適合你，你在工作時：在導航到mozilla.org

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

控制檯輸出最初嘗試過。你在評論中表示它現在正在爲你工作。

來源

2016-08-15 21:41:02 Makyen

再次感謝Makyen :-D – dpDesignz

在WebExtension中調用背景和內容腳本中的API密鑰

回答

相關問題