댓글 검색 목록

[javascript] 자바 스크립트로 크롬 확장을 만드는 방법

페이지 정보

작성자 운영자 작성일 21-06-09 12:41 조회 1,500 댓글 0

✨ 만들 것

이 튜토리얼에서는 몇 가지 간단한 단계로 바닐라 자바 스크립트로 크롬 확장을 만드는 방법을 안내합니다. 내가 만든 크롬 확장 프로그램은 새 탭을 열 때마다 임의의 중국어 관용구를 제공합니다. 그러나 새로운 단어 / 긍정적인 인용문에 더 자주 노출하고 싶은 다른 언어의 인용문이나 어휘로 쉽게 실험 할 수 있습니다!

✨ 먼저 할 일 : HTML

  <body>
    <div class = "container">
        <div id = "chengyu">
            <h1></h1>
        </div> 
        <div id = "pingyin">
            <h3></h3>
        </div>
        <div id = "definition">
            <h2></h2>
        </div>
    </div>
  </body>

나중에 만들 script.js 파일과 data.json을 연결해야 합니다.

✨ 취향에 맞게 스타일 지정 : CSS

#으로 ID를 선택해야 합니다. 본문에 웹킷 애니메이션 라인을 추가하여 텍스트 흐름을 개선했습니다.

body {
    color: white;
    font-size: 40px;
    overflow: hidden; /* Hide scrollbars */
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
}

그런 다음 애니메이션 효과를 적용하려면 CSS에 이러한 줄을 추가해야 합니다.

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

✨ 재미있는 부분 : JS

기본적으로 하나의 큰 함수로 코드를 작성합니다. 먼저 배경에 사용할 색상을 직접 선택한 배열을 만들었습니다. 그런 다음 배열에서 임의의 항목을 반환하는 일반 임의 화 함수가 있습니다.

    // randomize function 
    function randomize(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }

json 파일로 작업하려면 fetch를 사용하여 검색합니다. .then () 아래는 대부분의 마법이 일어나는 곳입니다. json 파일의 데이터로 randomize 함수를 호출하고 나중에 쉽게 액세스 할 수 있도록 변수에 할당합니다. 그런 다음 DOM을 조작하여 텍스트가 HTML에 무작위로 함께 표시되도록 합니다.

    // loads the external json file 
    fetch('./data.json')
    .then((response) => {
        return response.json()
    })
    .then((data) => {
    // work with JSON data here
        var random = randomize(data);
    // display the elements on the html
        document.getElementById('chengyu').innerHTML = random.chengyu;
        document.getElementById('definition').innerHTML = random.definition;
        document.getElementById('pingyin').innerHTML = random.pingyin;
    })
    .catch((err) => {
    // do something for an error here
    })

그런 다음 window.onload 함수는 배열에서 무작위로 색상을 선택하고 배경으로 표시하는 코드를 넣는 곳입니다.

    //pick a random background color 
    window.onload = function() {
      var randomColor = randomize(color);
      document.getElementsByTagName("body")[0].style.background = randomColor;
    };

다음은 JS 부분의 전체 코드입니다!

(function(){
    // array of colors
    var color = [
      "#d1495b",
      "#edae49",
      "#003d5b", 
      "#00509d", 
      "#3a5a40", 
      "#1f7a8c", 
      "#588157", 
    ];
    // randomize function 
    function randomize(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }
    // loads the external json file 
    fetch('./data.json')
    .then((response) => {
        return response.json()
    })
    .then((data) => {
    // work with JSON data here
        var random = randomize(data);
    // display the elements on the html
        document.getElementById('chengyu').innerHTML = random.chengyu;
        document.getElementById('definition').innerHTML = random.definition;
        document.getElementById('pingyin').innerHTML = random.pingyin;
    })
    .catch((err) => {
    // do something for an error here
    })
    //pick a random background color 
    window.onload = function() {
      var randomColor = randomize(color);
      document.getElementsByTagName("body")[0].style.background = randomColor;
    };

  })();

✨ 크롬 확장 부분 : manifest.json

이것은 javascript를 크롬 확장명으로 만드는 파일입니다. 프로젝트 요구에 맞게 사용자 정의하십시오. 디렉토리에 아이콘 폴더를 만들고 16x16px, 48x48px 및 128x128px의 아이콘 png를 추가하십시오. 설명은 사람들이 내 확장 프로그램을 검색 할 때 짧은 설명으로 표시되는 한 줄 짜리입니다.

{
  "name": "chengyu",
  "short_name": "chengyu",
  "version": "0.0.1.2",
  "description": "New tab, new Chinese idiom",
  "icons": { "16": "icons/chengyu.png",
             "48": "icons/chengyu-2png", 
             "128": "icons/chengyu-3.png"
           },
  "manifest_version": 2,
  "chrome_url_overrides": {
    "newtab": "index.html"
  }, 
  "web_accessible_resources": [
    "data.json"
]
}

✨ 콘텐츠로 채우기 : data.json

여기에 JSON 객체를 넣습니다. 다음은 형식을 지정할 구문을 보여주는 제 JSON 파일의 예제 스니펫입니다.

[
    {"chengyu": "一了百了", "pingyin": "Yīliǎobǎiliǎo","definition": "When one thing is done, everything is done"},
    {"chengyu": "一刀兩斷", "pingyin": "yīdāoliǎngduà", "definition": "End relationships"},
    {"chengyu": "一口咬定", "pingyin": "yīkǒu yǎodìng", "definition": "Short of something"}
]

✨ 로컬에서 확장 프로그램을 사용해 볼 시간

확장 프로그램 관리 페이지로 이동하여 개발자 모드를 켭니다. 다음으로 압축을 푼 확장 프로그램 로드를 클릭하고 코드가 포함 된 폴더로 이동합니다. 그런 다음 Chrome 브라우저에서 확장 프로그램을 사용해 볼 수 있습니다. 코드를 변경할 때마다 이 개발자 모드에도 반영됩니다.

? Chrome 스토어에 올려 친구들과 공유하세요 *

확장 프로그램을 스토어에 올리려면 개발자 계정을 등록하기 위해 일회성 $5 수수료를 지불해야 합니다. 또한 프로젝트를 개발자 대시 보드에 zip 파일로 업로드 해야 합니다 (Mac의 경우 압축하면 zip 파일이 됩니다). 여기에서 빠른 단계를 따를 수 있습니다. 제출이 검토되고 Chrome 스토어에 출시되는 데 약 1 ~ 2 일이 걸립니다.

https://dev.to/ivavay/how-to-make-a-chrome-extension-with-javascript-5157