dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

Amazonの商品ページの情報をkintoneに登録するChrome拡張

を作りました。

https://chrome.google.com/webstore/detail/amazon-to-kintone/leipfhjipgnfbdjkbinlmlmfdhgcakki からインストールできます。

アイコン未登録だったりコードがぐちゃぐちゃだったりしますが、とりあえず自分が使うための要件は満たせたので一区切り。


キャプチャ

f:id:dackdive:20190520192441p:plain

商品のタイトル、商品ページのURL、画像URLをkintoneの任意のアプリにレコード登録するだけのChrome拡張です。


モチベーション

kintone の勉強がてら、読みたい/読んだ本の記録を kintone でやっています
気になった本はたいていAmazonで検索してkintoneに登録してたんですが、それを1クリックでできるようにしたかった、というのがきっかけ。

また、技術的にもこのへんを試したかったというのもあります。

  • TypeScript で Chrome 拡張を書く
  • React Hooks
  • (未) styled-components

スタイルについてはせっかくなので kintone-ui-component 使って kintone ライクなUIにしようと考えていたけど
もろもろ断念して SalesforceLightning Design System になった。


技術的なメモ

TypeScript

chrome.*** 系のAPIに対する TypeScript の型定義は @types/chrome が利用できる。
Chrome拡張書くときのボイラープレート的なものは今回でだいぶ学べた。

また、 chrome.*** APIを Promise で書けるようにしつつブラウザ間の差異を吸収した webextension-polyfill というのもある。
今回は使わなかったけど興味あるのでリファクタしたい。


Chrome 拡張 ( chrome.*** API まわり)

すごい単純なChrome拡張だったのでPopupのみでいけるかなーと思ってたんだけど、PopupからはページのDOMを触れない。
content scirptを追加してあげる必要がある。

また、content scriptとPopup間のやり取りは chrome.tabs.sendMessage() および chrome.runtime.onMessage.addListener() を使ったメッセージング機能を利用することになる。

// メッセージ送信側
chrome.tabs.sendMessage(props.tabId, { /* パラメータ */ }, response => {
  // 受信側からのレスポンスが返ってきた後の処理
});
// メッセージ受信側
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // もろもろ処理
  sendResponse(/* レスポンス */);
});

sendRequest() は deprecated
https://developer.chrome.com/extensions/tabs#method-sendRequest


React Hooks

今回は useState, useEffect しか使ってない。
慣れるまで少し時間がかかったけど、関心ごとに処理をまとめられるようになるのでたしかに読みやすいかも、と思った。

使わなかったものだとカスタムフック は興味あるのと useContext あたりは便利だという話を聞くので、ドキュメント読みたい。


リファレンス