docs: extension readme 파일 수정

extension/README.md

@@ -28,6 +28,11 @@
 
 ## Chrome API
 
+```JSON
+"permissions": ["webRequest", "storage"],
+"host_permissions": ["https://www.acmicpc.net/submit/*", "https://api.baekjoonrooms.com/*"],
+```
+
 ### webRequest API
 
 > chrome.webRequest API를 사용하여 트래픽을 관찰 및 분석하고 in-flight 요청을 가로채거나 차단하거나 수정할 수 있습니다.
@@ -40,6 +45,32 @@
 > Storage API는 사용자 데이터와 상태를 유지하는 확장 프로그램별 방법을 제공합니다.  
 > 이는 웹 플랫폼의 스토리지 API (IndexedDB 및 Storage)와 유사하지만 확장 프로그램의 스토리지 요구사항을 충족하도록 설계되었습니다.
 
-- background 파일에서 관리하는 전연 변수를 저장해 두기 위해 사용
+- background 파일에서 관리하는 전역 변수를 저장해 두기 위해 사용
 - backgorund 파일을 실행시키는 서비스 워커는 시간이 지나면 비활성화가 되기 때문에  
   전역 변수를 저장해 두지 않으면 변수가 초기화 되는 현상을 해결하기 위해 사용
+
+```javascript
+// http 응답헤더의 정보를 얻기 위해 webRequest API 사용
+chrome.webRequest.onHeadersReceived.addListener(
+  async function (details) {
+    // stroage API를 이용해 저장한 전역 변수 isActive와 userInfo를 불러옴
+    const { isActive } = await chrome.storage.local.get(['isActive']);
+    const { userInfo } = await chrome.storage.local.get(['userInfo']);
+    // 응답헤더에서 필요한 정보를 추출 후 서버에 전송
+    if (isActive && userInfo && userInfo.provider) {
+      if (details.method === 'POST') {
+        const submitURL = details.responseHeaders.filter((item) => item.name === 'location')[0].value;
+        fetch(`${BASE_URL}/submission`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ submitURL, provider: userInfo.provider, providerId: userInfo.providerId }),
+        });
+      }
+    }
+  },
+  { urls: ['https://www.acmicpc.net/submit/*'] },
+  ['responseHeaders'],
+);
+```