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

Search Free Image

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

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

Search Free Image（サーチフリーイメージ）

機能概要とメリット

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

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

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

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

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

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

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

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

Search Free Image｜Chromeウェブストア

開発者向けソース

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

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｜Chromeウェブストア

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