크롬 확장 프로그램 만들기~초기초편~
소개
모두가 평소 Chrome 확장 프로그램을 사용하고 있습니까?
동영상을 다운로드하거나 디자인을 변경하거나 빌어 먹을 앱을 만들 수 있습니다.
꽤 재미있는 Google 크롬의 기능입니다.
사실 Chrome 확장 기능은 단순한 것이라면 굉장히 쉽게 만들 수 있습니다.
그래서 이번에는 Chrome 확장 프로그램을 깔끔하게 만들고 싶은 사람들을위한 슈퍼 터치 부분 만 설명합니다.
목표
작업중에 그만 보고 싶어지는 Twitter. . . 조금 볼 확신이 있으면 30분. .
그런 고민을 해결하기 위해 이번에는 Twitter를 보면 꾸짖어주는 Chrome 확장 기능을 만들려고합니다.
소스 코드는 여기
1. 최소한도 필요한 파일 만들기
.
├── content.js
├── icon.png
├── manifest.json
content.jswindow.alert("努力だ。\n勉強だ。\nそれが天才だ。\n誰よりも三倍、四倍、五倍勉強する者、それが天才だ。\n\nby野口英世");
약한 자신에게 지고, 만약 Twitter를 열어 버리면, 노구치 히데요 선생님의 격려의 말이 날 수 있습니다.
manifest.json{
"name": "Twitter Miruna",
"version": "1.0.0",
"manifest_version": 2,
"description": "Twitterを見たら叱ってくれます。",
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"content_scripts": [{
"matches": ["https://twitter.com/"],
"js": [
"content.js"
]
}]
}
만들려는 Chrome 확장 프로그램 설정에 대해 씁니다.
자세한 것은 공식 사이트를 부디.
htps : //로 ゔぇぺぺr. ch 로메. 코 m / 에 x 텐시 온 s / 마니 후 st
icon.png의 경우 Chrome 확장 프로그램에 등록하려는 이미지를 선택하세요.
2. Chrome 확장 프로그램 로드
1. Chrome 확장 프로그램 관리 화면을 엽니다.
검색창에 'chrome://extensions/'를 직접 입력하면 나옵니다.
2. 오른쪽 상단의 개발자 모드를 켭니다.

3. 패키징되지 않은 확장 기능 가져오기를 선택하고 만든 폴더를 지정합니다.
4. 로드되면 이러한 탭이 하나씩 증가합니다.

5. 실제로 트위터를 열어보세요. 이런 팝업이 나오면 성공입니다.

6 여기를 끄면 팝업이 나오지 않습니다.

요약
의외로 쉽게 만들 수 있을까 생각합니다.
여러분도 꼭 자신만의 Chrome 확장 기능을 만들어 보세요! !
참고 기사
htps : // m / Ry b / ms / 32b2 a 7b879f21b3 에로 fc
htps : // 코 m / 수련 / ms / 2b31079056f1356257cb
Reference
이 문제에 관하여(크롬 확장 프로그램 만들기~초기초편~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Ryo_Suzuki/items/d247008888ef67bdeda8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
작업중에 그만 보고 싶어지는 Twitter. . . 조금 볼 확신이 있으면 30분. .
그런 고민을 해결하기 위해 이번에는 Twitter를 보면 꾸짖어주는 Chrome 확장 기능을 만들려고합니다.
소스 코드는 여기
1. 최소한도 필요한 파일 만들기
.
├── content.js
├── icon.png
├── manifest.json
content.jswindow.alert("努力だ。\n勉強だ。\nそれが天才だ。\n誰よりも三倍、四倍、五倍勉強する者、それが天才だ。\n\nby野口英世");
약한 자신에게 지고, 만약 Twitter를 열어 버리면, 노구치 히데요 선생님의 격려의 말이 날 수 있습니다.
manifest.json{
"name": "Twitter Miruna",
"version": "1.0.0",
"manifest_version": 2,
"description": "Twitterを見たら叱ってくれます。",
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"content_scripts": [{
"matches": ["https://twitter.com/"],
"js": [
"content.js"
]
}]
}
만들려는 Chrome 확장 프로그램 설정에 대해 씁니다.
자세한 것은 공식 사이트를 부디.
htps : //로 ゔぇぺぺr. ch 로메. 코 m / 에 x 텐시 온 s / 마니 후 st
icon.png의 경우 Chrome 확장 프로그램에 등록하려는 이미지를 선택하세요.
2. Chrome 확장 프로그램 로드
1. Chrome 확장 프로그램 관리 화면을 엽니다.
검색창에 'chrome://extensions/'를 직접 입력하면 나옵니다.
2. 오른쪽 상단의 개발자 모드를 켭니다.

3. 패키징되지 않은 확장 기능 가져오기를 선택하고 만든 폴더를 지정합니다.
4. 로드되면 이러한 탭이 하나씩 증가합니다.

5. 실제로 트위터를 열어보세요. 이런 팝업이 나오면 성공입니다.

6 여기를 끄면 팝업이 나오지 않습니다.

요약
의외로 쉽게 만들 수 있을까 생각합니다.
여러분도 꼭 자신만의 Chrome 확장 기능을 만들어 보세요! !
참고 기사
htps : // m / Ry b / ms / 32b2 a 7b879f21b3 에로 fc
htps : // 코 m / 수련 / ms / 2b31079056f1356257cb
Reference
이 문제에 관하여(크롬 확장 프로그램 만들기~초기초편~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Ryo_Suzuki/items/d247008888ef67bdeda8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.
├── content.js
├── icon.png
├── manifest.json
window.alert("努力だ。\n勉強だ。\nそれが天才だ。\n誰よりも三倍、四倍、五倍勉強する者、それが天才だ。\n\nby野口英世");
{
"name": "Twitter Miruna",
"version": "1.0.0",
"manifest_version": 2,
"description": "Twitterを見たら叱ってくれます。",
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"content_scripts": [{
"matches": ["https://twitter.com/"],
"js": [
"content.js"
]
}]
}
1. Chrome 확장 프로그램 관리 화면을 엽니다.
검색창에 'chrome://extensions/'를 직접 입력하면 나옵니다.
2. 오른쪽 상단의 개발자 모드를 켭니다.

3. 패키징되지 않은 확장 기능 가져오기를 선택하고 만든 폴더를 지정합니다.
4. 로드되면 이러한 탭이 하나씩 증가합니다.

5. 실제로 트위터를 열어보세요. 이런 팝업이 나오면 성공입니다.

6 여기를 끄면 팝업이 나오지 않습니다.

요약
의외로 쉽게 만들 수 있을까 생각합니다.
여러분도 꼭 자신만의 Chrome 확장 기능을 만들어 보세요! !
참고 기사
htps : // m / Ry b / ms / 32b2 a 7b879f21b3 에로 fc
htps : // 코 m / 수련 / ms / 2b31079056f1356257cb
Reference
이 문제에 관하여(크롬 확장 프로그램 만들기~초기초편~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Ryo_Suzuki/items/d247008888ef67bdeda8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(크롬 확장 프로그램 만들기~초기초편~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Ryo_Suzuki/items/d247008888ef67bdeda8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)