画像を現存するタブと新規タブ作成のボタンの間にドラッグアンドドロップする事で画像検索を行いたいと考えています。
ですが、いざ実装し画像をドラッグアンドドロップを行った際、情報はバックグラウンドに送れていると思われますが、常にタブが作成し続けてしまい、ブラウザクラッシュみたいな状況が起こってしまいました。
理由としては、タブを読み込んだ後タブを作成し、そのタブを読み込んで作成のループが原因であると思っています。
その為、location.hrefをバックグラウンドで試してみたのですが、ページ遷移が行われずにいます。
また、作成されたページの中には、「画像での検索はご利用になれません。数時間後にもう一度お試しください。」と出てしまっており、画像が取得出来ていないのではないかと考えています。
さらに、画像のurlについて、コンテンツスクリプトとバックグラウンドのどちらで取得すれば良いかについても曖昧です。
下記にmanifestファイル、コンテンツスクリプトのプログラム、バックグラウンドのプログラムを載せます。
どうか、画像の取得並びにループの抜け出し方について教えて頂けませんでしょうか。
よろしくお願い致します。
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
1//content.js 2var id = chrome.runtime.id; 3 4chrome.runtime.sendMessage(id,"image");
javascript
1//background.js 2 function Sub(image){ 3 4 var form = document.createElement('form'); 5 form.setAttribute('method', 'post'); 6 form.setAttribute('action', 'http://images.google.com/searchbyimage/upload'); 7 form.style.display = "none"; 8 document.body.appendChild(form); 9 10 var hiddenField = document.createElement('input'); 11 hiddenField.setAttribute('type', 'hidden'); 12 hiddenField.setAttribute('name', 'image_content'); 13 hiddenField.setAttribute('value', image); 14 form.appendChild(hiddenField); 15 16 form.submit(); 17 }; 18 19 var imageToBase64 = function(imgElement, mimeType) { 20 21 var canvas = document.createElement('canvas'); 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 base64String = canvas.toDataURL(); 34 35 return base64String; 36 }; 37 38 chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){ 39 var image = document.getElementsByTagName('img')[0]; 40 41 var base64String = imageToBase64(image, 'image/jpeg'); 42 43 var SearchCode = Sub.toString().replace(/(\n|\t)/gm, ''); 44 45 chrome.tabs.create({ 46 'url': 'javascript:' + SearchCode + '; Sub("' + base64String + '");' 47 }); 48 });
あなたの回答
tips
プレビュー