画像を現存するタブと新規タブ作成のボタンの間にドラッグアンドドロップした際に画像検索を可能にしたいと思い、
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
開いた画像のページの中身を取得した後に検索を行いたいと思っているのですが、画像データが読み込まれていない状態になってしまっています。
皆さんのご意見を教えて頂けませんか。
よろしくお願いします。
過去の質問からの続きだと思いますが、現状のソースやmanifest.jsonを提示したほうがよいと思います。実はこちらの質問https://teratail.com/questions/60149にて質問者様のコードを元に動作する機能を作ったのですが、色々と確認したり、説明するのがめんどうくさくなってしまって回答しませんでした。少なくともバッククラウンドのみでは完結しないと思います。タブのコンテンツスクリプトとのメッセージングなど使用すると思いますが、一度拡張機能について公式ドキュメントを読むべきだと思います(英語かもしれませんが、Google翻訳がなんかすごいので意味がわかる日本語で読めるはずです)。
メッセージングを行うにしても、前提としてタブ内のページの内容を取得しなくてはいけないと思うのですが、getElementsByTagName以外で取得できるものでしょうか。
私がいうメッセージングとはchrome.tabs.sendMessageのことです。タブのIDが必要です。backgroundからタブを作成したときにその情報は取得可能です。ただ、フォアページにドロップされた場合に処理を開始するなら必要ないかもしれません。あなたが真にやりたいことを確認したり、そのうえで別案を提示したり、基本的なことから全てを説明するのは非常に難しいので、回答しやすいように質問をもっと「backgroundのスクリプトでこう書いて、こういう動作になることを期待していたが、そうならずこのような現象が起こってしまう」など具体的にできないでしょうか?