[ChromeExtension] 홍익대 크롬 브라우저 확장 프로그램 만들기

개강하고 보니 학교 홈페이지가 리뉴얼 됐다.

리뉴얼 된 홈페이지가 개인적으로 불편하다고 느껴지는 부분이 있어서

내 맞춤형으로 구글 확장 프로그램을 만들어봤다.

 

불편하다고 느꼈던 점

1. 너무 진한 컬러감

컬러는 취향차이일 수 있으나 내가 느끼기엔 너무 밝고 쨍해서 눈이 아프다고 느껴졌다.

그래서 배경 컬러를 변경해보았다.

 

변경 전

 

변경 후

 

 

2. 메뉴 접근

이전에는 상단에 클래스넷 링크 버튼이 바로 있어서 접근하기 용이했는데

업데이트 되고 난 후에는 main > my hongik > 클래스넷으로 뎁스가 깊어졌다

그래서 내가 자주 사용하는 메뉴들만 몇개 뽑아서 하단에 고정시켰다. (이미지 속 빨간테두리)

 

 

메뉴에 hover 효과도 넣어줬다.

 

 

작업과정

https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ko

Hello World 확장 프로그램  |  Extensions  |  Chrome for Developers

 

상단 링크를 참고해서 만들었다.

 

루트 디렉토리에 mainfest.json 파일을 생성해주고

원하는 기능을 담은 js파일을 연결지어주면 끝이다.

생각보다 간단했다.

 

// manifest.json 파일

{
  "manifest_version": 3,
  "name": "Hongik Univ Homepage Extension",
  "description": "로그인, 메뉴 페이지 컬러 변경, 자주 찾는 메뉴 추가",
  "version": "1.0",

  "content_scripts": [
    {
      "js": ["scripts/changeColor.js"],
      "matches": ["https://www.hongik.ac.kr/*"]
    },
    {
      "js": ["scripts/menu.js"],
      "matches": ["https://www.hongik.ac.kr/kr/index.do"]
    }
  ],

  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

 

 

오랜만에 바닐라 자바스크립트로 만들어서 어색했다.

리액트 최고..

 

 

최종 완성본

https://github.com/aahreum/hongikChromeExtension

GitHub - aahreum/hongikChromeExtension