Chrome擴展js：在background.js和popup.js之間共享功能

假設我有一個JavaScript函數foo()，我想在後臺和popup.html中執行該函數。Chrome擴展js：在background.js和popup.js之間共享功能

例如：它是執行我的Chrome擴展的背景每隔一小時，但也可以通過點擊一個按鈕的彈出菜單（popup.html）的用戶激活。

我現在有一個global.js腳本定義foo()，當我包括我的popup.js文檔中調用foo()，他們執行沒有問題。（如果我包括popup.html兩個腳本）

然而，當我嘗試訪問foo()內background.js，來電不執行（即使global.js包含在「背景」「的manifest.json」延期文件：

"background": { 
    "persistent": true, 
    "scripts": ["background.js", "global.js"] 
},

是否有共享background.js和popup.js之間的職能（不復制整個函數到每）一個便捷的方式？

來源

2014-03-29 user244718

背景腳本加載在清單文件中指定的順序，只需LOA d你的背景腳本之前與通用代碼的文件如下：

"background": { 
    "persistent": true, 
    "scripts": ["global.js", "background.js"] 
},

而不是複製代碼在彈出窗口中，您還可以使用chrome.extension.getBackgroundPage()從彈出式訪問功能/的background page的變量，例如chrome.extension.getBackgroundPage().myFunction();。

來源

2014-03-30 08:34:31

大，整個的原因我一直在尋找的解決方案是改善乾燥。你的第二個提示更有幫助！謝謝 – kas

除了添加腳本爲您manifest.json的background節的一部分，你必須通過chrome.runtime.getBackgroundPage(callback) API（這是目前preferred to chrome.extension.getBackgroundPage()）來訪問這些腳本的內容。

例如，在popup.js或其他地方在您的擴展：

chrome.runtime.getBackgroundPage(function(backgroundPageWindow) { 
    // Do stuff here that requires access to the background page. 
    // E.g. to access the function 'myFunction()' 
    console.log("Calling myFunction() " + backgroundPageWindow.myFunction()); 
});

有關詳細信息，請參閱getBackgroundPage documentation和event pages docs（這解釋chrome.extension.getBackgroundPage()已過時）。

來源

2016-11-28 00:22:50

您也可以從其他腳本調用函數，就像直接導入它們一樣。您可以通過使用構造函數和自定義原型來完成此操作。

首先添加背景腳本的mainfest，在訪問的順序，以及關閉body標籤之前我們popup.html鏈接爲腳本：

manifest.json的

... 
"background": { 
"persistent": false, 
"scripts": [ 
    "foo.js", 
    "bg.js" 
]}, 
...

在文件foo.js中我們創建了我們的對象原型。我使用的是模塊的模式，因爲我們希望它是私有的，否則：

foo.js

(() => { 
    console.log('foo loaded');  // check that the script has loaded 
    window.test = window.test || {}; // check for or create the object 

    test.FooFunc = function() {  // setup a constructor to hold defaults 
    this.foo = 'bar', 
    this.time = '15000' 
    } 

    test.FooFunc.prototype = {  // add our prototype with a single method 
    callConsole: (text) => { 
     console.log('FooFunc method loaded from ' + text); 
    } 
    } 
})();

從BG。js文件，我們可以通過實例化一個新的測試對象不斷地調用這個函數。

bg.js

(() => { 
    console.log('bg loaded');   // check that the script has loaded 
    var testProto = new test.FooFunc; // instantiate new test object 

    testProto.callConsole('Background!'); 
})();

的圖標點擊彈出窗口打開時，腳本火災，包括我們的功能加載文件，並儘快之後。您應該看到在您的控制檯是這樣的：

foo loaded 
bg loaded 
FooFunc method loaded from Background!

使用多個後臺腳本

當然我們可以繼續通過簡單地將它們添加到背景腳本列表中添加更多的腳本到組合，以及bg.js之前的popup.html *，按您希望它們被訪問的順序**。添加完畢後，在相同的莊園從新腳本做出新的原型的測試對象，然後添加方法給每個（test.Prefs是很大的，使）。

*腳本被加載以便它們被調用，所以如果在想要訪問它的腳本之前未創建原型，它將無法找到新的原型。任何腳本只要在這些腳本被調用之前創建，就可以訪問這些原型。

有關用例場景的一個很好的示例，可以查看Chrome's Buildbot Monitor。它不僅顯示了一個私人處理多個腳本的好過程，而且還顯示瞭如何使用單個對象來保存擴展訪問的多個設置，原型和方法。

來源

2016-12-02 19:42:25 DBrown

Chrome擴展js：在background.js和popup.js之間共享功能

回答

相關問題