フリー素材を検索するChrome拡張機能「Search Free Image」を公開しました

2015/04/25

by sayo

Tag : ,

Search Free Image

Search Free Image は、どのサイトでも選択した文字を右クリックするだけで、フリー画像素材を検索するChrome拡張機能です。

特に記事を書くお仕事のライターさんやブロガーさん、ウェブデザイナーさんにおすすめのChrome拡張機能(Chrome Extension)なので、ぜひご利用ください。

Search Free Image(サーチ フリー イメージ)

Search Free Image使い方

機能概要とメリット

Search Free Image をChromeに追加(インストール)すると、どのサイトでも、選択した文字を右クリックすると、「◯◯を画像検索」のメニューが表示されるようになります。

記事内で表示したい写真画像を検索するときに、わざわざフリー素材屋さんに移動して、文字を打ち込んだり、コピー&ペーストする必要がなくなるので作業を効率化するのに役立ちます。

このChrome拡張機能で利用させて頂いているフリー素材屋さんは、よく個人的にも仕事でも利用させて頂いている「写真AC」さんと「pixaboy」さんです。

どちらも商用利用可で、クレジット表示なしで利用することができます。

素材数も多くクオリティーも結構いいので大体この2つのサイトで素材を探せば、間に合うことが多いので、よく利用させて頂いています。

特に写真ACさんは、イラストAC、シルエットACなどシリーズ化されており、とてもお世話になっております。

特に記事を書くお仕事をされているライターさんや、ブロガーさん、ウェブデザイナーさんにオススメのchrome拡張機能ですので、ぜひご利用ください。

↓こちらから、Chromeに無料で追加できます。

Search Free Imageアイコン Search Free Image|Chromeウェブストア

開発者向け ソース

次のような2つのファイルでできています。

manifest.json

「manifest.json」というファイルを作ります。

拡張機能の基本的な設定をしています。

{
	"name": "Search Free Image",
	"version":"0.1",
	"manifest_version":2,
	
	"description": "選択した内容を右クリックでフリー画像素材検索します",

	"permissions":[
		"tabs", "http://*/*","contextMenus"
	],

	"icons":{
		"16":"16.png",
		"48": "48.png",
		"128": "128.png"
	},

	"background":{
		"scripts":["background.js"]
	}
}

manifest.jsonの簡単な解説と、処理の流れを説明します。

background

background.js で「選択している文字を右クリックしたらメニューを表示する」という処理を書きます。

permissions

contextMenus が、Chromeで右クリックでメニューを増やしたいときに使うコマンドの種類です。

background.js

右クリックメニューで表示したいメニューの内容や機能を定義しています。

chrome.contextMenus.create({
	"title": "「%s」を画像検索",
	"type": "normal",
	"contexts": ["selection"],
	"onclick": function(info){
		var url ='http://pixabay.com/ja/photos/?q='+ encodeURIComponent(info.selectionText)+'&image_type=&cat=&order=';
		var url2 ='http://www.photo-ac.com/main/search?q='+ encodeURIComponent(info.selectionText)+'&srt=dlrank';
		chrome.tabs.create({
			url:url
		});
		chrome.tabs.create({
			url:url2
		});
	}
});

完成

上記のソースを同じフォルダに入れるだけで、拡張機能が完成します。(別途アイコン画像も一緒に同じフォルダに入れておく)

上記のファイルは↓からダウンロードできます。

ローカルで読み込む場合は、chrome://extensions/ (Chrome拡張機能設定画面)で上部ボタンの「パッケージ化されていない拡張機能機能を読み込む」から展開したフォルダを指定すると、ローカルで利用できます。

↓よかったら、Chromeに無料で追加できますので、使ってください。

Search Free Imageアイコン Search Free Image|Chromeウェブストア

↓Chromeエクステンションを公開する方法は↓の記事を参考にしてください。
>> Chrome拡張機能を開発・公開する方法!javascriptができれば誰でもできる!

関連するコンテンツ

コメント

コメントを残す

この記事と同じ , に関する記事です。お役に立ちそうなのはどれですか?

気になる単語をサイト内検索できます

この記事と同じカテゴリ: chrome拡張 javascript・jquery

>> 記事一覧を見る(TOPページ)