「Chrome」の記事 - Crieit

(Chrome拡張機能) navigator.clipboard を利用したクリップボードへの貼り付けが httpサイトでは失敗する

2022-01-04T23:14:56+09:00

先日作成した Chrome拡張機能が httpサイトでは上手く動かないことに気付いたので修正しました。

経緯

早速作成した Chrome拡張機能を運用し始めたのですが、一部のサイトでは次のエラーを出力して上手く動かないことが分かりました。

Unchecked runtime.lastError: The message port closed before a response was received.

原因

いくつかのサイトを試験した結果、 httpサイトではこのエラーが出力されることが分かりました。

そこで調べてみると……

WebExtension の場合、clipboardRead や clipboardWrite パーミッションを要求することで clipboard.readText() や clipboard.writeText() を使うことができます。HTTPサイトに適用されたコンテンツスクリプトは、Clipboard オブジェクトにアクセスすることはできません。

Clipboard - Web API | MDN

ビンゴ。 httpサイトの Content Script では navigator.clipboard へアクセスできないようです。

対処

navigator.clipboard へアクセスできないとなると、手っ取り早いのは document.execCommand('copy') によるクリップぼ度貼り付けです。

今回は httpサイトという基本レガシーと想定される環境への対処なので、 document.execCommand('copy') で妥協しておきますかね……という感じです。

chain.js

