크롬 확장을 구축하는 방법

이번 주말에 크롬 확장을 개발하고 동일한 작업을 반복적으로 수행하고 자동화하고 싶어하는 것을 발견했습니다. 또한, 나는 전염병에서 살아 남기 위해 집에 머물러있는 괴짜이므로, 축적 된 에너지를 사물 창조에 전념 할 것입니다. 나는 수년에 걸쳐 크롬 확장을 개발 했으며이 기사가 당신도 시작하는 데 도움이되기를 바랍니다. 시작합시다!

매니페스트 파일을 만듭니다

첫 번째 단계는 manifest.json 이라는 파일을 작성하여 프로젝트 폴더에 배치하는 것입니다. 이 기능은 package.json 과 유사하며 이름, 버전, 필요한 권한 등을 포함한 Chrome Web App Store 프로젝트에 대한 중요한 정보를 제공합니다. 예는 다음과 같습니다.

 {
  "Manifest_version": 2,
  "이름": "샘플 이름",
  "버전": "1.0.0",
  "설명": "이것은 예제 설명입니다",
  "short_name": "예제 이름 약어",
  "권한": [ "Activetab", "DeclarativeContent", "Storage", "<all_urls> "],
  "content_scripts": [
    {
      "매치": [ ""<all_urls> "],
      "CSS": [ "background.css"],
      "js": [ "background.js"]]
    }
  ],,
  "Browser_Action": {
    "default_title": "조치를 실행할 때 조치를 실행",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "아이콘/아이콘 16.png",
      "32": "아이콘/아이콘 32.png"
    }
  }
}</all_urls></all_urls>

몇 가지 세부 사항을 알 수 있습니다. 첫째 : 이름 과 설명을 원하는대로 채울 수 있습니다.

