Chrome 플러그 인 개발 시리즈 1:팝 업 창 터 미 네 이 터 개발 실전

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 브 라 우 저 개발 자 모드 로 우리 가 만 든 플러그 인 을 불 러 오 면 더 이상 귀 찮 은 팝 업 창 이 우리 의 시선 을 방해 하지 않 을 것 입 니 다.


이 절의 내용 은 여기까지 입 니 다.이 시리즈 에서 저 는 가능 한 한 여러분 과 함께 실 용적 인 플러그 인 을 만 들 겠 습 니 다.뒤의 글 을 기대 하 세 요.
여기에 본문 사례 원본 패 키 지 를 다운로드 하 다.
크롬 플러그 인 개발 시리즈:팝 업 창 터 미 네 이 터 개발 실전 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 크롬 플러그 인 개발 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!