一覧修整と、モバイル対応と
さて、自動栞が実装されてしばらくたちますが、その際に一覧の様式が修正されたのに、対応していないままでした。色変えは機能しているのですが、既読非表示が機能していなかったので、モバイル対応がてら修正しました。
contents.jsを以下に修整。
----------
let lis = document.querySelectorAll("ul.c-up-panel__list li");
for (let i = 0; i < lis.length; i++) {
const li = lis[i];
if (li.querySelector("div.c-button[disabled]") != null) {
li.style.display = "none";
continue;
}
const countTag = li.querySelector("span.p-up-bookmark-item__unread-num");
if (countTag == null)
continue;
const unread_count = countTag.innerText.trim();
const button = li.querySelector("a.c-button--primary");
if (unread_count == 1) {
}
else if (unread_count <= 3) {
button.style.backgroundColor = "green";
}
else if (unread_count <= 10) {
button.style.backgroundColor = "yellow";
}
else {
button.style.backgroundColor = "brown";
}
}
----------
liのリストアップ条件を緩和。非表示の判定を修正。また緩和によって栞未設定項目もリストアップされてしまうので、こちらがエラーにならないように判定を追加。という感じです。
さて、本題のモバイルでの拡張機能の対応について。
拡張機能は、デスクトップのChromeはもちろん、Edgeでも読み込んで動かす事が出来ます。しかし、モバイルのChromeは拡張機能に対応していません。Edgeでの対応可能性はかつて語りましたが、現状でEdgeのCanary版(鉱山のカナリヤ、要するにテスト版)では、拡張機能を使用することができ、この一覧処理も動かす事が出来ました。
EdgeのCanary版はAndroidではストアから提供されています。多分、iOSでは提供されていないです。なので、iPhoneでは正式に拡張機能がEdgeに取り込まれるまで待つ必要があるでしょう。
ストアに公開していれば、IDからインストールすることもできますが、そうでない場合にはcrxファイルを作成して読み込むことになります。
crxは拡張機能の全ファイルをパッケージ化したものです。デスクトップChrome/Edgeの拡張機能の管理画面でパッケージ化のリンクを実行すると、パッケージをする(つまり読み込んだ拡張機能の)フォルダを選択するようになります。フォルダを選択すれば(キーはブランクのまま)、そのフォルダに親フォルダにcrxファイルとpemファイルが作成されます。次回以降更新する場合には、このpemファイルをキーとして指定します。
crxファイルは、OneDriveなどのAndroid共有環境にあげておきます。
次に、googleストアから、EdgeCanary版をインストールします。起動後、edge://flagsにアクセスし、「Extensions on edge:// URLs」を有効にします。extensionsでフィルタかけて探すのが吉。
これが済んだら、Edgeを再起動して、次にハンバーガーメニューから設定。Microsoft Edgeについて、を選択し、その後下部のEdge Canary+ビルド番号の部分を沢山タップすると、開発者オプションが有効になります。
再度、ハンバーガーメニューの設定から開発者オプションを選択し、Extension install by crxを選択。Choose .crx fileでcrxファイルを選択(OneDriveなどの共有も参照できる)、OKを押すと拡張機能がインストールできます。
というわけで、モバイルでも
みたいに拡張機能を動作させることが出来るようになりました(まあわかりにくいですが、未読の多いものは赤で表示し、未読が無いものは表示自体を抑制しています)。
と言う訳で、次は自動栞の動作を修正できるようにしないと。
