Chrome擴展中的Ace編輯器從錯誤的位置獲取文件

我在寫一個小型瀏覽器擴展，它將textarea轉換爲Ace編輯器。我在SQL模式下啓動Ace編輯器。這需要Ace編輯器下載一些外部JS文件。Chrome擴展中的Ace編輯器從錯誤的位置獲取文件

但它會嘗試從當前運行擴展的站點獲取文件。

的manifest.json

... 
"content_scripts": [ 
    { 
     "matches": ["https://workbench.developerforce.com/query.php*"], 
     "css": [ 
     "styles/extension.css" 
     ], 
     "js": [ 
     "scripts/jquery.min.js", 
     "scripts/ace.js", 
     "pages/init.js" 
     ] 
    } 
] 
...

init.js

我得到404時，它發出這樣的請求 -

GET https://example.com/theme-clouds.js 
GET https://example.com/mode-sql.js

如何使王牌從擴展的f中獲取文件iles還是來自CDN？

來源

2017-02-26 JRodDynamite

嘗試在[web_accessible_resources]（https://developer.chrome.com/extensions/manifest/web_accessible_resources）中暴露主題路徑並使用[ace.config.set]（https://stackoverflow.com/a/18347807） – wOxxOm

@wOxxOm - 啊！這是我正在尋找的。發佈它作爲答案！ – JRodDynamite

我看到你使用jQuery，所以如何使用jQuery的.getScript()從cdn加載腳本並在加載成功後調用setTheme()。

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/theme-clouds.js", function(){ 
    editor.setTheme("ace/theme/clouds"); 
});

和setMode()：

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/mode-sql.js", function(){ 
    editor.getSession().setMode("ace/mode/sql"); 
});

它可能是有意義的使用以下功能靈活性：

function changeAceTheme(edtr, thm) { 
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/theme-" + thm + ".js", function() { 
     edtr.setTheme("ace/theme/" + thm); 
    }); 
} 

function changeAceMode(edtr, mde) { 
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/mode-" + mde + ".js", function() { 
     edtr.getSession().setMode("ace/mode/" + mde); 
    }); 
}

，並呼籲他們這樣的：

來源

2017-02-26 07:07:46

這是一種可行的方法。欣賞它！ – JRodDynamite

但是，如果我沒有錯，就必須有另一種解決方案。如果說我想擁有多個主題選項，導致此解決方案會有點複雜。 – JRodDynamite

我嘗試使用'setTheme（）'的cdn路徑，但它似乎強制相對路徑。所以這可能是我自從官方API說的唯一方法：「主題應該存在，並且是一個目錄路徑」我希望它們包含一個從cdn加載的標誌，但是目前我們必須在調用命令之前加載主題。 –

將文件夾添加到清單的web_accessible_resources部分，並使用腳本元素從中加載ace。

來源

2017-02-26 11:59:39

Chrome擴展中的Ace編輯器從錯誤的位置獲取文件

回答

相關問題