ChromeExtension을 잠깐 개발하게 되었다. ChromeExtension은 기본적으로 HTML/CSS/JS로 개발하는데 내가 쓰고 있는 스택을 한번 적용해보았다.

Stack

• Angular with TypeScript
• Sass
• Webpack2

Folder Structure

.compiled    // aot 때문에 생성되는 폴더
node_modules // npm 으로 생성되는 폴더
output       // build 결과물 폴더
src          // 개발 코드
webpack      // 웹팩 관련 코드

Development

npm run start

• apply hot module reload

Build

npm run build

• apply aot

Deploy

package.json

"scripts": {
...
"zip": "zip -r dist/${npm_package_name}-${npm_package_version}.zip output",
...
}

https://chrome.google.com/webstore/developer/update

Issue

angular csp

inline style태그나 angular 내부적으로 eval을 사용하는 코드가 있어서 오류가 발생한다.

manifest.json에 content_security_policy 옵션을 추가해서 해결한다.
https://content-security-policy.com/ https://developer.chrome.com/extensions/contentSecurityPolicy

manifest.json

...
"content_security_policy": "script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; object-src 'self'",
...

Resource

https://developer.chrome.com/extensions