이 기사는 학생 엔지니어 Advent Calendar 23 일째 기사입니다.

겨울 방학의 자유 공작.

할 수있는 것

이미지를 마우스 오른쪽 버튼으로 클릭하여 이미지 URL을 메모에 추가합니다.


팝업을 열고 이미지 클릭으로 URL을 클립보드에 복사합니다.

slack 라든지 적당히 건간 붙여 봅시다.

코드

github 에 놓여 있기 때문에, 만약 흥미가 있으면 삶아지고 구워져 좋아하게 사용해 주세요!

어리석은 곳

특별한 점은 없습니다만, 모처럼이므로 이번 했던 부분으로 chrome extension 고유한 부분을 쑥쑥 써 갑니다.
chrome extension 개발의 기본적인 부분은, 알기 쉽게 써 주시고 있는 기사가 많이 있으므로, 이번은 건드리지 않습니다.

context menu 표시

manifest.json

・・・
  "background": {
    "scripts":[・・・, "context_menu.js"]
  },
  "permissions":[・・・, "contextMenus", ・・・]
・・・

context_menu.js

chrome.contextMenus.create({
  "title" : "画像をメモ",
  "type" : "normal",
  "contexts" : ["image"],
  "onclick":function(info){
    addImageUrl(info.srcUrl);
  }
});

"contexts" : ["image"] 로 이미지를 마우스 오른쪽 버튼으로 클릭할 때만 메뉴에 표시합니다.

참고 : htps : //로 ゔぇぺぺr. ch 로메. 코 m / 에 x 텐시 온 s / 난 x t 메누 s

popup

manifest.json

{
・・・
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
・・・
}

그러면 주소 표시줄 옆에 아이콘이 표시되고 누르면 popup.html이 표시됩니다.

참고 : htps : //에서 ゔぇぺぺr. ch 로메. 코 m / 에 x 텐시 온 s / b 로 w 세라 c 치온

클립보드에 쓰기

manifest.json

  "permissions":["clipboardWrite", ・・・]

function writeToClipboard(str) {
    var textArea = document.createElement("textarea");
    document.body.appendChild(textArea);
    textArea.value = str;
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
}

조금 귀찮아. 좀 더 간단하게 거는 것일지도 모른다.

참고 : htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 으 b

storage 읽기/쓰기

manifest.json

  "permissions":[・・・, "storage"]

storage.js

function getImageUrls(callback) {
  chrome.storage.sync.get('urls', function(items) {
    urls = items['urls'];
    if(!urls) {
      urls = [];
    }
    callback(urls);
  });
}

function addImageUrl(url) {
  urls = getImageUrls(function(urls){
    urls.push(url);
    chrome.storage.sync.set({'urls': urls});
  });
}

storageArea는 sync 외에도 local이나 managed가 있어 용도에 따라 변경하면 좋다고 생각합니다.

참고 : htps : //로 ゔぇぺぺr. ch 로메. 코 m / 에 x 텐시 온 s / s 토레

진짜 하고 싶었어

팝업 이미지를 게시글로 드래그하면 업로드할 수 있도록 하고 싶었다. (트위터용)
js 자세하지 않으므로, 어떻게 바꾸면 좋을지 아는 사람 말씀해 주세요! !

라고 할까 twitter씨 보통으로 외부의 화상도 표시해 주었으면 한다···.

요약

트위터에 붙이고 싶다