마지막으로 만든 확장 프로그램 확장

마지막으로 다음 기사에서는 제목과 URL을 클립 보드에 복사하는 확장 프로그램을 만들었습니다.
Google 크롬 확장 프로그램 개발 - 1 - 시작하기 - Qiita

같은 확장 기능은 많이 있을까 생각합니다만, 철저히 자신 취향으로 하고 싶다면 만든 것이 빠릅니다.
게다가 엄청 쉽습니다. (가장 나 자신은 그 방법을 소개해 주신 분들 덕분입니다!)

글쎄, 나는 Qiita와 Hatena 블로그를하고있다. 게다가 하테나 블로그는 하테나 기법으로 하고 있습니다.
링크의 룰은 각각 다르므로, 전회에 가세해, 하테나 기법으로의 카피를 하도록(듯이) 합니다.

이하, 그 내용입니다.

manifest.json

manifest.json

{
  "manifest_version": 2,
  "name": "R Chrome Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "clipboardWrite"
  ]
}

manifest.json은 변경 없음

popup.html

popup.html

Get Title&URL<br>
<button id="Qiita">Qiita</button><button id="はてな">はてな</button>
<textarea id="text"></textarea>
<script src="jquery-3.1.1.min.js"></script>
<script src="./popup.js"></script>

라벨을 추가하고, 하테나용의 버튼을 추가하는 것과 동시에, 명칭 변경 등.

popup.js

popup.js

$(function(){
  function copyText(val){
      $("#text").val(val);
      $("#text").select();
      document.execCommand('copy');
  }
  $("#Qiita").on("click", function(){
    chrome.tabs.getSelected(null, function(tab){
      copyText("[{0}]({1})".replace("{0}", tab.title).replace("{1}", tab.url));
    });
  });
  $("#はてな").on("click", function(){
    chrome.tabs.getSelected(null, function(tab){
      copyText("[{1}:title={0}]".replace("{0}", tab.title).replace("{1}", tab.url));
    });
  });
});

텍스트 에리어와 클립보드에의 복사용의 처리를 함수화해, 각각의 버튼은 포맷화한 텍스트를 함수에 건네주도록 변경.



이런 느낌으로 쉽게 기능 추가할 수 있으므로 코피가 나올 것입니다.

이상


지난번
목록
다음 번


시작의 이모
시리즈 일람
저장할 수 있도록