Chrome 플러그 인 개발 시리즈 1:팝 업 창 터 미 네 이 터 개발 실전
플러그 인 은 일정한 규범 화 된 응용 프로그램 인터페이스 에 따라 작 성 된 프로그램 이 고,chrome 플러그 인 은 chrome 브 라 우 저 에서 실행 되 는 작은 프로그램 입 니 다.작업 학습 에서 반복 되 는 번 거 로 운 일 들 을 해결 할 수 있 습 니 다.
2.플러그 인의 기초 지식
chrome 플러그 인 에 있어 서 가장 핵심 적 인 것 은 manifest.json 이라는 설정 파일 입 니 다.이 를 이용 하여 우 리 는 어떤 시기 에 어떤 웹 페이지 에서 어떤 스 크 립 트 를 실행 하고 어떤 행동 을 하 는 지 정의 할 수 있 습 니 다.다음은 manifest.json 의 형식 을 살 펴 보 겠 습 니 다.
{
//
"name": "MyExtension",
// 。 1 4 。 "."
"version": "1.0",
// manifest 。Chrome18 2
"manifest_version": 2,
// 。132
"description": ",
// 。 16,48,128
"icons": {
"16": "image/icon-16.png",
"48": "image/icon-48.png",
"128": "image/icon-128.png"
},
//
"default_locale": "en",
// ,
// ,
"browser_action": {
"default_icon": "image/icon-128.png",
"default_title": "My Message",
"default_popup": "html/browser.html"
},
// 。
"page_action": {
"default_icon": "image/icon-48.png",
"default_title": "My Test",
"default_popup": "html/page.html"
},
// ,
"theme": {},
// URL
"app": {},
// background
"background": {
"scripts": [
"lib/jquery-3.3.1.min.js",
"js/background.js"
],
"page":"html/background.html"
},
//
"chrome_url_overrides": {
"pageToOverride": "html/overrides.html"
},
// web / css /
"content_scripts": [{
"matches": ["https://www.baidu.com/*"],
"css": ["css/mystyles.css"],
"js": ["lib/jquery-3.3.1.min.js", "js/content.js"],
"run_at": "document_idle"
}],
//
"content_security_policy": ",
"file_browser_handlers": [],
//
"homepage_url": "http://xxx",
//
"incognito": "spanning",
//
"intents": {},
// 。
"key": ",
// chrome
"minimum_chrome_version": "1.0",
//
"nacl_modules": [],
//
"offline_enabled": true,
// ominbox 。
"omnibox": {
"keyword": "myKey"
},
// 。
"options_page": "aFile.html",
//
"permissions": [
"https://www.baidu.com/*",
"background",
"tabs"
],
// 。
"plugins": [{
"path": "extension_plugin.dll",
"public": true
}],
// 。 "3D"
"requirements": {},
//
"update_url": "http://path/to/updateInfo.xml",
// , String
"web_accessible_resources": []
}
이렇게 많아먼저 코드 를 써 서 놀 라 게 하지 마 세 요.정말 놀 라 지 마 세 요.사용 가능 한 속성 이 이렇게 많 지만 자주 사용 하 는 것 은 몇 개 입 니 다.하나씩 보 겠 습 니 다.1.name 확장 이름 입 니 다.
2.version 플러그 인의 버 전 입 니 다.
3、manifest_version manifest 프로필 버 전.
4.description 플러그 인 기능 에 대한 설명.
5.icons 플러그 인의 아이콘 은 플러그 인 에 게 예 쁜 아이콘 을 찾 을 수 있 습 니 다.
6、browser_action 은 플러그 인의 아이콘 을 정의 할 수 있 습 니 다.플러그 인 을 클릭 할 때 나타 나 는 페이지 와 플러그 인의 제목 은 항상 하 나 를 유지 하 는 것 을 권장 합 니 다.이 속성 아이콘 을 설정 하지 않 으 면 회색 이 될 것 입 니 다.설정 한 후에 야 밝 아 집 니 다.
7.background 배경 페이지,프로 세 스 의 배경 운행 환경 을 확장 하고 수정 요청 을 차단 할 수 있 습 니 다.
8、content_scripts 콘 텐 츠 스 크 립 트,어떤 시기 에 어떤 페이지 에 어떤 스 크 립 트 나 css 자원 을 삽입 할 지 지정 할 수 있 습 니 다.
9.permissions 권한 신청 항목,예 를 들 어 저장 권한 storage,차단 권한 webRequest,webRequestBlocking 등 입 니 다.
이러한 기초 지식 을 알 게 된 후에 남 은 일 은 우리 가 실현 하고 자 하 는 실제 기능 에 따라 코드 를 작성 하면 됩 니 다.다음은 우리 의 첫 번 째 플러그 인 을 본 격 적 으로 작성 하 는 것 입 니 다.첫 번 째 플러그 인 이기 때문에 기능 이 간단 하지만 우 리 는 그 에 게'플러그 인 종결자'라 는 우 렁 찬 이름 을 지어 주어 야 합 니 다.어떻게 종결 하 는 지.우선 우리 가 하나하나 말 하 는 것 을 들 어 라.
우선 소재 링크 를 엽 니 다.http://webpack.wuhaolin.cn이것 은 온라인 책 입 니 다.라 는 책 입 니 다.매우 전면적 이 고 흥 미 롭 게 이야기 할 수 있 습 니 다.전체 로 돌아 갈 수 있 습 니 다.우리 가 제1장 을 볼 때 모든 것 이 매우 좋 았 지만 두 번 째 장 에 이 르 렀 을 때 매우 귀 찮 은 탄창 이 나 타 났 습 니 다.
물론 프로그래머 로 서 우 리 는 이 작은 팝 업 창 에 갇 혀 서 는 안 된다.그리고 우 리 는 첫 번 째 시 도 를 했다.개발 자 도 구 를 열 고 팝 업 창 이 있 는 노드 를 찾 아 제거 했다.그러나 우리 가 구 르 는 페이지 에 그 놈 의 탄 상자 가 다시 나 타 났 다.이 는 코드 가 팝 업 창 노드 를 감청 하고 존재 하지 않 을 때 바로 하 나 를 추가 한 다 는 것 을 의미한다.이어서 우 리 는 두 번 째 시 도 를 했다.네가 나 에 게 노드 를 제거 하지 못 하 게 한 이상 우 리 는 제거 하지 않 을 것 이다.똑 같이 팝 업 창 노드 를 찾 아 스타일 을 추가 했다.
display: none!important;
사용!important 의 목적 은 스타일 의 우선 순 위 를 향상 시 키 기 위해 서 입 니 다.팝 업 창 이 보이 지 않 게 하기 위해 서 입 니 다.이 스타일 을 쓰 면 팝 업 창 이 숨 어 있 고 굴 러 갈 때 도 나타 나 지 않 습 니 다.그러나 우리 가 다른 장 을 보 거나 페이지 를 새로 고 칠 때 그 짜증 나 는 탄 상자 가 또 나 왔 습 니 다.숨겨 진 것 을 자동 으로 처리 할 수 있 습 니까?
진정한 기술 을 보 여줄 때 가 되 었 습 니 다.우 리 는 앞서 기초 지식 을 소개 할 때 content 를 언급 했 습 니 다.scripts 필드 는 어떤 시기 에 어떤 페이지 에 어떤 스 크 립 트 나 css 자원 을 삽입 하 는 지 정의 할 수 있 습 니 다.우 리 는 위의 페이지 에 불 러 온 후에 페이지 에 숨겨 진 탄창 의 css 코드 를 주입 하면 됩 니 다.
.gitbook-plugin-modal {
display: none!important;
}
manifest 프로필:
{
"name": "PopBlock",
"version": "1.0",
"manifest_version": 2,
"description": " ",
"browser_action": {
"default_title": "PopBlock"
},
"content_scripts": [{
"matches": ["http://webpack.wuhaolin.cn/*"],
"css": ["css/popup.css"],
"run_at": "document_end"
}]
}
이것 은 아이콘 을 추가 하지 않 았 습 니 다.스스로 추가 할 수 있 습 니 다.그리고 chrome 브 라 우 저 개발 자 모드 로 우리 가 만 든 플러그 인 을 불 러 오 면 더 이상 귀 찮 은 팝 업 창 이 우리 의 시선 을 방해 하지 않 을 것 입 니 다.이 절의 내용 은 여기까지 입 니 다.이 시리즈 에서 저 는 가능 한 한 여러분 과 함께 실 용적 인 플러그 인 을 만 들 겠 습 니 다.뒤의 글 을 기대 하 세 요.
여기에 본문 사례 원본 패 키 지 를 다운로드 하 다.
크롬 플러그 인 개발 시리즈:팝 업 창 터 미 네 이 터 개발 실전 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 크롬 플러그 인 개발 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
해상 자위대의 HP가 아베 히로시의 라이벌로서 자칭을 줬다※기술적인 기사가 아닙니다. 다소 기술적인 이야기는 나옵니다. 우선, 그 페이지는 ・https 대응 ・2019.6.4 홈페이지 재개설(이전 사이트는 어디인가) ・로고와 타이틀이 입고 있다 · Failed to loa...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.