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

Question

我正在编写一个小型浏览器扩展，它将文本区域转换为 Ace 编辑器。我正在 SQL 模式下启动 Ace 编辑器。这需要Ace编辑器下载一些外部JS文件。

但它尝试从运行扩展的当前站点获取文件。

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

$("#soql_query_textarea").parent().append("<div id='editor'>SELECT id FROM Account;</div>");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/clouds");
editor.getSession().setMode("ace/mode/sql");

当它发送这样的请求时，我收到 404s -

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

如何让 Ace 从扩展程序的文件或 CDN 中获取文件？

Answer 1

我看到您正在使用 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");
});

<小时/>

为了灵 active ，使用以下函数可能是有意义的:

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);
    });
}

并这样调用它们:

changeAceTheme(editor, "clouds")
changeAceMode(editor, "sql")