브라우저 확장 - 설정 및 테스트

Chrome과 Firefox에 Github UI에서 코드를 탐색할 수 있도록 새로운 확장자를 발표했습니다.코드 관광과 확장에 대한 더 많은 정보는 본문을 참조하십시오.

Github를 떠나지 않고 코드 투어를 실행합니다

곤정 메노레・ 1월 18일・ 1분 읽기

#news #chrome #firefox #extension

나는 어떻게 한 걸음 한 걸음 완전히 같은 일을 할 것인가에 대해 일련의 글을 쓰고 싶다.
두 번째 블로그는 개발 브라우저의 확장 환경을 어떻게 설정하는지 중점적으로 소개할 것이다.

목록 파일

이전 글에서 보았던 모든 내용을 브라우저에 불러올 수 있도록 묶어야 합니다.이를 위해서는 브라우저가 불러올 스크립트, 확장자 아이콘, 목록 파일을 포함하여 불러올 폴더가 필요합니다.확장된 목록은 다음과 같습니다.

{
  "name": "Code tours Github",
  "version": "0.0.1",
  "description": "Allows to run code tours in your browser",
  "manifest_version": 2,
  "minimum_chrome_version": "60",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["https://render.githubusercontent.com/*", "https://github.com/*"],
  "icons": {
    "128": "code-tour.png"
  },
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": ["https://github.com/*/*"],
      "js": ["github.js"]
    }
  ]
}

우리들은 서로 다른 속성을 깊이 탐구합시다.

너의 분기점을 묘사하다

속성 extension, name, description은 확장을 설명합니다.마우스를 확장 아이콘 위에 놓으면 version이 Chrome 네트워크 스토어(또는 Firefox 플러그인 스토어)에 표시됩니다.기본적으로 스토어에도 name이 표시됩니다.나쁜 설명이 거부될 수 있기 때문에 확장자를 정확하게 명명해야 한다. (다음 블로그에서 확장자 제출에 대한 내용을 더 많이 볼 수 있을 것이다.)
새 버전을 발표할 때만 description을 늘려야 한다.

예쁜 로고 하나!

version 속성은 브라우저의 확장 도구 모음에 예쁜 그림을 표시할 경로입니다.그것도 상점 페이지에 표시되기 때문에 반드시 그럴듯한 해상도가 있어야 한다. (128x128이면 된다.)

시작 스크립트

icon과 backgrounds 부분은 불러올 스크립트를 보여 줍니다.목록 파일에서 스크립트까지의 상대적인 경로만 주십시오.내용 스크립트에 대해 content_scripts(또는 matches) 속성을 통해 어떤 페이지에 포함되어야 하는지 명확하게 설명해야 한다.

사용 권한

확장에서 수행하려는 작업에 따라 permissions이 필요합니다.너는 명세서 파일에 그것들을 열거해야 한다.예를 들어, 다음을 요구할 수 있습니다.

exclude_matches 브라우저를 관리할 수 있는 책갈피

bookmarks 외부 프로그램을 시작하려는 경우

어떤 URL을 조회하고 싶으면 신분 검증을 사용할 수도 있다. (신분 검증이 없는 상황에서 간단하게 얻을 수 있지만 쿠키가 필요한 내용을 조회하려면 성명해야 한다)

백엔드 스크립트에서 동적으로 요구할 수도 있지만, 확장 작업에 필요한 모든 권한을 목록 파일에 두면 사용자가 거부할 수 없습니다. (그들이 받아들이거나 확장을 설치하지 않습니다.)
중요한 주의사항 중 하나는 당신이 필요로 하는 권한을 초과하도록 요구하지 말라는 것이다. 확장을 제출할 때, 심사 과정에서 모든 권한이 정당하다는 것을 증명해야 한다. 이것도 거절당한 또 다른 원인이다.

최소 작업 확장

프레젠테이션을 위해 3개의 파일을 포함하는 nativeMessaging이라는 폴더를 만듭니다.
표시json:

{
  "name": "My extension",
  "version": "0.0.1",
  "description": "A small test!",
  "manifest_version": 2,
  "minimum_chrome_version": "60",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content_script.js"]
    }
  ]
}

내용과 스크립트.js:

console.log('content script loaded')

배경js:

console.log('background script loaded')

이제 브라우저에 불러옵니다!

로드 확장

이제 내용 스크립트, 배경, 목록을 포함하는 폴더가 생겨서 브라우저에 불러올 수 있습니다.

크롬

크롬의 경우 를 참조하십시오.우선 오른쪽 상단의 개발자 모드를 활성화합니다.

왼쪽 상단에 있는 "포장 열기"를 선택합니다.

파일 선택기를 알려 줍니다.extension 폴더(extension 파일을 포함하는 폴더)를 선택합니다.확장자가 로드되었으므로 이 페이지에서 다시 로드할 수 있습니다.
확장과 연결된 백그라운드 스크립트가 있으면 "Inspect views:background page"링크가 있습니다.이것은 로그를 검사할 수 있도록 백엔드 스크립트에 연결된 개발 도구를 열 것입니다.

이제 파일을 편집하고 확장자를 다시 로드하려면 [다시 로드] 버튼을 클릭합니다.

불여우

Firefox에서도 간단합니다.페이지에 들어가서 "This Firefox"를 클릭하면 됩니다.

"임시 불러오기"를 누르십시오:

Chrome과 마찬가지로 파일을 입력하라는 메시지가 표시됩니다.폴더가 아닌 manifest.json 파일을 선택하면 확장자가 로드됩니다.
백엔드 페이지의 devtools에 접근할 수 있는 '검사 단추' 를 사용할 수 있습니다.

결과는요

이 두 가지 상황에서 백엔드 스크립트를 검사할 때, 컨트롤러에 '불러오는 백엔드 스크립트' 가 나타나고, 방문한 모든 페이지에서 '불러오는 내용 스크립트' 가 웹 사이트 코드의 일부인 것처럼 보일 것이다.

한층 더

내 예에서, 나는 TypeScript를 사용했다. 이것은 내가 이전에 설명한 내용을 생성하기 위해 코드를 전송하고, Webpack을 사용하여 서로 다른 스크립트 파일을 생성하도록 요구한다.생성된 코드 here을 찾을 수 있습니다.
빠른 시작을 위해 TypeScript용 chrome-extension-typescript-starter과 같은 기존 사용 가능한 저장소가 있는 많은 리소스를 찾을 수 있습니다.이것은 빠르게 시작하는 좋은 방법이다.

결론

우리는 브라우저 확장을 어떻게 설정하고 테스트하는지 방금 깊이 있게 연구했다.다음 글에서 우리는 진정한 기능을 실현하기 시작할 것이다!다음을 확인하려면 언제든지 따라오세요.
.ltag__user__id__462103.작업 따르기 버튼
배경색: #fffff!중요
색상: #000000!중요
테두리 색상: #000000!중요
}

곤정 메노레

Engineering Manager @Doctolib – Mostly writing about TypeScript / JavaScript
Ricardo Gomez Angel, Unsplash에서 촬영