-            chrome.tabs.sendMessage(tab.id, clipText, function(response) {
-                console.log(response.value);
+            chrome.tabs.sendMessage(
+                tab.id,
+                {
+                    text: clipText,
+                    url: tab.url,
+                },
+                function(response) {
+                    console.log(response.value);

chrome.tabs.sendMessage() の第二引数は元はシンプルにクリップボードに貼り付けたいテキストを投げていましたが、今回は http:// か https:// かの判定をしたかったのでURLのみのシンプルなテキストも送ることにしました。そこで、Stringだった引数をObjectに変更。

smith.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
     // メッセージとして送信されたクリップボードに貼り付けたいテキストをそのままレスポンスに設定して返却
-    navigator.clipboard.writeText(request);
+    if(request.url.toLowerCase().startsWith('https://')) {
+        navigator.clipboard.writeText(request.text);
+    }
+    else {
+        const inputID = 'chromeExtension-emeraldIsle-clipText';
+        console.log(document.querySelector(`#${inputID}`))
+        if(document.querySelector(`#${inputID}`) === null) {
+            const $input = document.createElement('input');
+            $input.setAttribute('type', 'text');
+            $input.setAttribute('id', inputID);
+            $input.setAttribute('style', 'position: absolute; left: -100vw; top: 0');
+            document.body.appendChild($input);
+        }
+        const $inputDom = document.querySelector(`#${inputID}`);
+        $inputDom.value = request.text;
+        $inputDom.select();
+        document.execCommand('copy');
+    }
     sendResponse({
-        value: request,
+        value: request.text,
     });
+    return true;
 });

content Scripts 側を大改造。元々は navigator.clipboard.writeText(request); のみのシンプルな内容でしたが、次のように処理を変更。

URLに https:// (大文字小文字区別せず) で始まるかどうかを判定
始まるならば今まで通りの navigator.clipboard.writeText(request.text); で貼り付け
始まらないならば次の処理を実行
- もし指定したIDの要素が存在しないならば
  - ID付与、画面外領域に input要素を追加
- 再度指定したIDの input要素を取得、値にクリップボードに貼り付けたいリンク文字列をセット
- document.execCommand('copy') でクリップボードにコピー

これで httpサイトでもリンク文字列をクリップボードに貼り付けられるようになりました。

参考

Unchecked runtime.lastError: The message port closed before a response was received.

JavaScript

any だった。

(未使用) html-loader

一瞬 Background Page を作ってそのテキストボックスにいったん貼り付けて、その値を取得する方法を考えました。

今回 Webpack 使用だったので html-loader 案件か、と思いましたが、回避しました。

(Chrome拡張機能) 右クリックのメニューから現在開いているタブのタイトルとURLをクリップボードに貼り付ける

2022-01-03T23:28:12+09:00

よんどころなき事情により、新年早々に Chrome拡張機能を作成してみました。

経緯

(Chrome拡張機能) Create Link の挙動が不安定の記事に書いた通り、 Chrome拡張機能の Create Link - Chromeウェブストアが挙動不安定になってしまいました。

ブログを書く際に参考記事をリストアップしたり、自分の活動にはこの機能はなくてはならないのでそれがままならないというのは不便極まりない。

そこで、代替となる Chrome拡張機能を自作してみることにしました。

機能

Create Link の代替を想定したため、機能はこれに準じます。

ただし、貼り付けるコードのカスタマイズの必要はない (プレーン、HTML、Markdown の3種があれば充分) ので設定画面等の自前でカスタマイズできる機能は全てオミット。

ページを開いている状態で右クリックして、コンテキストメニューから上述3種の形式でリンクをクリップボードに貼り付けられれば良いです。

コード(要点)

manifest.json

{
    "manifest_version": 2,
    "name": "emerald-isle",
    "description": "Make link text of open page.",
    "version": "0.0.1",
    "background": {
        "scripts": [
            "dist/chain.js"
        ],
        "persistent": false
    },
    "content_scripts": [
        {
            "matches": [
                "*://*/*"
            ],
            "js": [
                "dist/smith.js"
            ]
        }
    ],
    "permissions": [
        "tabs",
        "activeTab",
        "clipboardWrite",
        "contextMenus"
    ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "icons": {
        "48": "assets/icon_48.png",
        "128": "assets/icon_128.png"
    }
}

特筆すべき事項はあまりないですが

Chrome拡張機能から IE を開く等の実績から、幾分か触り慣れているバージョンの2を選択
permissions はタブ、クリップボードへの書き込み、右クリックメニュー(コンテキストメニュー)等
後述しますが、クリップボードへの貼り付けは Background Scripts(Event Scripts) からアクセスはできずに Content Scripts に持ち込む必要があったため、2つのスクリプトに分かれています (結果、 background, content_scripts の2つのフィールドが存在)
- content_scripts を実行させるURLは全てのURLで良いので *://*/* 指定 (matches フィールド)

といったところでしょうか。

chain.js (Background / Event Scripts)

import { mdLink } from "markdown-function"

/**
 * grace_O_Malley       : Grace O'Malley / titleタグ 文字列のエスケープ
 *
 * @param {string} text : 開いているタブの titleタグ の中身の文字列
 * @param {string} url  : 開いているタブの URL の文字列
 *
 * @returns {string}    : Markdown 記法をエスケープした Markdown 形式のリンク
 */
const grace_O_Malley = (text, url) => {
    return mdLink({
        text: text,
        url: url,
    });
};
/**
 * brianBoru_s_March : Brian Boru's March / メイン処理
 *
 * @returns {void}
 */
const brianBoru_s_March = () => {
    chrome.runtime.onInstalled.addListener(() => {
        chrome.contextMenus.create({
            type: 'normal',
            id: 'CahirCastle',
            title: 'Emerald Isle',
            contexts: [
                'all'
            ],
        });
        chrome.contextMenus.create({
            type: 'normal',
            id: 'plain',
            parentId: 'CahirCastle',
            title: 'Plain Text',
            contexts: [
                'all'
            ],
        });
        chrome.contextMenus.create({
            type: 'normal',
            id: 'html',
            parentId: 'CahirCastle',
            title: 'HTML',
            contexts: [
                'all'
            ],
        });
        chrome.contextMenus.create({
            type: 'normal',
            id: 'md',
            parentId: 'CahirCastle',
            title: 'Markdown',
            contexts: [
                'all'
            ],
        });
    });
    chrome.contextMenus.onClicked.addListener(function(item){
        chrome.tabs.getSelected((tab) => {
            // 現在のタブ
            let clipText = '';
            // クリックされたメニューに応じてテキストを組み立て
            switch (item.menuItemId) {
                case 'plain':
                    clipText = `${tab.title} - ${tab.url}`;
                    break;
                case 'html':
                    clipText = `${tab.title}`;
                    break;
                case 'md':
                    clipText = grace_O_Malley(tab.title, tab.url);
                    break;
                default:
                    break;
            }
            chrome.tabs.sendMessage(tab.id, clipText, function(response) {
                console.log(response.value);
            });
        });
    });
};

document.addEventListener('DOMContentLoaded', brianBoru_s_March());

chrome.contextMenus.create() でコンテキストメニューの中身を作成
chrome.contextMenus.onClicked.addListener() にコンテキストメニューがクリックされた場合の処理を記述
- コンテキストメニューの各項目に記述した id の値で条件分岐してプレーン,HTML,Markdownの3種のリンクのテキストを生成
- Markdown 形式に関してはブラケットや括弧をエスケープ処理したかったので、markdown-functionを利用させていただきました
軽く先述した通り、 Background Scripts (Event Scripts) からはクリップボードへのアクセス権限がないため、このスクリプトの中で navigator.clipboard.writeText() を発動させようとしても失敗してしまいます (Uncaught (in promise) DOMException: Document is not focused. というエラー文が出力される)
- かといってクリップボードへ貼り付ける系の記事で散見された Document.execCommand はDOMの指定が必要でこれも Content Scripts 側の動作と思われる上、Document.execCommand() - Web API | MDNに 非推奨: この機能は非推奨になりました。 と記載されているため、今からこの方法を採用するのは得策ではないと判断しました
  - しかも開いているタブにフォーカスが当たっている必要がありますが、document.querySelector('document').focus(); 等としても Background Scripts からDOM指定をすると Background Scripts に紐付けられた Background Page を拾ってしまうので実際に開いているタブのDOMは拾えずにエラーとなる
- Clipboard.js もインスタンス化の際にDOM指定が必要なのでこれも没
- 色々調べた結果、 Content Scripts へ経由させる必要がありそうなことが分かったため chrome.tabs.sendMessage() でクリップボードへ貼り付けたいテキストを request としてメッセージ送信で投げることにしました

ちなみに markdown-function 使用のため Webpack を使用しました。

smith.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // メッセージとして送信されたクリップボードに貼り付けたいテキストをそのままレスポンスに設定して返却
    navigator.clipboard.writeText(request);
    sendResponse({
        value: request,
    });
});

ということで、上述した通り Background Scripts (Event Scripts) から投げられたメッセージを受け取って navigator.clipboard.writeText() でクリップボードに貼り付ける側のコード。こちらは述べた通りの役割のみなのでシンプルです。

お作法として元の Background Scripts (Event Scripts) にレスポンスを返す形になるので、 request で投げられたものをそのまま返しています (返却後も console.log() しているだけですが)。

これで望む動作の Chrome拡張機能を作ることができました。

一度 Background Scripts (Event Scripts) と Content Scripts の違いや権限周りを履修していたのでそこそこスムーズに進めることができたと思います。

(余談) 名前の由来

毎度恒例の名前について。

今回はリンクを生成するということで鎖を連想しました。

で、色々調べたところ

伝説のアイルランド : Ireland Of Legend and Lore ～陸上自衛隊中央音楽隊 - YouTube

鎖を楽器として使用する吹奏楽の楽曲があることを知りました。冒頭部で本当に鎖を落として音を出していますね……。

この楽曲に着想を得てアイルランドの俗称である「エメラルドの島 (Emerald Isle)」としました。

各種関数やファイル名もこれに関連したものからチョイス。

参考

Content Scirpts, Background Script (Event Scripts)

権限

v2: Declare permissions - Chrome Developers
- v3: Declare permissions - Chrome Developers

(未使用) その他の clipboard

chrome-extensions-samples\/textinput.js at e716678b67fd30a5876a552b9665e9f847d6d84b · GoogleChrome\/chrome-extensions-samples

入れるとすぐWebページの音声コンテンツをテキスト化？おすすめGoogle Chrome拡張機能「Notta Audio Clipper」の活用方

2021-11-10T13:33:47+09:00

元記事：https://www.notta.ai/blog/notta-audio-clipper-extension-guide

Notta Audio Clipperとは？

AI音声認識文字起こしサービス「Notta」の新しいChrome拡張機能は、Webページの音声をリアルタイムで録音し、文字起こしすることができます。文字起こし結果はNottaアカウントに保存し、どの端末でも確認できます。Web会議（Zoom、Google Meetなど）やYouTube動画の字幕起こし、在宅テープ起こし、お気に入りのポッドキャストの保存など、手作業による文字起こしの手間が省け、作業効率が大幅UP！

‍

前提条件

Google Chromeブラウザ
Notta Audio Clipper拡張機能 Chromeウェブストア>>
Notta アカウント新規登録はこちら
‍

Notta拡張機能をchromeに追加

‍

Chromeのウェブストアの画面上部にある検索窓に「Notta」を入力して検索ください。画面の右上にある「Chromeに追加」ボタンをクリックして、拡張機能ブラウザに追加します。

‍

‍

追加した後、Chrome アドレスバーの横にある「拡張機能アイコン」をクリックください。「画びょう」アイコンをクリックと、ブラウザのツールバーに拡張機能が固定されます。

シークレットモードでも拡張機能を有効にしたいの場合、設定方法は簡単です。設定メニューを開く、「拡張機能」を選択したら、インストールされている拡張機能の一覧が表示されます。Notta拡張機能の「詳細」をクリックください。

‍

詳細場面で「シークレットモードでの実行を許可する」をONにします。

‍

再び読み込みすると、Notta Audio Clipper拡張機能がシークレットモードでも有効になります。

準備完了！YouTube動画を文字起こししましょう

‍

音声コンテンツを文字変換したいウェブページを開き、Nottaのロゴマークをクリックします。

「このページの録音を開始します」ボタンをクリックすれば、流れている音声をレコードしはじめます。一度に5新規タブまで同時に録音することが可能です。

‍

録音が終了後、「終了」ボタンをクリックします。

Notta Web版で文字起こし結果をチェック・編集

‍

データはNottaアカウントに保存されます。 Notta Web版に登録すると、録音を確認したり、文字起こし結果を編集したり、メモ・画像を挿入したりすることができます。

音声、テキストデータそれぞれの導出も可能です。また、データは複数デバイスにも同期するため、携帯やほかの端末にて随時振り返れます。

Nottaは無料体験できますので、試してみましょう。
‍
‍Web版
‍Google ChromeやMicrosoft EdgeブラウザからWeb版をアクセス
‍
‍Chrome拡張機能
‍Chrome web storeからNotta拡張機能を追加
‍
‍アプリ版‍
iOSアプリはApp Storeからダウンロード
AndroidアプリはGoogle Playからダウンロード

10年ぶりにFirefoxを3ヶ月ほどメインにした所感

2021-06-19T19:16:24+09:00

ここ10年ほど、僕はずっとGoogle Chromeを使っていた。正直Chrome最強だと思う。Chrome最強だと思うんだが、どういうわけなのか、僕のMacではやたらとCPUを使ってくれて、ただでさえ爆熱のMac mini 2018を目玉焼きでも焼けそうなほどに熱してくれる。MacBook Pro 2019でも同様だ。Windowsのマシンではそういうことはなかったので、Macとの相性問題もあったりするんだろうか。それとも何かエクステンションが悪さしているのか。

Firefoxを使い始める

わからないが、もうずっと爆熱が続いて全然なおらないので、ついに僕はChromeをメインにすることをやめて、Firefoxを使い始めた。それが今年の3月のことだ。

Firefoxをメインにするのは、10年ぶりくらいだろうか。僕の中ではFirefoxは今なお3.5だったのだが、もうバージョン90になっている。おかげで軽くタイムスリップしたような気分になれた。

さて、久方ぶりのFirefoxだが、けっこうすんなりと移行することができた。まぁもともと使っていたしね。

以下に、Firefox移行後の所感について書く。

爆熱は微妙におさまった

まずChromeからの移行のきっかけとなった爆熱についてだが、これは微妙におさまった。微妙にというのは、Firefoxも立ち上げてしばらくすると、やはりCPUをぶん回し始める現象が起きたからだ。

しかし、ウィンドウを閉じるとおさまるので、プロセスを終了しないと暴走がおさまらなかったChromeに比べるとマシだ。また、Chromeは起動してすぐくらいの勢いで暴走を初めていたが、Firefoxについては長時間起動していると、という感じなので、まぁいいかなという感じ。

ブックマーク、パスワードの同期

次に同期の問題。

まず、パスワード同期については僕はBitwardenを利用しており、BitwardenはFirefox用のエクステンションも提供しているから、その点は問題ない。

ただ、Android用のFirefoxブラウザにおいては、パスワード欄をタップした時のBitwarden連携が不安定で、出たり出なかったり、出たとしても一瞬で消えたり、ということが頻発してちょっと苛々する。iOS用Firefoxではそういう問題は起きない（まぁキーボードにパスワードマネージャの立ち上げがくっついてる形なので）。

ブックマーク同期については、昔はそれ用のソフトを使っていた（具体的には確かXmarksだ、もうサービス終了している）が、今はブラウザの同期機能を利用しているため、Firefox Syncの世話になった。これは普通に使えたのだが、職場ではproxy経由の時に問題があるのか、使えなかった。うーん？まぁいいけど。

それにしても、今ってクロスブラウザを前提にしたブックマーク同期アプリってあるのかな。ここしばらくChrome一強時代が続いているから、ちょっと厳しいよね。

パフォーマンス

パフォーマンスについては、正直体感ではあまり差がない。その昔は明らかにChromeのほうが快適で、まぁそのためにChromeは天下を取ったとも言えるのだが、今はそんなこともないようだ。

画面の崩れ

ほとんどない。今どきのモダンブラウザで表示が問題になることはないようだ。IEを使っている人は税金払ってほしい。

あ、そういえば職場のクソアプリが、Chromeだといつもレイアウトが崩れていたんだけれど、Firefoxだと崩れなくなった。

エクステンション

PCでWebブラウジングする魅力は、なんといってもフルブラウザ、というか豊富なエクステンションだろう。Amazonの商品の金額遷移を表示するKeepa、タイトルとURLをコピーするシンプルながら使い勝手の良いCreateLink、複数リンクを同時に開くLinkclump、Google検索からゴミサイトを排除するゴシップブロッカーなど、愛用しているエクステンションはいくつかある。

で、調べてみるとだいたいFirefoxに対応しているか、あるいはFirefoxで使える代替えとなるエクステンションがあったので、これも問題がなかった。ただもちろん、人によっては諦めなければならない機能はあるだろう。

とはいえ、大昔野良エクステンションが跋扈していた時代に比べると、随分と環境が整備されたのだなぁと思う。

スマホの検索窓など画面下部に

細かいのだが、いいなぁと思ったのはスマホのFirefoxだと検索窓を画面下部にすることができるところだった。

これは楽天Bigのスクリーンショットだ。楽天Bigはクソデカイので、検索するには少しばかり親指をダルシムのごとく伸ばす必要があるのだが、画面下部にあればホビット族の血を受け継ぐ僕も楽々検索することが可能だ。これは地味ながら嬉しいユーザー体験だった。

既に開いているタブ一覧なども、Chromeがやたらと親指の限界を試すのに比べて、Firefoxは軽く伸ばせば届くところがタップ範囲で、非常に好ましく思えた。

タブをウィンドウから移動させた時の挙動が不満

これまた地味だが、PCでタブを別ウィンドウに移動させた時、期待する動作はマウスポインタの場所あたりに新たなウィンドウを開いてタブが移動することだが、どうもそうならない。これがMac版故なのかどうかはわからないが、あまり直感的ではない。まぁ大した問題ではないのだが、ちょっとイラッとする。

マルチユーザーだとちょっと使いづらかった

Firefoxでマルチユーザーっぽく使おうと思ったら、ユーザーごとにprofileを作成し、都度切り替えていくことになると思うが、どうも使いづらい。

たとえば他アプリからURLをクリックしてFirefoxに飛ぶ時、Chromeだと最後に開いていたユーザーのウィンドウで開くが、Firefoxだと必ずデフォルトのprofileで開かれてしまう。

また、Firefoxを起動した時に最初に開かれるのがデフォルトユーザーではなくなることもちょくちょくあり、まぁOS再起動などすればなおるのだが、どうにもprofile周りは挙動が若干不安定に思えた。

そもそもabout:profilesを毎度入力するのがイケてないように思うが、他にいいやり方があるんだろうか……。

まぁでも、少し特殊な使い方だとは思う。

総評

ということで、Firefoxを3ヶ月ほどメインにした結果、十分に使えるものだということがわかった。

わかったが、しかしFirefoxでなければならない積極的な理由も特にはなく、恐らく多くの人にとってFirefoxを使う一番のモチベーションは「Chromeを使いたくない」になってしまうのではないだろうか。

まぁでも、それは案外バカにできない理由かもしれない。僕のChrome熱暴走問題は恐らくおまかんなのだが、おまかんと言われても僕の環境で起きている以上僕にとっては大きな問題であって、ブラウザを変えるだけで解決できるならそうしてしまいたいし、事象が異なるだけでブラウザを変えたい気持ちになっている人は、何も宗教上の理由がなくてもけっこういるであろう。

まぁもちろんChrome以外というだけなら他にも選択肢があるんだが、「結局WebKitじゃねぇか」みたいなものが多い中で、Firefoxの「Geckoですけど？」はひときわ輝いてみえる（個人の感想です）し、昔からクロスOSでやってきている信頼感もある。

ということで、Firefox悪くないんじゃないの、と言いながら、実はこの記事はBrave上で書いてます。結局WebKitじゃねぇか。いやBlinkです。使えればなんでもいいよ。はい。

Chrome 91 で 10080ポートがブロックされる (ERR_UNSAFE_PORT)

2021-06-03T20:00:44+09:00

Chrome でとあるサイトを開こうとしたら ERR_UNSAFE_PORT のエラーでブロックされてしまったので対処。

経緯

Chrome でとあるサイトを開こうとしたら以下の画面が表示されました。

このサイトにアクセスできません http://example.jp:10080/ のウェブページは一時的に停止しているか、新しいウェブアドレスに移動した可能性があります。

ERR_UNSAFE_PORT

先週は開けたのに……。

ちなみに Chrome のバージョンは 91.0.4472.77 。アップデートして現状最新版です。

仮対処 (没)

対処として該当サイトを許可リストに加えます。

「プライバシーとセキュリティ」→「サイトの設定」

「その他のコンテンツの設定」

「安全でないコンテンツ」

「許可」リストに「追加」

「サイトの追加」で該当サイトのドメインとポート (例: example.jp:10080/ ) を入力し、追加します。

これで Chrome を再起動すると、閲覧できるようになりました。

仮対処2 (没・失敗)

Chrome が怒られたということは、 Edge も怒られるということになります。

バージョン 91.0.864.37 で同様にアクセスしたところ、以下の表示になりやはり接続できませんでした。

申し訳ございません。このページに到達できません http://example.jp:10080/ の Web ページに問題が発生しているか、新しい Web アドレスに完全に移動された可能性があります。

ERR_UNSAFE_PORT

文言が多少変わっていますが、エラーの内容としては同じです。

「Cookie とサイトのアクセス許可」→「セキュリティで保護されていないコンテンツ」

「許可」リストにサイトを追加

これで Edge も再起動してアクセスしてみましたが……改善されませんでした。

cannot open local link in edge after last windows update - Microsoft Community

一応、アプリ起動時のショートカットアイコン等でパラメータに --explicitly-allowed-ports=10080 のような形で追記してあげると回避できるようですが、これを行うとショートカットを誤って消したときなどに今回の対処を忘れて嵌まりそうなので没。

調査・対処

以前 Firefox でも同じ現象が発生したことを思い出し、調べてみました。

Web Application開発に10080番ポートは使ってはいけない
- NAT Slipstreaming攻撃とブラウザ側の対策 - ASnoKaze blog
- NAT Slipstreaming v2 攻撃とブラウザ側の対策 - ASnoKaze blog

今回の対処は NAT Slipstreaming v2 と呼ばれる攻撃で 10080ポートが使用されるため、ブラウザ側で攻撃を防ぐためにブロックした、という流れのようです。

そうであれば、「ブラウザにアクセスを許可するように登録」するよりも、サーバのポート番号を変更した方が良さそうです。

そこで、最終的には上述の仮対処はやめて、サーバの Listenポートを変更する方向で対処しました。

以前の記事の Firefox の network.security.ports.banned.override の設定も削除しました。

参考

Github Actions のバッジを付ける (＋バッジに Github Actions ページへのリンクを付与するChrome拡張機能を作成)

2021-01-06T23:45:20+09:00

前回記事の続き。 Github Actions で PHPUnit が走ることが確認できたところで、今度は「そういえば Github Actions のバッジはあるのだろうか？」と気になって調べてみました。

バッジの所在

バッジについては Github Actions のページにありました。

リポジトリの対象アクション ( https://github.com///actions? ) に遷移
上のハンバーガー( … ) からメニューを開く
Create status badge をクリック

以上の手順で発行できます。

メニュー展開時。

ダイアログ表示。

バッジを readme.md に貼り付けてみました。

バッジのリンクを変更する Chrome拡張機能

ところで、

GitHub Actionsのバッジをリンク付きでREADMEに追加する - Qiita

こちらの記事で「デフォルトのバッジ画像の Markdownコードは画像のみとなっていて対象の Github Actions へのリンクにはなっていないのが不便」とありました。確かに……。

上記の記事では UserScript で該当の Markdownコードを書き換える方法を紹介していましたが、個人的には Chrome拡張機能で充分な気がしたのでざっくり自前で作ってみました。

リポジトリ

arm-band/chrome_extensions_cambadge

manifest.json

{
    "manifest_version": 2,
    "name": "cambadge",
    "description": "Github Actions のバッジのURLを変更する拡張機能です。",
    "version": "0.0.1",
    "browser_action": {
        "default_icon": {
            "19": "icon_19.png",
            "38": "icon_38.png"
        },
        "default_title": "cambadge"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "content_scripts": [
        {
            "matches": [
                "https://github.com/*"
            ],
            "js": [
                "main.js"
            ]
        }
    ]
}

main.js

/**
 * cambadgeCampaign: rewrite markdown code in textarea
 *
 * @param {object} DOMBadgeMd
 */
const cambadgeCampaign = (DOMBadgeMd) => {
    if (/^\!\[(.*)\]\((.*)\)$/gi.test(DOMBadgeMd.textContent)) {
        DOMBadgeMd.textContent = `[${DOMBadgeMd.textContent}](${location.href})`;
    }
};

window.addEventListener('load', (e) => {
    // triggered load
    if (/https:\/\/github\.com\/(.*)actions(.*)/gi.test(location.href)) {
        // only github actions page
        const clickItem = document.querySelector('summary[data-test-selector="badge-builder-button"]');
        clickItem.addEventListener('click', (ev) => {
            // triggered click of element:summary[data-test-selector="badge-builder-button"]
            let setIntervalId;
            let DOMBadgeMd;
            function findTargetElement () {
                // watch until find element:#badge-markdown
                DOMBadgeMd = document.querySelector('#badge-markdown');
                if (DOMBadgeMd !== null && DOMBadgeMd !== undefined) {
                    // found
                    clearInterval(setIntervalId);

                    // call function
                    cambadgeCampaign(DOMBadgeMd);
                }
            };
            setIntervalId = setInterval(findTargetElement, 100);
        });
    }
});

ダイアログ中の #badge-markdown を含むバッジ生成の要素は Create status badge をクリックした際に生成されるようなので、 Create status badge をクリックした後、 #badge-markdown が見付かるまで書き換えの処理を待つようにしました。

Chrome拡張機能で書き換えられたダイアログ。これで該当の Github Actions ページへのリンクに繋がるようになりました。

参考

バッジ

バッジのリンクを変更する

GitHub Actionsのバッジをリンク付きでREADMEに追加する - Qiita

UserScript

UserScriptで業務改善

続・ブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？

2020-07-15T21:42:59+09:00

かなり雑な考察ですのでご注意ください。

今は昔

かつてブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？という記事を書いたのですが。
こちら、タイトルが疑問文であることからもわかる通り、単なる疑問を書き殴った記事で、解決していません。
ですが、私が書いた他の記事の3倍、4倍ものアクセスがあり、心苦しいというか、「なんだよ、結局わからなかったじゃねえかよ、XXX」みたいに思われてるんだろうなあ、みたいな被害妄想をする日々でして。
なので、もう少しだけ頑張ってみようと思います。

先に結論（推測）

もはやchromeにデフォルトエンコードというものはない。（たぶん）
何もエンコードに関する指定がない場合に採用されるのは、自動判別の結果（の内のどれか）である。判別できなかったらデフォルトエンコードになる、みたいな挙動ではない。（おそらく）
ぶっちゃけ、ちゃんとWEBサイトを作っていれば直面しない問題なので、わかってもあまり意味はない

とりあえず

もぎゃさんの提示してくれたソースを読もうと思ったんですけど……。
なんだろう、これ。C++かな？僕、C++やったことないんだよねえ……。
これを機に覚えるというのも手ですが、正直そこまでの気力も時間もないし、機というほどのものでもないし、いきなりこのコードを読むのは辛いので、エンジニアらしからぬ感じで調べていこうと思います。

とりあえず、ソースを落としてきます。
で、調べます。
状況としては、「UTF-8になって欲しいものがShift_JISになってしまっている」ということなので、Shift_JISでgrepかけます。
馬鹿みたいで、期待薄ですが、とりあえずかけます。
VSCodeとか駆使しても良いですが、C++の拡張とかよくわからないので原始的にいきます。

$ grep -Ir Shift_JIS .
./platform/text/TextEncodingDetector.cpp:    // a child frame in Shift_JIS and both frames do NOT specify the encoding
./wtf/text/TextCodecICU.cpp:    registrar("shift-jis", "Shift_JIS");

……お？
下のはshift-jisを正しくShift_JISにしている感じ？　ちょっと関係なさそう。
では、上のを見てみますか。TextEncodingDetectorなんて、いかにもそれっぽいじゃないですか。見るとなんか、コメントっぽいですね。

    // If no match is found so far, just pick the top match.
    // This can happen, say, when a parent frame in EUC-JP refers to
    // a child frame in Shift_JIS and both frames do NOT specify the encoding
    // making us resort to auto-detection (when it IS turned on).
    if (!encoding && matchesCount > 0)
        encoding = ucsdet_getName(matches[0], &status);

とりあえずGoogle翻訳にかけます。
これまでに一致するものが見つからない場合は、一番上の一致を選択します。
これは、たとえばEUC-JPの親フレームが
Shift_JISの子フレームで、両方のフレームでエンコードが指定されていない
自動検出機能がオンになっている場合。
ふむふむ。たぶん、「一番上」ってのは

matches[0]

のことでしょう。では、matchesを入れてるのはというと、ちょい上に

const UCharsetMatch** matches = ucsdet_detectAll(detector, &matchesCount, &status);

おー。……なんでしょうucsdet_detectAllって？
grepかけても出てこないので、何かのライブラリかな？
ということでググります。

どうやらICUというもので、文字コード判定ができるもののようです。
なんかそれっぽい。
ただ、100%の精度ではないようで、複数の結果が返ってきたりすると。つまり、UTF-8だとかShift_JISだとかが配列になって返ってくるのかな。

で、

WTF::TextEncoding hintEncoding(hintEncodingName);
// （中略）
const char* matchEncoding = ucsdet_getName(matches[i], &status);
//（中略）
if (WTF::TextEncoding(matchEncoding) == hintEncoding) {
    encoding = hintEncodingName;
    break;
}

んー、hintEncodingは引数で受け取ったhintEncodingNameからゴニョゴニョした感じっぽい。
こいつ自身は/core/html/parser/TextResourceDecoder.cppから呼ばれてるっぽいな。

if (detectTextEncoding(data, len, m_hintEncoding, &detectedEncoding))
    setEncoding(detectedEncoding, EncodingFromContentSniffing);

それっぽい。

そろそろ限界

そろそろ雰囲気だけで読むのは限界です……。
何となく、metaタグやwebサーバーのレスポンスヘッダなどで指定されたエンコードと、ICUの判定結果を突合して一致したものをエンコードとしてるような気がする。
で、一致しなかった場合、ICUの判定結果の0番目を採用する感じかな。
これ以上は限界。

遊んでみる

こんなコードを書いてみます。で、いろんなエンコードで保存します。

結論としては最初に言った通り
雑な考察なので信用に足るかは怪しい
わかる人は優しく教えてください
metaタグ等でエンコードはちゃんと設定しよう

ブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？

2019-03-28T19:12:26+09:00

まー、困ることはないんだけど、気になって気になって

発端

よく、jsとかの挙動で「あれ、どうだっけ？」ってなった時、