단 5단계로 첫 번째 Chrome 확장 프로그램을 만들고 게시하세요.

15180 단어 cssjavascriptchromeextensionhtml

크롬 확장 프로그램이란 무엇입니까?



Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.  — Chrome Developer



시작하기



개발 부분에 직접 깊이 들어가기 전에. 먼저 한 걸음 물러서서 무엇을 만들고 싶은지 생각해보세요.

오늘 우리는 사용자가 새 탭으로 전환할 때마다 새 따옴표를 표시하는 확장 프로그램을 만들고 있습니다.

1단계: 확장 프로그램에 대해 Chrome에 알리기



확장의 이름, 설명 등과 같은 확장의 세부 정보를 포함하는 JSON 형식의 매니페스트 파일을 생성해야 합니다.

이 확장 프로그램에는 activeTab과 같은 권한이 필요합니다.

파일 이름 manifest.json을 엽니다.

{    
  "manifest_version": 2,

  "name": "QuoteThat",    
  "description": "An Extension which show quotes whenever user switch to new tab. It will work offline and change quote in every 60 seconds.",    
  "version": "1.0.0",    
  "chrome_url_overrides" : {  
    "newtab": "newtab.html"    
  },  
  "browser_action":{      
    "default_icon": "icon.png"    
  },  
  "permissions": ["activeTab"]  
}

"newtab"에서 볼 수 있듯이 사용자가 새 탭으로 전환할 때마다 매번 렌더링되는 _newtab.html_이 필요합니다.

2단계: HTML 파일 만들기



newtab.html 열기

<!DOCTYPE html>  
<html>  
<head>  
  <title>New Tab</title>  
</head>  
<body>  
  <blockquote>  
    <center>  
      <p id="quote"></p>  
      <footer>   
        <cite id="author"></cite>  
      </footer>  
    </center>  
  </blockquote>  
</body>  
</html>

CSS를 추가하여 페이지를 아름답게 만드세요.

<style>  
    body   
    {  
      background-image: url("back.jpg");   
      -webkit-background-size: cover;  
      -moz-background-size: cover;  
      -o-background-size: cover;  
      background-size: cover;  
      position: absolute;  
      width: 70%;  
      top: 25%;  
      left: 0;  
      right: 0;  
      margin: auto;  
    }  
    p   
    {  
     font-size:35px;  
     color: white;  
    }  
    cite   
    {  
      font-size:25px;  
      color: yellow;  
    }  
</style>

따라서 newtab.html은 다음과 같습니다.

<!DOCTYPE html>  
<html>  
<head>  
  <title>New Tab</title>  
  <style>  
    body   
    {  
      background-image: url("back.jpg");   
      -webkit-background-size: cover;  
      -moz-background-size: cover;  
      -o-background-size: cover;  
      background-size: cover;  
      position: absolute;  
      width: 70%;  
      top: 25%;  
      left: 0;  
      right: 0;  
      margin: auto;  
    }  
    p   
    {  
     font-size:35px;  
     color: white;  
    }  
    cite   
    {  
      font-size:25px;  
      color: yellow;  
    }  
  </style>  
</head>  
<body>  
  <blockquote>  
    <center>  
      <p id="quote"></p>  
      <footer>   
        <cite id="author"></cite>  
      </footer>  
    </center>  
  </blockquote>  
  <script src="jquery.min.js"></script>  
  <script src="javascript.js"></script>  
</body>  
</html>

이제 보시다시피 Javascript 파일을 추가했지만 그 전에 새 탭에 표시될 따옴표가 포함된 JSON 파일을 살펴보겠습니다.

따옴표.json

[  
 [  
  "William James",  
  " Act as if what you do makes a difference. It does."  
 ],  
 [  
  "Bill Cosby",  
  " Decide that you want it more than you are afraid of it."  
 ],  
 [  
  "Judy Collins",  
  " I think people who are creative are the luckiest people on earth. I know that there are no shortcuts, but you must keep your faith in something Greater than You, and keep doing what you love. Do what you love, and you will find the way to get it out to the world."  
 ],  
 [  
  "Jessica Savitch",  
  " No matter how many goals you have achieved, you must set your sights on a higher one."  
 ],

따라서 json 파일에 저자와 인용문이 있음을 알 수 있습니다. 그래서 우리는 인용문과 그 저자를 보여줄 것입니다.

이제 javascript.js를 코딩해 보겠습니다.

function Quote(callback)   
{  
  $.getJSON('quotes.json',function(data)   
  {  
    var rN=Math.round(Math.random()*(data.length-1));  
    var author=data[rN][0];  
    var quote=data[rN][1];  
    callback(quote,author);  
  });  
};  
function changeQuote()   
{  
  callback=function(quote, author)   
  {  
    $("p#quote,cite#author").fadeOut(function()   
    {  
      $("p#quote").text(quote).fadeIn(function()   
      {  
        $("cite#author").text(author).fadeIn();  
      });  
    });  
  };  
  Quote(callback);  
};  
$(window).load(function()   
{  
  changeQuote();  
  setInterval(changeQuote,60000);  
});

Quote() 함수는 quote.json 파일에서 무작위로 데이터를 선택하고 견적과 콜백을 작성합니다.

changeQuote() 함수는 호출될 때마다 따옴표를 변경합니다. $(window).load(function(){})는 매 시간마다 changeQuote()를 호출합니다.

3단계: 내선이 작동하는지 확인



Chrome -> 오른쪽 상단 모서리(점 3개) -> 도구 더보기 -> 확장 프로그램으로 이동합니다.



그런 다음 개발자 옵션을 켜고 *압축 풀기*를 클릭합니다.



그리고 당신은 확장을 볼 수 있습니다



이제 새 탭을 열어 확장 기능이 작동하는지 확인하세요.



5단계: 게시

이 페이지link로 이동하여 Gmail 계정으로 로그인하고 새 항목 추가를 클릭합니다.



참고: 계정을 확인하려면 US$5.00를 지불해야 합니다.

파일을 업로드하면 확장 프로그램에 대한 정보, 아이콘, 자세한 설명 등을 추가해야 하는 양식이 표시됩니다. Chrome Web Store에서 내선을 확인하세요.

Github에서 전체 코드를 볼 수 있습니다.
WeakRef 및 constorelog
[백준]#14395 4연산

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage