Question

我正在编写一个小型浏览器扩展程序，它将textarea转换为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");

我发送404这样的请求 -

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

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

Answer 1

我看到你正在使用jQuery，那么如何使用jQuery＆＃39; s .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);
    });
}

并像这样打电话给他们：

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

Answer 2

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

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

2 个答案: