2019. 10. 17. 21:13ㆍJavaScript
◆ 크롬 확장프로그램(Chrome Extension)은 HTML, JavaScript, CSS를 기반으로 만들어진 프로그램이다. 사용자는 크롬 익스텐션을 활용해 개인의 선호, 목적에 맞게 크롬 기능을 사용할 수 있다.
Extensions are event based programs used to modify or enhance the Chrome browsing experience.They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.
크롬의 interaction에 override하여 새로운 기능을 만들어내는 툴이라고 보면 될 것 같다.
◆ 크롬 익스텐션 준비물:
1. .json : 내가 크롬에게 알려줄 내용. 어떤 사이트에서, 어떤 부분을 만질 것이고, 어떤 로직을 쓸 것인지 기술하는 파일.
{
“version”: 1.0:, // This is your regular project version number
“manifest_version”: 2, // Just use 2, it's the stable version you want
“name”: “Wordsmith”, // The name of your extension!
“description”: “New tab? New word!”, // The description of your extension!
“author”: “Natalie Schoch and Lindsay Grizzard”, // Who you are
“chrome_url_overrides” : { // 크롬아, 니가 평소에 열던 창 말고 내가 만든 이 창을 열어라
“newtab”: “newtab.html”
}
}상기 내용은 .json에 들어갈 가장 기본 뼈대가 된다. 그 외에 .json에 들어갈 수 있는 내용은 아주 많다. 그중에서 상기 내용은 필수사항이다.
크롬에게 newtab.html을 열라고 지시했기 때문에, 해당 .html을 만든다.
2. .html
<!DOCTYPE HTML>
<html>
<body>
<h1> 자유롭게 코딩~~ </h1><br>
<script>도 쓰고~~ </script>
</body>
</html>
3. .js
사용할 .js도 만든다.
그 외에 필요한 파일이 있으면 알아서 만들면 된다.
참고자료:
https://css-tricks.com/control-the-internet-with-chrome-extensions/
'JavaScript' 카테고리의 다른 글
| 자바스크립트 getElementBy.., querySelector 차이 (0) | 2019.10.24 |
|---|---|
| jquery.min.js 다운 받는 법 (0) | 2019.10.24 |
| 자바스크립트 비동기 처리 활용 예 (0) | 2019.10.16 |
| 자바스크립트 함수 파라미터 초기값 설정하기 (0) | 2019.10.13 |
| 자바스크립트 Truthy, Falsy (0) | 2019.10.13 |