Google 크롬 확장 프로그램 빌드

26320 단어 html webdev tutorial javascript

이 기사에서는 자연 배경 이미지와 함께 현재 시간과 임의의 따옴표를 표시하는 간단한 Google 크롬 확장 프로그램을 만드는 방법을 보여줍니다.

배경 이미지는 Pexels에서 가져옵니다.

명백한

먼저 ChromeExte라는 폴더를 만든 다음 내부에 메타 세부 정보가 포함된 manifest.json 파일을 만듭니다.

{
  "manifest_version": 2,

  "name": "Background",
  "description": "Background Image Changer",
  "version": "1.0",

  "chrome_url_overrides" : {
    "newtab": "Background.html"
  }
}

chrome_url_overrides는 크롬의 기본 페이지를 변경하는 데 사용되며 newtab, 북마크, 기록 페이지를 변경하는 데 사용할 수 있습니다. html 파일을 사용하여.

새 탭을 클릭하면 Background.html을 찾습니다.

기본 HTML

ChromeExte 디렉토리 안에 생성해야 합니다.

<!doctype html>
<html>
  <head>
    <title>Background BG</title>
  </head>
  <style type="text/css">
    body {
      background: url('pexels-photo-775201.jpeg') no-repeat center center fixed;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    .content{
      width: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #show_time, #quote {
      color: white;
      text-align: center;
      text-shadow: 2px 2px 5px black;
    }
    #show_time {
      font-size: 55px;
    }
  </style>
  <body>

    <div class="content">
      <h1 id="show_time"></h1>
      <h1 id="quote"></h1>
    </div>

    <script src="script.js"></script>
  </body>
</html>

body 태그는 Pexels 의 배경 이미지를 보유합니다.
javascript를 사용하여 현재 시스템 시간을 표시하는 데 사용되는 show_time.
따옴표를 표시하는 데 사용되는 따옴표.

이제 여기에 기능을 추가해 보겠습니다. 이를 위해서는 javascript가 필요합니다.

무작위 따옴표 논리

quotes는 따옴표 목록을 보유하여 여기에서 수학을 사용한 따옴표에서 임의의 따옴표를 가져옵니다.
Math.random() - 임의의 10진수 값을 반환하고 여기에 따옴표 길이를 곱하면 일부 값이 생성된 다음 값이 바닥을 치고 가장 가까운 값으로 감소합니다. 이 값을 인덱스로 사용하여 견적을 받으십시오.

const quotes = ["Always believe that something wonderful is about to happen.",
"Act as if what you do makes a difference. It does.", 
"Success is not final, failure is not fatal: it is the courage to continue that counts.", 
"Never bend your head. Always hold it high. Look the world straight in the eye.", 
"What you get by achieving your goals is not as important as what you become by achieving your goals.", 
"When you have a dream, you've got to grab it and never let go.", 
"I can't change the direction of the wind, but I can adjust my sails to always reach my destination.", 
"No matter what you're going through, there's a light at the end of the tunnel.",
"It is our attitude at the beginning of a difficult task which, more than anything else, will affect its successful outcome.",
"Life is like riding a bicycle. To keep your balance, you must keep moving."];

// random quote index
const quotes_i = Math.floor(Math.random() * quotes.length);
// set a quote
document.getElementById("quote").innerHTML = quotes[quotes_i];

Pexels 이미지 🏜⛰🏔🏕

https://www.pexels.com/api/?locale=en-US
API를 사용하기 위해 액세스 토큰을 얻으십시오. 토큰은 헤더에 전달되어야 합니다. 우리는 Ajax 호출에 일반 자바스크립트를 사용할 것입니다.

Api에서 페이지당 하나의 이미지만 얻습니다. 임의의 이미지Math.floor(Math.random() * 200) + 1를 얻으려면 0에서 200 사이의 값을 반환합니다. 이를 페이지 번호로 사용하면 원하는 대로 값을 변경할 수 있습니다.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 이것을 pexels의 액세스 토큰으로 교체하십시오.

function loadPexels() {
  var xhttp = new XMLHttpRequest();
  // random page number
  page = Math.floor(Math.random() * 200) + 1
  // get one image per page
  xhttp.open("GET", "https://api.pexels.com/v1/search?query=hd nature wallpaper&per_page=1&page=" + page, true);
  // send Authorization in header
  xhttp.setRequestHeader("Authorization", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
  // response is in json
  xhttp.responseType = 'json';
  xhttp.send();

  xhttp.onreadystatechange = function() {
    // when the request is success get the image and update it as background
    if (this.readyState == 4 && this.status == 200) {
      document.body.style.backgroundImage = "url('"+ this.response.photos[0].src.large2x +"')";
    }
  };
}

본문 backgroundImage가 업데이트됩니다.this.response.photos[0].src에는 해상도가 다른 이미지 소스가 있습니다.

타임샤워⏱

Date 메서드를 사용하여 현재 시간을 AM PM 형식으로 가져오고 값을 show_time 요소로 설정하면 업데이트해야 하므로 자바스크립트의 비동기 함수인 setTimeout으로 호출합니다. 0.5초 간격으로 setTime을 호출합니다.

// this function is asynchronous
function setTime(){
    t = new Date().toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second:'numeric', hour12: true });
    document.getElementById("show_time").innerHTML = t;
    // call itself for each 0.5Sec
    var j = setTimeout(setTime, 500);
}

전체 JavaScript 코드


const quotes = ["Always believe that something wonderful is about to happen.",
"Act as if what you do makes a difference. It does.", 
"Success is not final, failure is not fatal: it is the courage to continue that counts.", 
"Never bend your head. Always hold it high. Look the world straight in the eye.", 
"What you get by achieving your goals is not as important as what you become by achieving your goals.", 
"When you have a dream, you've got to grab it and never let go.", 
"I can't change the direction of the wind, but I can adjust my sails to always reach my destination.", 
"No matter what you're going through, there's a light at the end of the tunnel.",
"It is our attitude at the beginning of a difficult task which, more than anything else, will affect its successful outcome.",
"Life is like riding a bicycle. To keep your balance, you must keep moving."];

// random quote index
const quotes_i = Math.floor(Math.random() * quotes.length);
// set a quote
document.getElementById("quote").innerHTML = quotes[quotes_i];


function loadPexels() {
  var xhttp = new XMLHttpRequest();
  // random page number
  page = Math.floor(Math.random() * 200) + 1
  // get one image per page
  xhttp.open("GET", "https://api.pexels.com/v1/search?query=hd nature wallpaper&per_page=1&page=" + page, true);
  // send Authorization in header
  xhttp.setRequestHeader("Authorization", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
  // response is in json
  xhttp.responseType = 'json';
  xhttp.send();

  xhttp.onreadystatechange = function() {
    // when the request is success get the image and update it as background
    if (this.readyState == 4 && this.status == 200) {
      document.body.style.backgroundImage = "url('"+ this.response.photos[0].src.large2x +"')";
    }
  };
}
// load a random image
loadPexels();

// this function is asynchronous
function setTime(){
    t = new Date().toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second:'numeric', hour12: true });
    document.getElementById("show_time").innerHTML = t;
    // call itself for each 0.5Sec
    var k = setTimeout(setTime, 500);
}
// set current time
setTime();