私は拡張機能を構築しており、適切に構造化された状態に保とうとしています。その一部では、何らかのタイプのテンプレート システム (Mustache、Handlebars など) を使用します。私が使用するライブラリの特定の非評価バージョンを使用する必要があることをすでに認識していることに注意してください。
問題は、app.js スクリプト (コア ロジック) 内から XHR で /templates 内のファイルの内容を読み込めないことです (以下を参照)。
load イベントは発生せず、onreadystatechange で調べると、ステータス コード 0 の状態 4 にすぐにジャンプします (状態 4 と状態 200 が必要です)。
ファイルのChrome URLを取得すると、たとえば
chrome.extension.getURL('templates/view1.html')
//chrome-extension://hdhpjlpbepobcdgnkklnakdpoojaahjg/templates/view1.html
manifest.json に正しく構成されていないものがあると思われます。私はCSPのドキュメントを読みましたが、拡張機能のローカルファイルへのアクセスを拒否する必要がある理由は何もわかりません。XHR リクエストはエラーをスローせず、データを返さないことに注意してください。
アプリの構造は次のようになります。
/manifest.json
/src
app.js
style.css
/libs
jquery.js
mustache.js
/templates
view1.html
view2.html
マニフェスト.json
{
"name": "Test Extension",
"version": "0.0.1",
"manifest_version": 2,
"icons": {
// "16": "",
// "48": ""
// "128": ""
},
// "default_locale": "en",
"permissions": [
"contentSettings",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": [
"https://www.google.com/search*"
],
"css": [
"src/style.css"
],
"js": [
"src/app.js",
"libs/jquery.js",
"libs/mustache.js"
],
"run_at": "document_start"
}
]
}