chrome拡張機能を自作してウェブストアで公開する手順10.16WED2024いしかわろぐ釣り自身の趣味である「釣り」について綴った記事の一覧。釣り具や仕掛けの細かい説明よりも、釣りに訪れた際の雰囲気をメインに綴っています。海釣り・川釣り、釣った魚を捌いての釣り飯や釣具のレビューもしています。釣った魚をさばいて調理した「釣り飯」について綴った記事のまとめ。刺身に焼き魚に煮物......天ぷらも美味しいし......と、レシピ豊富な釣り飯。我が家で一番多い釣り飯メニューは干物。干物の作り方についても綴っていますよ。海釣り「海釣り」について綴った記事の一覧。メインはルアー釣りですがなんでも好きです。ヘラブナ釣り「ヘラブナ釣り」について綴った記事の一覧。小物釣り「小物釣り」について綴った記事の一覧。身軽な装備でふらっと釣り場に行き、極小の仕掛けで小さな魚を狙う。小さな世界だけど奥深き小物釣り。シーバス釣り「シーバスフィッシング」について綴った記事の一覧。→引っ越してからは霞ヶ浦水系。シーバスはセイゴ→フッコ→スズキと大きさによって呼び名が変わる出世魚。近所で釣りしています。ブラックバス釣り「ブラックバスフィッシング」について綴った記事の一覧。茨城に引っ越してきてから、バス釣りのメッカ霞ヶ浦水系で見事にハマりました。50UPを釣るのが当面の目標です(笑)スモールマウスバス釣り「スモールマウスバスフィッシング」について綴った記事の一覧。ブラックバス釣りはしているもののスモールマウスバスとなるとまた別。釣り方が異なり、引きもブラックバスより強くて楽しい!テナガエビ釣り「テナガエビ」について綴った記事の一覧。以前は江戸川、今は霞ヶ浦水系でテナガエビをしています。楽しい上に食べておいしい釣り。メバリング「メバリング」について綴った記事の一覧。引きが強くて釣って楽しい、食べればおいしいメバル。始めて見たら楽しくてメバリングにハマっています。趣味である釣りの道具「釣具」について綴った記事の一覧。釣り歴はそれなりに長いのですが、長い間釣具にはあまり頓着ありませんでした。フカセ釣りを始めたことで道具の大事さにようやく気付き始めた次第です。基本的には、安いものを使用しております(笑)キャンプ「キャンプ」について綴った記事のまとめ。外で時間を過ごすのが好きなので、キャンプを時折おこなっています。そのキャンプ内容について綴ったり、キャンプ場の様子を綴ったりしています。キャンプ飯キャンプギアで調理するキャンプ飯。キャンプ場で、またはキャンプに行けない時間にも自宅で作ったキャンプ飯についての記事をまとめています。キャンプギア「キャンプギア」について綴った記事のまとめ。購入したギアのレビューから、自作のギアに綴ったりもしています。飲み物ライフスタイル田舎暮らし東京から茨城の田舎へ移住。そこでの暮らしの様子などを綴った記事の一覧。庭作り・畑・DIYなどの記事を公開していきます。山登り「山登り」について綴った記事のまとめ。自然を満喫しに、綺麗な景色を眺めに訪れることの多い山。ついて綴った記事のまとめ。自転車に乗ってあてもなくまっすぐ走っていくのが子供の頃から好きでした。最近、Giantの「Rock4800」というマウンテンバイクを譲り受けたことで、自転車を触る時間が増えてきています。自転車旅なんか、できたらいいなぁ。2024/7/16本ページはアフィリエイトプログラムを利用しています初めてchrome拡張機能を自作しました。あわせてchromeウェブストアで公開もしてみたので、手順をまとめてみようかと。chrome拡張機能を作ることにしたきっかけになったのは先日リリースしたサービス、clink(クリンク)。リンクを管理するブックマークサービス的なものなのですが、わざわざ上記サイトに行ってリンクを登録するのも自分で使っていて面倒に感じまして。その時閲覧しているページをそのままclinkに登録できたら便利かなと思ったわけです。chromeウェブストアで公開するデベロッパー登録し拡張機能をウェブストアで公開する手順まとめ思いのほか簡単に自作できたchrome拡張機能さて、思い立ってまず見たのがchrome拡張機能開発のための公式ドキュメント。https://developer.chrome.com/extensions/getstartedサンプルコードがあるので試しにやってみたところ、すぐに動かすことができました。htmlやjavascriptなど、ウェブサイト制作で利用するベーシックなところ抑えていれば、難易度は低いのかなというイメージです。自作chrome拡張機能をローカルで作成し実際にchromeで動かしてみる何はともあれ、まずは適当なデモを実際に動かしてみるのが一番。公式ドキュメントからサンプルを抜粋してサクッと試してみます。僕が作りたかったのは、chromeの右上に表示されるアイコンをクリックするとポップアップが表示されるタイプのもの。actionsという種類のものになります。ポップアップテストまずは試しに、chromeの右上に表示されるアイコンをクリックするとポップアップが表示されるだけのサンプルを作ってみます。必要なのは下記の2ファイル。ディレクトリを作って、その中で構築してください。manifest.jsonpopup.htmlmanifest.jsonには次のように書いておきます。},}manifest_versionは公式マニュアルに合わせると良いかと思います。versionは拡張機能のバージョンです。更新時には、前回のバージョンより新しくする必要があります。大事なのはbrowser_action。default_popupに指定したhtmlが、アイコンをクリックした時に表示されるポップアップの内容になります。ここでは内容は適当で良いので、popup.htmlを作っておきます。自作拡張機能データの読み込み方法さて、先ほど作ったテストファイルを、実際にchromeで読み込んで使ってみます。chromeの設定画面から、「その他のツール→拡張機能」を選択。続いて、デベロッパーモードをONにして、「パッケージ化されていない拡張機能を読み込む」をクリックします。するとディレクトリ選択用のポップアップが表示されるので、先ほど作成したファイルが入っているディレクトリを選択。することで拡張機能が読み込まれます。ウェブストアでは公開せず、自分だけで使う拡張機能であればこれで事足ります。上記に表示されているIDが重要で、「chrome-extension://上記ID/popup.html」とすることで、ポップアップを別ウィンドウとして表示できます。やって別ウィンドウで開くことで、インスペクタでデバッグできるようになります。画面右上にアイコンが追加されているはずです。アイコンをクリックしてポップアップが表示されればテスト成功。あとは拡張機能を完成させていくだけとなります。拡張機能の構築は、ウェブサイトを作るのと同じようにできる印象です。先ほどテストで作ったpopup.htmlからjsやcssを読み込んで機能を作り込んでいきます。今回作ったのはこんなポップアップ拡張機能。chromeの右上に表示されるアイコンをクリックするとポップアップが表示されるポップアップを開くと、「URL」「カテゴリ」「タグ」の入力欄その時閲覧しているページのURLを取得しURL入力欄に自動出力submitボタンが押されたら、入力されたデータをajaxで外部サイト(clink)へデータ送信ajaxで受け取ったデータを外部サイト(clink)側のデータベースに保管ポップアップの内容の作り込みはhtmlとcssで作れば良いので簡単でしたが、今回は外部サイトとの通信が必要なのでその点が若干引っかかりました。}}上記が、今回書いたmanifest.jsonの最終形態。外部サイトとの通信に必要だったのは、manifest.jsonにpermissionsを追加して、通信を許可するサイトを記述すること。*”);」を記述してリクエストを許可する必要もあります。忘れていて若干ハマったり。今回大事だったのが、permissionsのtabs。alert(tab.url);});tabsを許可して、上記のようにjavascriptを書くと、拡張機能を使った時に開いているタブのページのURLを取得できます。詳しい仕様は公式を見てみてください。https://developer.chrome.com/extensions/tabs自作拡張機能をchromeウェブストアで公開するさて、拡張機能が自作できたら、chromeウェブストアで公開して一般ユーザが使えるようにします。注意点としては、拡張機能を登録する際にはデベロッパー登録する必要があり、初回にUS5ドルを支払う必要があります。一般に公開する必要がなく自分で利用するだけなのであれば、テストでおこなったように「パッケージ化されていない拡張機能を読み込む」から利用すればよろしいかと。一般に公開する必要がある方は、下記にお進みくださいまし。ウェブストアへアクセスhttps://chrome.google.com/webstore/category/extensionsログインしてデベロッパーダッシュボードを開きます。デベロッパーダッシュボードのアイテム追加部分の下に、初回はデベロッパー登録手数料が必要との旨が書かれています。支払いボタンがあるのでクリックすると、支払い画面に遷移するので支払いを終えましょう。US5ドルになります。支払いを終えると、「アイテムを公開できるようになりました」と表示されるはずです。「新しいアイテムを追加する」ボタンから登録を進めます。自作した拡張機能のファイル選択画面になります。制作した拡張機能のファイルが入ったディレクトリをzipにし、「ファイルを選択→アップロード」することでアップロードできます。manifest.jsonにエラーがあった場合などはエラーが出力されます。直して改めてアップロードしましょう。アップロードが成功すると、ウェブストアで表示される拡張機能の情報の入力画面になります。アイコンなど含め、足りない部分はmanifest.jsonにも記載し、ファイルをアップロードし直して調整する形になります。必要情報を入力して公開すれば、chromeウェブストアに掲載されます。インストールしてみると、無事に追加されました!アイコンをクリックしてみると無事に動作しているようです。これでウェブストアでの公開は完了。更新時も同じ手順になります。注意点としては、manifest.jsonに記載しているversionは前回よりも高くしないとアップロード時にエラーが出ることくらいでしょうか。まとめもっと色々と面倒かと思いましたが、意外とすんなり作れた拡張機能。chromeウェブストアでの公開も思いの外それほど面倒ではありませんでしたね。遅まきながらですが、拡張機能を利用すれば色々やれそうだなと妄想しております。クライアントが更新するブログ記事です。WordPressの機能で簡単にベーシックな検索はさくっと作れるものの、カスタマイズするとなるとそうもいかず。APIブログ書いてます。ブログ記事を1つ作るにも割と時間がかかるので、忙しくなるとブログの更新が滞ります。写真撮って加工して文章を書いて、記事の形にしたらチェックして......。記事更新に夢中になっていて気付かなかったのですが、過去記事を見直していたらソーシャルボタンのFacebookシェアボタンのカウント数が取得できていないことに気づきました。どの記事を見ても、シェア数は0。前の案件で「建物の緯度経度は所持しているのだけど住所が無い。緯度経度から住所をまとめて取得することは可能?」という話がありました。逆ジオコーディングってやつですね。APIのプッシュメッセージ通数のカウント方法には気をつけよう、という話。LINEを利用しているクライアントが結構多いのです。ウェブサイトやシステムの制作とあわせて、ウェブサイト・システムからのアクションをLI...HTML・CSS・プログラミングffmpegをphpのexecで動かそうとしてハマる動画を色々いじってみたくてffmpegを試しました。インストール系苦手なんです。知識が無いだけなのだけれども、大体ハマる。今回も例にもれず、ややこしくなりました。amp-custom」のCSS構文エラーの修正方法コメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。constraint2019/8/172024/7/1Vue.jsでtoggle機能実装!多箇所で使いたい時の実装方法2019/8/152024/7/1Chromeで「データ侵害によりパスワード情報が漏洩」と警告が!対応方法は?2020/1/82024/7/22refを複数に設定したい...$refsで取得した要素のスタイル操作|Vue.js2019/8/202024/7/1プロフィール仕事関係ではウェブの世界にどっぷり浸かっているが、趣味はアウトドア。(11)新着記事ふらっと秋のタナゴ釣り!1円玉サイズのミニタナゴと遊ぶ2024/10/15夜の秋イカエギングでアオリイカ!初イカをイカ刺しに。WINGにブログを移行してみたら......!2024/9/25友人と海釣りで不発も...ブラックバス釣りで会心の一匹2024/9/20ブラックバス釣ってカンパチ食べて笑った友人来訪初日2024/9/19中華鍋で燻製作り!自家製ベーコン・燻製チーズが適当な作り方でも美味なり。defined.")}))})()タイトルとURLをコピーしました。