권한은 확장이 수행 해야하는 내용에 따라 다릅니다. 이 예에서는 ["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls> 사용합니다. ["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls> ,이 특정 확장에는 활성 태그에 대한 정보가 필요하고, 페이지 컨텐츠를 변경해야하고, LocalStorage에 액세스해야하며, 모든 웹 사이트에서 활성화되어야합니다. 하나의 웹 사이트에서만 활성화되어야하는 경우 해당 배열의 마지막 인덱스를 삭제할 수 있습니다.

Chrome의 확장 문서에는 모든 권한과 그 의미가 나와 있습니다.

 "content_scripts": [
  {
    "매치": [ ""<all_urls> "],
    "CSS": [ "background.css"],
    "js": [ "background.js"]]
  }
],,</all_urls>

content_scripts 섹션은 확장자가 활성화되어야하는 사이트를 설정합니다. 트위터와 같은 별도의 웹 사이트를 원한다면 ["https://twitter.com/*"] 로 쓸 수 있습니다. CSS 및 JavaScript 파일은 확장에 필요한 모든 것입니다. 예를 들어, 효율적인 Twitter 확장은 이러한 파일을 사용하여 Twitter의 기본 모양을 덮어 씁니다.

 "Browser_Action": {
  "default_title": "조치를 실행할 때 조치를 실행",
  "default_popup": "popup.html",
  "default_icon": {
    "16": "아이콘/아이콘 16.png",
    "32": "아이콘/아이콘 32.png"
  }
}

browser_action 의 일부 내용도 선택 사항입니다. 예를 들어, 확장자가 기능을 구현하기 위해 팝업이 필요하지 않은 경우 default_title 및 default_popup 삭제할 수 있습니다. 이 경우 확장자의 아이콘 만 필요합니다. 확장이 특정 웹 사이트에서만 유효한 경우 Chrome은 비활성화 될 때 확장자의 아이콘을 회색으로 만듭니다.

디버그

매니페스트 파일, CSS 및 JavaScript 파일이 준비되면 chrome://extensions/ 브라우저 주소 표시 줄을 방문하여 개발자 모드를 활성화하십시오. 이렇게하면 압축 압축 버튼을 활성화하여 확장 파일을 추가합니다. 개발자 버전의 확장자가 활성화되어 있는지 전환 할 수도 있습니다.

이 시점에서 버전 제어를위한 Github 저장소를 시작하는 것이 좋습니다. 이것은 작업을 구하는 좋은 방법입니다.

확장자를 업데이트 할 때는이 인터페이스에서 다시로드되어야합니다. 작은 새로 고침 아이콘이 화면에 표시됩니다. 또한 확장자가 개발 중에 오류가 발생하면 스택 추적이 포함 된 오류 버튼과 여기에 더 많은 정보가 표시됩니다.

팝업 창 함수

다행히도 확장자가 확장자 아이콘에서 팝업을 사용하는 팝업을 사용해야하는 경우 매우 간단합니다. Manifest 파일에서 browser_action 으로 파일 이름을 지정한 후 이미지를 포함하여 페이지를 작성하려는 HTML 및 CSS를 사용할 수 있습니다 (인라인 SVG를 사용하는 경향이 있음).

팝업에 기능을 추가해야 할 수도 있습니다. 여기에는 일부 JavaScript가 필요할 수 있으므로 Manifest 파일에 JavaScript 파일을 지정하고 다음과 같이 팝업 파일에 연결하십시오.

이 파일에서 먼저 함수를 작성하면 다음과 같이 팝업 dom에 액세스합니다.

 document.addeventListener ( "domContentLoaded", () => {
  var button = document.getElementById ( "제출");

  button.addeventListener ( "클릭", (e) => {
    Console.log (e);
  });
});

popup.html 파일에서 버튼을 만들고 submit 이라는 ID를 할당 한 다음 콘솔 로그를 반환하면 실제로 콘솔에 아무것도 기록되지 않음을 알 수 있습니다. 우리는 컨텍스트가 다르기 때문에 팝업을 마우스 오른쪽 버튼으로 클릭하고 다른 DevTools 세트를 열어야합니다.

이제 로그에 액세스하고 디버그 할 수 있습니다! 그러나 로컬 스토리지에 어떤 것이 설정되어 있으면 확장의 DevTools LocalStorage에만 존재한다는 것을 기억하십시오. 사용자의 브라우저 LocalStorage가 아닙니다. (처음 시도했을 때이 문제를 겪었습니다!)

확장 외부에서 스크립트를 실행하십시오

이것은 모두 좋지만 현재 탭 정보에 액세스 할 수있는 스크립트를 실행하려면 어떻게해야합니까? 다음은이 작업을 수행하는 몇 가지 방법이 있습니다. 나는 보통 DOMContentLoaded 이벤트 리스너 내에서 별도의 기능을 호출합니다.

예 1 : 파일을 활성화합니다

 함수 exampleFunction () {
  chrome.tabs.executescript (() => {
    chrome.tabs.executescript ({file : "content.js"});
  });
}

예 2 : 소량의 코드 만 실행합니다

이 접근법은 소량의 코드 만 실행하면됩니다. 그러나 모든 것을 문자열 또는 템플릿 리터럴로 전달해야하므로 다루기가 빨리 어려워집니다.

 함수 exampleFunction () {
  chrome.tabs.executescript ({{
    코드 :`console.log ( 'hi there');`
  });
}

예 3 : 파일을 활성화하고 매개 변수를 전달합니다

확장 및 탭은 다른 상황에서 실행됩니다. 이것은 그들 사이에 매개 변수를 전달하는 것이 쉽지 않습니다. 우리는 여기에 첫 두 가지 예제를 중첩하여 일부 코드를 두 번째 파일에 전달합니다. 필요한 모든 것을 하나의 옵션으로 저장하지만 작동하기 위해서는 객체를 연결해야합니다.

 함수 exampleFunction (옵션) {
  chrome.tabs.executescript (
    {코드 : "var 옵션 ="json.stringify (옵션)},
    기능() {
      chrome.tabs.executescript ({file : "content.js"});
    }
  );
}

상

매니페스트 파일은 두 개의 아이콘 만 정의되지만 크롬 웹 스토어에 확장자를 공식적으로 제출하려면 128 픽셀 스퀘어 아이콘과 아이콘이라는 아이콘이 128 픽셀이지만 이미지의 icon128_proper.png 와 아이콘 사이에 약간의 패딩이 있습니다.

어떤 아이콘을 사용하든 브라우저의 밝고 어두운 모드에서 잘 보일 필요가 있습니다. 나는 보통 명사 프로젝트에서 내 아이콘을 찾습니다.

Chrome Web App Store에 제출하십시오

이제 Chrome 웹 스토어 개발자 콘솔로 이동하여 확장을 제출할 수 있습니다! 새 프로젝트 버튼을 클릭하고 압축 된 프로젝트 파일을 업로더로 끌어다 놓습니다.

Chrome은 여기에서 확장에 대해 몇 가지 질문을하고 확장에 요청 된 권한과 해당 권한이 필요한 이유에 대한 정보를 요청합니다. 경고 : "Activetab"또는 "Tabs"권한을 요청하는 것은 코드가 남용을 수행하지 않도록하는 데 시간이 더 걸립니다.

그게 다야! 크롬 브라우저 확장을 시작할 준비가되어 있어야합니다! ?

위 내용은 크롬 확장을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!