FLYNNLABAboutMeCodingActivityStudy 2024초등수학
ChromeExtension with Angular
2017-03-27
webpack, chrome-extension, angular

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