質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

1回答

2391閲覧

URLを設定しページ遷移を行うには

mansei2010

総合スコア9

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2017/01/09 21:45

画像をタブとタブの間にドラッグアンドドロップする事で画像検索を行いたいと考えています。

ですが、現在検索が行われずドロップした画像のみを出力するページとなってしまっています。

本来は、ドラッグアンドドロップした直後に検索が行われるのですが、どこを変えることによって検索が行われる様になるのでしょうか。

下記にそれぞれのプログラムを載せます。

どうかよろしくお願い致します。

json

1{ 2 "manifest_version": 2, 3 "version": "1.0.0", 4 "name": "Tab Searcher", 5 "description": "画像をタブの部分にドラッグ&ドロップするだけで画像検索の出来る拡張機能です。", 6 "permissions": [ 7 "tabs", 8 "activeTab", 9 "browsingData", 10 "<all_urls>" 11 ], 12 "content_scripts" : [ 13 { 14 "matches" : [ 15 "file:///*/*", 16 "http://*/*", 17 "https://*/*" 18 ], 19 "js": [ 20 "content.js" 21 ], 22 "run_at" : "document_end" 23 } 24 ], 25 "background" : { 26 "scripts" : [ 27 "ImageSearch_test_6.js" 28 ], 29 "persistent" : false 30 }, 31 "browser_action":{ 32 "default_icon": "tabsearch.png" 33 } 34}

javascript

1chrome.runtime.sendMessage({url:"url"},function(q){ 2 var url = 'https://www.google.co.jp/search?tbm=isch&q=' + q.url; 3 4 setTimeout("link(url)", 0); 5 6 function link(url){ 7 lication.href = url; 8 } 9 10 } 11);

javascript

1 function Sub(image){ 2 3 var form = document.createElement('form'); 4 form.setAttribute('method', 'post'); 5 form.setAttribute('action', 'http://images.google.com/searchbyimage/upload'); 6 form.style.display = "none"; 7 document.body.appendChild(form); 8 9 var hiddenField = document.createElement('input'); 10 hiddenField.setAttribute('type', 'hidden'); 11 hiddenField.setAttribute('name', 'image_content'); 12 hiddenField.setAttribute('value', image); 13 form.appendChild(hiddenField); 14 15 form.submit(); 16 }; 17 18 var imageToBase64 = function(imgElement, mimeType) { 19 20 var canvas = document.createElement('canvas'); 21 base64String = ''; 22 23 if (!imgElement || typeof mimeType !== 'string') { 24 return ''; 25 } 26 27 mimeType = mimeType.replace(/\/png$/, '/octet-stream'); 28 29 canvas.width = imgElement.width; 30 canvas.height = imgElement.height; 31 32 base64String = canvas.toDataURL(mineType); 33 34 canvas.clearRect(0, 0, 0, 0); 35 36 return base64String; 37 }; 38 39 chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){ 40 var image = document.getElementsByTagName('img')[0]; 41 42 var base64String = imageToBase64(image, 'image/jpeg'); 43 44 var SearchCode = Sub.toString().replace(/(\n|\t)/gm, ''); 45 46 /*chrome.tabs.create({ 47 'url': 'javascript:' + SearchCode + '; Sub("' + base64String + '");' 48 });*/ 49 50 //var url = SearchCode + '; Sub("' + base64String + '");' 51 52 sendRequest({url: 'javascript:' + SearchCode + '; Sub("' + base64String + '");'}); 53 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ドロップされた際に画像を表示しないようにするためには、ドロップが行われた後に
e.preventDefault();
を記述する必要があります。
記述されているコードにdropイベントを制御するコードがありませんでしたが、

function dragAndDrop(e){ // デフォルトの挙動(画像を表示)を停止 e.preventDefault(); // ファイル情報を取得 var files = e.originalEvent.dataTransfer.files; })

こんな感じです。

投稿2017/01/10 08:26

namimon

総合スコア726

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問