Firefox WebExtension에 JavaScript 소스 맵 파일을 포함시키는 방법은 무엇입니까?

Question

WebExtension 내에서 원본 맵이있는 라이브러리를 사용하려고하면이 오류가 발생합니다. 당신은 파일의 맨 끝에 주석을 삽입해야

MDN's How to - "Use a Source Map"에 따르면

Source map error: TypeError: NetworkError when attempting to fetch resource. 
Resource URL: moz-extension://090d55cc-e9cf-4627-9511-ce49ed5b54c8/source.js 
Source Map URL: source.map 

.

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map 

(보안을 위해 좋습니다, 속도와 예측 가용성을 원하는대로, 라이브러리는 자기 기록되고 있다면 어떤이 필요할 수 있습니다와 같은 외부 라이브러리의 로컬 복사본과 파이어 폭스 WebExtension에서 작업 할 때 CDN 네트워크에 대한 액세스 권한이 없거나 CDN 버전에 사용자 정의가 필요한 경우 등) 실패합니다.

// At the bottom of source.js 
//# sourceMappingURL=source.map 

모든 확장 URI의 라이브 어딘가에 브라우저 프로필에 명시 적으로 무작위로 WebExtension의 각 실행에 생성 된 UUID에 따라 적절한 절대 경로로 시작해야하기 때문에. 따라서 다음을 동적으로 지정해야합니다. 그 결과로 호출 인라인 또는 이전에 하나가 여기에 액세스 할 변수에 저장 - -이 의견이기 때문에, 의견

// At the bottom of source.js 
//# sourceMappingURL=moz-extension://090d55cc-e9cf-4627-9511-ce49ed5b54c8/source.map 

경로를 얻을 수있는 유일한 방법은 사용할 수 없습니다 수있는 browser.runtime.getURL()를 호출하여 런타임에있다 무시됩니다.

GENIUS 맵 파일을 지정하는 메커니즘. 아니!

이렇게 어떻게 달성 할 수 있습니까? 또는 작동하지 않는 것이 확인 될 수 있습니까? 다른 방법이 있습니까? 이 부분이 일부 W3C 규격 작업 그룹의 일부입니까? 이 문제가 논의되었거나 전혀 고려되지 않았습니까? 검색 중 관련 링크가 없습니다.

Answer 1

개발 중에 확장 ID를 수동으로 설정할 필요가없는 경우에도 임의의 내부 임시 UUID 만 사용하여 일부 저장소 API 메소드를 사용할 수 없으므로 그렇게하는 것이 좋습니다.

어쨌든 소스 맵 파일에 문제가있는 것으로 보입니다. webpack을 사용하는 경우이 간단한 구성이 작동해야합니다. 또한

Devtools debugging tab

output: { 
    sourceMapFilename: '[name].map.js', 
    filename: '[name].js', 
    path: path.resolve(__dirname, `your_output_dir`) 
}, 

devtool: 'cheap-module-source-map' 

webpack.config.dev.js

, 당신은 파이어 폭스 adrress 줄에 확장 내부 UUID를 붙여 넣을 경우, 당신은 소스지도로 확장 파일을 얻을 수 있습니다. 예 :

moz-extension://7c26e712-c8ac-41ef-b074-500f40601ab2/