Chrome拡張機能のエースエディタが間違った場所からファイルを取得します

Question

私は、テキストエリアをAceエディタに変換する小さなブラウザエクステンションを作成しています。私はSQLモードでエースエディタを開始しています。これには、いくつかの外部JSファイルをAceエディタでダウンロードする必要があります。

しかし、拡張機能が実行されている現在のサイトからファイルを取得しようとします。

GET https://example.com/theme-clouds.js 
GET https://example.com/mode-sql.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" 
     ] 
    } 
] 
... 

それは、このような要求を送信したときに、私は404エラーを取得

init.js拡張子のfからファイルを取得するilesまたはCDNから？

Answer 1

jQueryを使用していますので、cdnからスクリプトを読み込み、読み込みが成功した後にsetTheme()を呼び出すために、jQueryの.getScript()を使用する方法を参照してください。

$.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セクションに追加し、スクリプト要素を使用してエースをロードします。