Storage Location for Unpacked Extensions

Extension engine does not explicitly change their location or add a reference to its local paths, they are left in the place where there are selected from in all Operating Systems.

Ex: If i load a unpacked Extension from E:\Chrome Extension the unpacked Extension is still in the same location

Storage Location for Packed Extensions

Navigate to chrome://version/ and look for Profile Path, it is your default directory and Extensions Folder is where all the extensions\app\themes are stored

Ex:

Windows

If my Profile Path is C:\Users\<Your_User_Name>\AppData\Local\Google\Chrome\User Data\Default them my storage directory is

C:\Users\<Your_User_Name>\AppData\Local\Google\Chrome\User Data\Default\Extensions

Linux

Chrome extensions are stored in: ~/.config/google-chrome/Default/Extensions/

Chromium

Chrome extensions are stored in ~/.config/chromium/Default/Extensions


출처 : http://stackoverflow.com/a/14544700

크롬 확장프로그램 개발 시, 특정 이벤트가 발생하면 새로운 크롬 탭을 띄우고, 지정한 URL로 이동하고 싶을 때가 있다. 다음과 같이 작성해보자.


1. manifest.json 파일의 퍼미션에 "tabs" 퍼미션 추가


{
  "name": "My extension",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}



2. 호출하려는 자바스크립트 이벤트에서 다음과 같은 코드 입력한다.



chrome.tabs.create({url: "http://www.naver.com"});

크롬 확장프로그램을 개발할 때, 구글 드라이브를 연동해야 할 필요가 있을 것이다.


https://developers.google.com/drive/quickstart-js 에 나온 예제를 따라하면 인증 문제에 걸리기 때문에 정상적인 실행을 할 수 없다.


아래 설명대로 예제 프로그램을 진행해보자.


1. https://code.google.com/apis/console/ 에 방문해, 프로젝트를 생성한다.






2. 왼쪽 목차 중 Services메뉴의 하위 선택 메뉴 중에 Drive API 항목을 On으로 바꿔준다.


※ 주의사항 : 구글에서는 Drive API의 requests를 일정 수로 제한하고 있다. 많은 트레픽이 발생하는 프로그램을 제작시엔 적합하지 않다.





두번의 동의 체크를 하면 Drive API 부분이 다음과 같이 바뀔 것이다.




3. 왼쪽 목차 중 API Access 메뉴에 들어가 OAuth 2.0 client ID를 생성한다.



이메일 주소는 가렸습니다.. ^^;;


Product logo 및 Home Page URL은 입력하지 않아도 무방합니다.





4. Application type을 Installed application으로 선택한다.(이 부분이 구글에서 제공하는 예제와 다른 부분이다.)


Installed application type은 Chrome Application으로 선택한다.




구글 드라이브를 사용하려는 크롬 확장프로그램의 ID를 복사해서 입력하고, ID를 생성한다.



5. 다음과 같이 Client ID 화면이 생성된 것을 알 수 있다. 이 때, Client ID는 나중에 사용할 것이니 기억해 놓자.





6. https://developers.google.com/drive/quickstart-js 에 들어가서 중간에 있는 quickstart.html 코드를 복사하고, 크롬 확장프로그램이 존재하는 폴더에 저장하자.



이 때, Javascript 부분은 분리해서 따로 quickstart.js 파일을 만들고, quickstart.js 파일을 참조해서 해당 스크립트를 사용해야 한다. 그 이유는 크롬 확장프로그램은 보안상 문제로 Inline Script을 허용하지 않는다.




그리고 quickstart.js 파일의 CLIENT_ID 부분을 4.항목에서 나온 Client ID로 복사해서 대치한다.




7. 크롬 확장프로그램 제작에 사용되는 manhifest.json 파일을 열어 다음과 같은 구문을 추가한다.


"content_security_policy": "script-src https: 'self'; object-src 'self'"




8. 확장프로그램을 새로고침하고, 다시 quickstart.html 파일을 호출한다.

이제 Authorize 버튼을 클릭해보자.


다음과 같이 접근 권한을 물어볼 것이다.



접근 허락을 하면, 페이지가 연결중이라고 하고 가만히 있을 건데, 그냥 끄자.


나중에 개발 시에 저 창을 끄도록 하는 코드를 삽입해야 할 것이다.



9. quickstart.html 파일을 다시 호출하면 파일 선택 버튼이 나올 것이다.




그래프.hwp 파일을 선택하고 조금 기다리면, 구글 드라이브에 이 파일이 올라간 것을 확인할 수 있다.









크롬 확장프로그램은 기본적(Default)으로 Local 스크립트 파일만 접근을 허용하고 있다.


그런데 크롬 확장프로그램을 개발하다보면 Local에 있는 스크립트 말고 인터넷에 존재하는 외부 스크립트에 접근해야 할 필요가 있다.


구글에선 보안상의 문제로 외부 스크립트 및 오브젝트 접근을 막고 있다. (man-in-the-middle attacks)




따라서, 외부 스크립트에 접근하기 위해선 두가지 다른 방법을 써야 한다.


1. 외부 스크립트 파일 직접 다운


다음 html 코드는 외부 스크립트를 접근하고 있다.


<!doctype html>
<html>
  <head>
    <title>My Awesome Popup!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </head>
  <body>
    <button>Click for awesomeness!</button>
  </body>
</html>


해당 주소에 가서 스크립트 파일을 복사하고 크롬 확장프로그램 개발 폴더에 저장한 다음, 코드를 아래처럼 바꾼다.


<!doctype html>
<html>
  <head>
    <title>My Awesome Popup!</title>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <button>Click for awesomeness!</button>
  </body>
</html>


2. 퍼미션 설정


외부 스크립트를 꼭 접근해야 한다면, 다음과 같이 크롬 확장프로그램 메니페스트 파일에 설정을 추가한다.


example.com 주소에 접근하려는 스크립트 파일이 저장된 곳이다.


접근하려는 스크립트마다 URL을 일일이 입력해야된다는 번거러움이 있다.


"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"



다음과 같이 설정할 경우, 모든 사이트의 스크립트 접근을 허용하지만, 보안은 보장할 수 없다.


"content_security_policy": "script-src 'self' https://; object-src 'self'"





출처 : developer.chrome.com


+ Recent posts