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？

尝试在[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); 
    }); 
}

，并呼吁他们这样的：

这是一种可行的方法。欣赏它！ – JRodDynamite

但是，如果我没有错，就必须有另一种解决方案。如果说我想拥有多个主题选项，导致此解决方案会有点复杂。 – JRodDynamite

我尝试使用'setTheme（）'的cdn路径，但它似乎强制相对路径。所以这可能是我自从官方API说的唯一方法：“主题应该存在，并且是一个目录路径”我希望它们包含一个从cdn加载的标志，但是目前我们必须在调用命令之前加载主题。 –

答

将文件夹添加到清单的web_accessible_resources部分，并使用脚本元素从中加载ace。

Chrome扩展中的Ace编辑器从错误的位置获取文件

相关推荐