크롬익스텐션으로 웹사이트에 엘레멘트 추가하기 [크롬익스텐션 개발]
Computer 관심2018. 5. 4. 10:50
반응형
내가 만든 웹사이트가 아닌 타인이 만든 웹사이트에 내가 만든 기능이나 화면을 넣을 수 있으면 재미있을 것 같았다. 그리고 좀 더 편리하게 인터넷을 사용 할 수 있을 것 같았다. 크롬에서 제공하는 익스텐션 덕분에 그것이 가능하다는 것을 알았다.
위의 스크린 샷은 구글에 크롬익스텐션을 이용해서 '안녕하세요~' 라고 적힌 div 엘레멘트를 추가 한 것이다.
어렵지 않으니 재미로 한번 해보자~
1. 폴더를 만든다.
2. 그 폴더에 크롬익스텐션에서 사용할 manifest.json 파일을 만든다.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"content_scripts":[
{
"matches": ["https://www.google.com/*"],
"js": ["contentScript.js"]
}
]
}
위를 보면 matches 라고 어떤 사이트에 스크립트를 적용할껀지 설정 할 수 있다.
그리고 js엔 적용할 스크립트의 경로를 적는다.
3. contentScript.js를 폴더에 만든다.
//Creating Elements
var divElement = document.createElement("div")
var t = document.createTextNode("안녕하세요~");
divElement.appendChild(t);
//Appending to DOM
console.log('hi')
document.body.appendChild(divElement);
4. chrome://extensions/
에 들어가서 upload unpacked 를 눌러서 파일들을 저장한 폴더를 업로드 하면 끝.
'Computer 관심' 카테고리의 다른 글
| DNS관리 (0) | 2022.10.28 |
|---|---|
| visual code에서 파일 확장자 마다 인덴테이션 다르게 주기 (0) | 2019.11.04 |
| 크롬 익스텐션에 vuejs 사용하기 (development of chrome extension with vuejs) (0) | 2018.05.04 |
댓글()
