그리운 돌고래가 나오는 크롬 확장을 만들었습니다.

11027 단어 chrome-extensionChrome 확장Adkale 드라이브 개발너를 지우는 법어드벤트 캘린더 2019

소개



올해도 어드벤트 캘린더가 시작되었습니다!
이 기사는 Hamee Advent Calendar 2019의 첫날 기사입니다.
Hamee의 엔지니어(일부 디자이너)가 자신의 흥미있는 테마에 대해 써 갑니다.
매년 함께 참가해 북돋워주는 여러분에게 감사합니다
올해로 5년째의 참가가 되어, 문화로서 정착해 오고 있는 느낌이 듭니다

주제



chrome 확장을 흩어져 왔지만 확장 아이콘을 클릭했을 때 팝업 창을 열거나 했던 적은 없다.
라고 생각했기 때문에 공부가 하나하나 확장을 만들어 보았습니다

스크린샷과 동작





왠지 눈에 띄는 돌고래 아이콘을 클릭하면 팝업 창이 열리고 조사를 여기에서 확인할 수 있습니다.
(뒷면은 google 검색에 던져 뿐이지만 w)



소스 코드



구조
$ tree
.
├── css
│   └── popup.css
├── icons
│   └── dolphin.png
├── js
│   ├── dolphin_search.js
│   └── jquery-3.2.1.min.js
├── manifest.json
└── view
    └── popup.html

manifest.json
{
    "manifest_version": 2,
    "name": "dolphin_search",
    "version": "1.0.0",
    "description": "イルカが色んなことを調べてくれるよ！",
    "icons": {
        "16": "icons/dolphin.png",
        "48": "icons/dolphin.png",
        "128": "icons/dolphin.png"
    },
    "browser_action": {
      "default_icon": "icons/dolphin.png",
      "default_popup": "view/popup.html"
    }
}

popup.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/popup.css">
    <title>Dolphin Search</title>
</head>
<body>
    <div class="big">何について調べますか？</div>
    <br>
    <textarea id="search_textarea"></textarea>
    <br>
    <button id="option_button">オプション(<span class="underline">O</span>)</button>
    <button id="search_button">検索(<span class="underline">S</span>)</button>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/dolphin_search.js"></script>
</html>

popup.css
body {
  width:  300px;
  height: 130px;
  background-color: #F6F4C2;
}

.big {
  font-size: 22px;
}

#search_textarea {
  width: 290px;
  height: 35px;
  margin-bottom: 10px;
}

#option_button {
  margin-right: 95px;
  background-color: #F6F4C2;
  font-size: 12px;
  width: 100px;
}

#search_button {
  background-color: #F6F4C2;
  font-size: 12px;
  width: 100px;
}

.underline {
  text-decoration: underline;
}

dolphin_search.js
// 検索ボタンを押された時
$('#search_button').on('click', function(){
  let word = $('#search_textarea').val();
  if(word === 'お前を消す方法'){
    alert('(´・ω・｀)');
  } else {
    window.open('https://www.google.com/search?q='+word);
  }
});

// オプションボタンを押された時
$('#option_button').on('click', function(){
  alert('それは飾りだよ！☆（ゝω・）vｷｬﾋﾟ');
});

해설



manifest.json에서 browser_action 및 default_popup 설정
이렇게하면 확장 아이콘을 클릭하면 팝업 창이 열립니다.
표시하는 html은 자유롭게 작성할 수 있어 css나 js도 html로 읽으면 문제 없게 움직였습니다
js도 매우 간단하고 버튼을 눌렀을 때의 액션을 만드는 것입니다.
응? 간단하죠?

그건 그렇고



검색창에 특정 단어를 넣으면 ...



이 재료 알고있는 세대는 삼촌이라고 말할 수 있을까 ... w

결론



아드카레 5년째입니다.
최근 기사 투고 페이스가 떨어지고 있어, 새로운 것을 배우고 있지 않다고 반성하고 있습니다.
아드카레는 1년에 1회라도 새로운 일을 해 그것을 기사에 쓰려고 생각하기 때문에 꽤 추천입니다.
Adkale 드라이브 개발이라는 사람입니다 w
여러분도 꼭 참가해 보세요!
그럼 이 후에도 Hamee의 아드카레를 기대하세요!
Chrome 확장 프로그램에서 특정 사이트의 URL을 자동으로 수집하여 스프레드시트에 출력
User JavaScript and CSS (Chrome Extension)를 사용하여 Redmine을 맞춤 설정해 보았습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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