LoginSignup
3

More than 5 years have passed since last update.

chrome extensionで画像リプツールを作りたかった

Last updated at Posted at 2015-12-23

この記事は学生エンジニア Advent Calendar 23日目の記事です。

冬休みの自由工作。

できたもの

ss-context-menu.png
画像を右クリックで画像urlをメモに追加。
ss-popup.png

ポップアップを開いて画像クリックで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"] とすることで、画像を右クリックしたときのみメニューに表示させます。

参考: https://developer.chrome.com/extensions/contextMenus

popup

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

とすると、アドレスバーの横あたりにアイコンが表示されて、押すとpopup.htmlが表示されます。

参考: https://developer.chrome.com/extensions/browserAction

clipboardに書き込み

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);
}

少し面倒くさい。もっとシンプルにかけるのかもしれない。

参考: https://developers.google.com/web/updates/2015/04/cut-and-copy-commands

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があり、用途に応じて変更すると良いと思います。

参考: https://developer.chrome.com/extensions/storage

本当はやりたかったこと

ポップアップの画像を投稿枠にドラッグしたらアップロードできるようにしたかった。(twitter用)
js詳しくないので、どう変えたらいいのかわかる人おしえてください!!

というかtwitterさん普通に外部の画像も表示して欲しい・・・。

まとめ

twitterに貼りたい

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3