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

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

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

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

Chrome extension

Chrome拡張機能

Q&A

1回答

1820閲覧

chromeの画像検索の為の拡張機能を作成するに当たって

mansei2010

総合スコア9

Chrome

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

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2016/12/27 06:31

編集2022/01/12 10:55

画像を現存するタブと新規タブ作成のボタンの間にドラッグアンドドロップした際に画像検索を可能にしたいと思い、
backgroundのスクリプトで下記の通りに書いたのですが、検索されずに実装直後に勝手に検索を行ってしまいます。

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 imgElement.crossOrigin = 'anonymous'; 20 var canvas = document.createElement('canvas'), 21 context = canvas.getContext('2d'), 22 base64String = ''; 23 24 if (!imgElement || typeof mimeType !== 'string') { 25 return ''; 26 } 27 28 mimeType = mimeType.replace(/\/png$/, '/octet-stream'); 29 30 canvas.width = imgElement.width; 31 canvas.height = imgElement.height; 32 33 context.drawImage(imgElement, 0, 0); 34 35 base64String = canvas.toDataURL(mimeType); 36 37 canvas.clearRect(0, 0, 0, 0); 38 39 return base64String; 40 }; 41 window.onload = (function(){ 42 var image = document.getElementsByTagName('img')[0]; 43 44 var base64String = imageToBase64(image, 'image/jpeg'); 45 46 SearchCode = Sub.toString().replace(/(\n|\t)/gm, ''); 47 48 chrome.tabs.create({ 49 'url': 'javascript:' + SearchCode + '; Sub("' + base64String + '");' 50 }); 51 )}; 52

開いた画像のページの中身を取得した後に検索を行いたいと思っているのですが、画像データが読み込まれていない状態になってしまっています。
皆さんのご意見を教えて頂けませんか。

よろしくお願いします。

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

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

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

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

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

guest1213

2016/12/28 00:08

過去の質問からの続きだと思いますが、現状のソースやmanifest.jsonを提示したほうがよいと思います。実はこちらの質問https://teratail.com/questions/60149にて質問者様のコードを元に動作する機能を作ったのですが、色々と確認したり、説明するのがめんどうくさくなってしまって回答しませんでした。少なくともバッククラウンドのみでは完結しないと思います。タブのコンテンツスクリプトとのメッセージングなど使用すると思いますが、一度拡張機能について公式ドキュメントを読むべきだと思います(英語かもしれませんが、Google翻訳がなんかすごいので意味がわかる日本語で読めるはずです)。
mansei2010

2017/01/03 12:30

メッセージングを行うにしても、前提としてタブ内のページの内容を取得しなくてはいけないと思うのですが、getElementsByTagName以外で取得できるものでしょうか。
guest1213

2017/01/04 04:05

私がいうメッセージングとはchrome.tabs.sendMessageのことです。タブのIDが必要です。backgroundからタブを作成したときにその情報は取得可能です。ただ、フォアページにドロップされた場合に処理を開始するなら必要ないかもしれません。あなたが真にやりたいことを確認したり、そのうえで別案を提示したり、基本的なことから全てを説明するのは非常に難しいので、回答しやすいように質問をもっと「backgroundのスクリプトでこう書いて、こういう動作になることを期待していたが、そうならずこのような現象が起こってしまう」など具体的にできないでしょうか?
guest

回答1

0

タブエリアへのドロップイベントってなかった気がします
画像をタブエリアにドロップしたら新規にタブが画像のURLで開くので chrome.tabs.onCreated.addListener で URL が画像だったら処理を行う、となるように思います

右クリックから新規タブで画像を開いたときにもイベントが起きてしまいますけど

前の質問をちらっと見たところ検索したいとのことなので、そのURLを
https://www.google.co.jp/search?tbm=isch&q=(ここにURL)
に入れれば検索結果のページが開きます
タブをここに遷移させればいいと思います

ただ、Chrome は右クリックから画像検索できるのでわざわざタブのところへドロップする必要ないかなと思います

投稿2016/12/30 13:22

lazex

総合スコア604

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問