サイトのタイトルは document.title で取得できるが、description は一発で取れない(専用の関数が無い)ので、簡単に取得する方法を調べた。
Array.prototype.slice.call(document.head.children).find(t => t.tagName === "META" && t.name === "description") で取れるArray.prototype.slice.call と組み合わせると、Array.prototype のメソッドも使えるtagName や name などを変更すると、他のタグも一撃で取れるはずArray.from(document.head.children).find(t => t.tagName === "META" && t.name === "description") でも良いArray.from は IE 非対応なので注意Chrome 拡張機能を React などで構成された SPA で動作させる方法 で、background から JS を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。
chrome.runtime.onMessage.addListener を使ってメッセージを待つchrome.tabs.sendMessage を使ってメッセージを送るchrome.tabs.onUpdated.addListener でタブの更新の検出や URL の絞り込みを行うとあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。
リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。
続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する
chrome.tabs.onUpdated.addListener でページ遷移を検知chrome.tabs.executeScript で JS を注入docs 配下を対象にした GitHub Pages を、検索エンジンにクロールしてもらうために調べたことを整理した。
ちなみにターゲットは以下のサイト。
docs に _config.yml を配置docs に googleXXXX.html を配置public に配置してビルドOGP の設定について調べたので簡単にメモ。
調べる前は「面倒くさそう」と思ってたけど、ちゃんと見たら大したこと無かった。
<head> に prefix を付与<meta property="og:xxx" content="xxx> で各要素を指定<meta name="twitter:xxx" content="xxx"> で指定<meta property="fb:xxx" content="xxx"> で指定Chrome 拡張機能で CSV ファイルを生成してダウンロードする方法について整理した。
ほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り
new Blob でオブジェクトを生成createObjectURL で URL に変換<a href="..." download="hoge.csv"> でダウンロードVue CLI + Vue Router で作成したプロジェクトを GitHub Pages で公開する方法についてまとめた。
vue create 時点で Vue Router を使う設定にしておくと楽vue.config.js でビルドファイルの出力先などを設定Twitterデータの tweet.js を読み込んで全ツイート履歴を表示するツール「tweet.js loader」の紹介 で作った tweet.js loader の技術面について整理した。
OSS の CSS Framework Bulma を使って、メルカリ風のレスポンシブなデザインを構築する方法について整理した。
「メルカリ風のレスポンシブなデザイン」というのは、
というような構成を意味している。
is-hidden-mobile クラスを付与するis-hidden-tablet クラスを付与するis-hidden-mobile をトグル(On/Off)するcolumns + column + is-<n>-<device> で調整する
