카테고리 없음

법제처 검색 크롬 확장 프로그램 코드 정리

오래충분 2023. 11. 19. 10:28
반응형



### 크롬 확장 프로그램 개발 방법

**1. `manifest.json` 파일:**

```json
{
  "manifest_version": 2,
  "name": "Law Search Extension",
  "version": "1.0",
  "description": "Search law.go.kr",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "48": "icon.png"
  }
}
```

**2. `popup.html` 파일:**

```html
<!DOCTYPE html>
<html>
<head>
  <title>Law Search</title>
  <script src="popup.js"></script>
</head>
<body>
  <input type="text" id="searchText">
  <button id="searchButton">Search</button>
  <div id="results"></div>
</body>
</html>
```

**3. `popup.js` 파일:**

```javascript
document.getElementById('searchButton').addEventListener('click', function() {
  var searchText = document.getElementById('searchText').value;
  var searchUrl = 'https://www.law.go.kr/DRF/lawSearch.do?query=' + encodeURIComponent(searchText);
  
  chrome.tabs.create({url: searchUrl});
});
```

**4. 아이콘 파일 (`icon.png`):**
크롬 확장 프로그램의 아이콘 이미지 파일.

**확장 프로그램 테스트 및 설치:**

1. Chrome 브라우저에서 `chrome://extensions/`로 이동.
2. 개발자 모드 활성화.
3. '압축 해제된 확장 프로그램을 로드합니다' 버튼 클릭 후, 확장 프로그램 소스 코드 폴더 선택.

---

이 내용을 복사하여 이메일로 보내시면 됩니다.

반응형