2015-09-11 47 views
0

基本上,我有一個gmail chrome擴展,它將特定版本的jQuery注入主頁面(此工作正常),然後添加一些jQuery插件,以便稍後使用該擴展根據需要。多個jQuery版本在gmail chrome擴展中異步覆蓋

問題是,因爲所有的jQuery版本(據我所知)使用$來調用函數(和插件),如果另一個擴展進來並加載其版本的jQuery在我的頂部,然後我輸了我安裝的插件。有時候,我甚至看到另一個擴展使用的版本太舊,以致於我使用的一些「標準」jQuery函數不在其中,並且它們也是未定義的。

是否有任何簡單的方法將我的版本與可能在我的Gmail郵箱中播放的任何和所有其他擴展程序分開?我無法知道我的用戶可能要安裝哪些擴展程序,因此我不能僅以這種方式來解釋所有內容。現在有很多gmail chrome擴展,並且「玩得不錯」似乎是一個隨着時間的推移變得更加成問題的大問題。

任何想法如何「保護」我的jQuery版本和插件?

+1

你是如何注入到jQuery的標籤? content_scripts在不同的上下文中被沙箱化,所以不同的擴展代碼不能相互交互。 – abraham

+0

var q = document.createElement('script'); q.src = document.getElementById(「extensionPath」)。innerHTML +'js/jquery.js'; (document.head || document.documentElement).appendChild(q); – BryanP

+0

以上是從內容腳本中以相同方式注入的腳本內注入的。 – BryanP

回答

1

正如亞伯拉罕說在我原來的問題中的評論,這裏要做的正確的事情是將擴展JavaScript文件放在內容腳本中,以便它們處於「孤立的世界」,無法被其他擴展或頁面本身修改。你甚至可以用這種方式來包含幾個JS文件(在我的例子中,比如jQuery和angular以及幾個jquery插件),而不必將它們全部定義在單個文件中,並讓它們與頁面本身隔離。

只需要小心你在清單文件中定義它們的順序,因爲這正是chrome加載它們的順序(因爲有些可能是其他的依賴關係)。

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

參考這個的谷歌文檔:https://developer.chrome.com/extensions/content_scripts

0

您可以保存您的jQuery對象在特定的變量,並參考該變量在你的插件:

// load jQuery and any plugins here 
<script src="BryanPjQuery.js"></script> 
<script src="plugins.js"></script> 
<script> 
var BryanPjQuery = jQuery.noConflict(); 
(function($) { 
    $(function() { 

    // add all code here. $ refers to BryanPjQuery 
    // so within this function $ = jQuery, outside this function 
    // other versions of $ can be used 

    }); 
})(BryanPjQuery); 
</script> 

欲瞭解更多詳情,請參閱https://api.jquery.com/jquery.noconflict/或(舉出更多的例子)https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

+0

雖然我認爲這通常應該起作用,但我沒有提及我在與DOM交互的單獨注入的文件中使用angularJS。我不知道我可以用這種方式將所有的角碼包裝在這個變量中。這是否改變了事情? – BryanP

+0

嗯。我不知道。我只是做了一些測試,結果取決於插件。 – Reeno

+0

我一般認爲這是個好主意,值得探索。我需要圍繞它做一些特定的測試,看看我是否可以一起工作(我的應用中有很多事情正在進行)。感謝您的想法,因爲這可能最終成爲解決方案! – BryanP