質問: 通常、Googlechrome上でweb上の画像を右クリック、PCに保存。自分のブログにアップロードという流れを ほとんど右クリック一発で、アップロードまで行うというプログラムの開発を目指しています。 そのうちの、chrome上で得たURLをPHPファイルに送って、そこで投稿という事を想定しています。 様々な言語で様々な方法があると思われるのですが、 私の調べて進めた作成途中の方法では、言語で、 javascript、jquery、PHP、あたりでこれらはできるのかと予測をしつつ、進めております。 既存のこれらのものを検索してみますと、一発ではてなフォトにアップロードしたり、一発でDropboxへ、などあるようでしたが、 自分のブログにアップロードするものは見当たらず、 これが出来たら、ブログの記事装飾も格段と早くなると考え、どうしても作成をしたいと思っております。 画像自体はもちろん無料素材等の問題ないものです。 以下はまず、Chromeの右クリックうんぬんでなく、 javascript、jqueryから、POSTしてちゃんとPHPにデータが渡っているかどうかを模索しました。 chromeから自分のPHPファイルに送信さえできれば、その変数を画像投稿でもなんでも使えるので、まずはuseridの値やpasswardの値さえ送ることができれば、と思いました。 ``` 【私のレンタルサーバー上のindex.html】 ``` ``` 【~~~私のレンタルサーバー上のPHPファイルのURL~.php】 ``` まず上記では成功しているので、単なるhtmlファイル(javascript,jquery)、PHPファイルではデータは技術的にはミスはないと考えました。 続いてchrome拡張機能の開発ですが、 ``` 【manifest.json】 { "manifest_version": 2, "name": "mission", "version": "2", "browser_action": { "default_popup": "popup.html", "default_icon": "33.png", "default_title": "Hello" }, "background": { "scripts": ["background.js","jquery-3.1.1.min.js"] }, "permissions": [ "contextMenus", "tabs" ], "icons": { "16": "33.png" } } ``` popup.html、pngファイル、同一フォルダに取り込んであるjquery-3.1.1.min.js等々はおいておきまして、 background.jsは以下です。 ``` background.js chrome.contextMenus.create({title: "hoge", "contexts":["image"],onclick: hoge}, function(){ alert("コンテキストメニュー登録完了"); }); function hoge(){ $.ajax({ url:'~~~私のレンタルサーバー上のPHPファイルのURL~.php', type:'POST', data:{ 'userid':'aaaaaaaa', 'passward':'bbbbbbbb' } }) // Ajaxリクエストが成功した時発動 .done( (data) => { $('.result').html(data); console.log(data); }) // Ajaxリクエストが失敗した時発動 .fail( (data) => { $('.result').html(data); console.log(data); }) // Ajaxリクエストが成功・失敗どちらでも発動 .always( (data) => { }); }; ``` これで、データはPHP側にはいかないのですが、 どうすればよろしいでしょうか;;申し訳ありません;宜しくご指導願います!!
回答: 問題点は2箇所あります。 1,`manifest.json`の`permissions`でレンタルサーバーのドメインを指定していない。 2,`background.js`と`jquery-3.1.1.min.js`の読み込み順が逆 ``` "background": { "scripts": ["jquery-3.1.1.min.js","background.js"] }, ``` あとこれはcontextMenus経由の起動みたいですが、最初はPopupやブラウザアクションあたりで作るのをお勧めします。 ◇余談 1,chromeでchrome://extensions/のページを開いて作成中の拡張機能の「ビューを検証 バックグラウンド ページ」からbackground.jsのデバック確認ができるかと。 2,PHP側のソースとURLが記載されていませんが、`Access-Control-Allow-Origin`エラーが発生するかもしれません。ぐぐってくださいな! ◇参考情報 オリジン間リソース共有 (CORS)