加載requireJS和Backbone的多個實例

我正在創建一個谷歌瀏覽器擴展，當它在選項卡上激活時，會將一些自定義代碼和一些新視圖加載到該窗口的文檔中。我想使用requireJS來加載這些由擴展調用的代碼的新模塊。然而，我擔心如果這個擴展名被調用的應用/網站已經在運行requireJS，那麼可能會發生衝突或名稱衝突，而我從頭開始調用它會清除本地的require.config站點或者導致一些未知的惡作劇。這會導致該站點每次在我的分機上激活時都會中斷。加載requireJS和Backbone的多個實例

那麼有沒有辦法將requireJS和backboneJS的全新和「獨立」實例加載到可能已經有自己的實例運行的站點上？如果沒有，是否有辦法調整我的需求並配置目標應用程序的配置？

編輯W /更多詳細信息：好吧，我的擴展的更多細節：我在頁面上創建一個iFrame，它具有完全獨特的文檔空間。但我仍然需要iFrame注意原始文檔中發生的某些事情（例如：當用戶單擊該文檔中的某個div時，我希望將該事件傳遞給iFrame）。爲此，我將各種對象通過原始文檔的內容腳本，直到擴展名，回到iframe的內容腳本，然後最終（使用window.onMessage）傳遞到iFrame的javascript環境。我開發的過程與here描述的過程大致相似。是的，這讓我頭痛。

無論如何，所有這一切就是我在iframe，擴展和原始源文檔中進行了大量代碼。所以，我希望在每個上下文中都有一個require實例。

來源

2013-10-03 AlexZ

內容腳本run in a context that is isolated from the page's context。即如果頁面聲明全局變量Backbone，則您的內容腳本無法直接讀取或訪問它。

將下面的代碼（剛剛寫入）放入您的Chrome擴展中（放在require.js之後），您可以在內容腳本中使用RequireJS。

require.load = function(context, moduleName, url) { 
    url = chrome.extension.getURL(url); 
    var x = new XMLHttpRequest(); 
    // Append Math.random()... to bust the cache 
    x.open('GET', url + '?' + Math.random().toString(36).slice(-4)); 
    x.onload = function() { 
     var code = x.responseText; 
     x += '\n//@ sourceURL=' + url; // Optional, for debugging. 
     window.eval(code); 
     context.completeLoad(moduleName); 
    }; 
    x.onerror = function() { 
     // Log error if you wish. This is usually not needed, because 
     // Chrome's developer tools does already log "404 Not found" 
     // errors for scripts to the console. 
    }; 
    x.send(); 
};

在開發過程中，此方法非常理想，因爲行號將與您的代碼中的行匹配。

在生產中，我建議使用r.js連接（並縮小）您的代碼，因爲輸出將是一個大的JavaScript文件。 Chrome擴展程序中的資源通常會在幾毫秒內加載，但如果您擁有相當多的模塊，則這些毫秒會加起來顯着。每個請求都可以在給定選項卡的開發人員工具的「網絡」選項卡中看到，這對於使用您的擴展程序的網絡開發人員來說只是一種噪音和不良副作用。

來源

2013-10-03 09:06:28

嗯，但是如何在內容腳本中加載require.js？據我所知，需要從HTML文件加載，對吧？我擔心的另一件事是膨脹的內容腳本。由於內容腳本在每次加載頁面時都會運行，因此可能會減慢用戶的瀏覽體驗。 – AlexZ

對不起，我正在試圖圍繞這個問題來解決這個問題，這讓我更加困惑。因此，您在擴展後臺頁面中創建實例或requireJS，然後通過傳遞給內容腳本的消息傳送該實例？要麼...？ – AlexZ

@AlexZ RequireJS通常通過'

相關問題

加載requireJS和Backbone的多個實例

回答

相關問題