「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

作業効率・生産性を爆上げ！おすすめのGoogle Chrome拡張機能10選【2022年版】

2021-12-02T12:12:14+09:00

元記事：https://www.notta.ai/blog/10-best-google-chrome-extensions

1. Chromeとは？

「Google Chrome（グーグル・クローム）」とは、Googleが開発したWebブラウザであります。現在は世界シェアNo.1で、多くの方が利用されています。
その人気の理由は、「マルチデバイス対応」「クラウド上でブラウザの設定が同期可能」「拡張機能の豊富さ」などが挙げられます。
特に、数多くの「エクステンション（Extensions）」（Chrome拡張機能・Chrome拡張ツールとも呼ばれる）が利用でき、Chromeの機能はさらに充実できます。

2. Chrome拡張機能とは？

「Chrome拡張機能」を一言で表すと、「Chromeの機能を追加・強化する特殊なアドオン・プログラム」です。
Google Chromeにインストールされた拡張機能は、その上で動作し、Chrome API（アプリケーション・プログラム・インタフェース）を使用して、オリジナル版にはないさまざまな機能を提供します。
Google Chromeのブラウザ拡張機能を使えば、生産性の向上、仕事の自動化・効率化など、すべてをWebブラウザで快適に行うことができます。何よりも素晴らしいのは、種類がとても豊富であることです。Chrome ウェブストアでは、ワンクリックで生産性を向上させるさまざまな便利な拡張機能を提供しています。
ここでは、その中から選りすぐりの拡張機能をご紹介します。

‍

3. おすすめのChrome仕事効率化拡張機能10選

1. Deepl

「翻訳は高精度を誇るDeepL翻訳に任せろう」

この拡張機能は、ブラウザ内で選択されたテキストを、DeepL翻訳の翻訳結果をすぐブラウザ内に転送します。もちろん、翻訳元の言語と翻訳先の言語は、拡張機能の設定で指定できます。もう言葉の壁のせいでWeb上の情報を見逃す心配はありません。

2. Notta

「YouTube、ニコニコ動画、ポッドキャスト、ラジオなどの音声コンテンツをテキスト化。文字データをWeb版やアプリに保存と編集が便利」

AI音声認識文字起こしサービス「Notta」のChrome拡張機能は、Webページの音声をリアルタイムで録音し、文字起こしすることができます。文字起こし結果はNottaクラウドに保存し、多端末同期機能により、どの端末（Web, iOS, Android）でも確認できます。

Web会議（Zoomなど）やYouTubeの記録、お気に入りのポッドキャストやライブストリームの保存など、手作業による文字起こしの手間が省け、作業効率が大幅UP！

YouTuberの感想を見ましょう！
‍

主な機能：
- ブラウザで目的のタブをリアルタイム録音
- 高精度な文字起こし（104言語に対応）
- 記録の編集・共有
- 文字起こし結果のエクスポート
- 複数デバイスと同期

こちらで無料ダウンロード！

3. uBlock Origin

「広告とトラッキングコードをブロックして、スピードとプライバシーを向上させる」

広告の多いサイトに向け、uBlock Originがページ上の広告コンテンツをブロックされて、ほとんどのページがより速く表示されることができます。
uBlock Originは、同じ機能を持つ他の拡張機能に比べてメモリ使用量が少ないという点で、すでに複数の技術系Webサイトから賞賛されています。
「広告ブロッカー」だけではなく、CPUとメモリーの効率化を第一の特徴とする、幅広いコンテンツブロッカーになっています。

4. SimilarWeb

「ブラウザで強力なSEOツールを使えよう」

SimilarWebとは、SEOデータを提供する無料の拡張機能で、SEO Auditなどの他の便利なツールも備えています。

主な機能：
- オンページSEO（内部対策）監査
- 内部リンク、外部リンク（被リンク）の調査
- ドメインとURLをリアルタイムで比較
- サイトのアクセス数（訪問数、直帰率、PV数）の調査

5. Save to Pocket

「いい記事を1箇所にまとめよう」

Pocketとは、インターネット上の記事やページをあとで読むため、1箇所にまとめて読むための拡張機能です。
それだけでなく、多端末同期やオフラインなどの機能に対応しているので、保存した記事をいつでもどこでも読むことができます。

6. Grammarly

「入力された英文を直接チェックしてくれる」

Grammarlyとは、スペル間違いを指摘したり、違う言い回しを教えたりしてくれる拡張機能です。
ブラウザ内で入力された内容について、文法や単語の使い方が適切かどうかをチェックすることができます。文章をドロップしてすぐ確認可能になります。

7. Nox Influencer for YouTube

「Youtubeチャンネルの統計情報を追跡することができる」

Nox Influencerのデータベースを通じて、YouTube 動画の視聴数やチャンネルの登録数、登録者の分布国、ビデオ視聴傾向、国・世界のランキング、収益予想、タグやキーワードなどの様々な要素を表示し、分析することができます。
これらのデータは、チャンネルの未来性を把握でき、登録者の趣味を理解するにも役立ちます。

8. OneTab

「開いているタブをリスト化して1つにまとめる」

コンテンツ制作のためにリサーチを行っていると、引用したい資料が複数のタブに表示されてしまうことがあります。困ったことに、いざ記事を書いたり、資料を参照したりするときに、すべてのタブの間を移動するのは大変です。
OneTabは複数の異なるURLを1つにまとめ、数多くのタブを簡単に分類管理できるようにします。

9. Speed Dial 2

「頻繁にアクセスするサイト・ブログをサムネイル画像付きで登録」

ブックマークをカテゴリごと、視覚的に管理できるようになります。新しいタブを開くたびに、ブックマークをすぐにアクセスすることができ、ブックマークを探す時間を節約することができます。

10. Bitwarden

「各Webサイトのパスワードを一か所にまとめ、自動的にアカウントにログイン可能」

Bitwardenとは、サイトごとに異なる強力なパスワードを作成し、暗号化されたデータベースに保存し、必要に応じてログイン情報を自動的に入力することで、自動ログインが実現できる拡張機能です。1つのマスターパスワードを覚えておくだけで、Bitwardenがほとんどすべての面倒を見てくれます。

4. Chrome拡張機能のインストール・削除の方法

拡張機能のインストール方法

Chrome ウェブストアを開きます。
拡張機能名を検索して、検索結果から選択します。
【Chrome に追加】をクリックします。

拡張機能を削除の方法

Chrome を開いて、右上の【その他アイコン】で【その他のツール】の【拡張機能】をクリックします。
削除する拡張機能の【削除】をクリックします。
【削除】をクリックして確定します。

5. まとめーー業務効率化を意識しましょう

現在は、生産性の向上・スピードアップ・ミスの低減などになるため、適切なツールの導入と活用が不可欠な時代になっています。上記のChrome拡張機能は、仕事の改善や労働時間の管理を行うための基礎を築くのに役立ちます。ビジネスの効率を上げるために、ぜひ試してみてください。

入れるとすぐ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からダウンロード

📝 Chrome 拡張で 1つのウインドウを使い回す方法

2021-06-21T22:21:42+09:00

Teemo という Chrome 拡張を開発したのですが、その際 1 つのウインドウを使い回す構成にしたいなと考えていました。

例えば何も考えずに chrome.windows.create を Chrome 拡張を開くたびに呼び出すと、呼び出すたびにウインドウが新規作成されてしまいます。そうすると、都度画面に不要なウインドウが出てきて邪魔になるだけでなく、手動で不要なウインドウを消す作業をユーザーに強いることとなってしまいます。。🙃

上記のような挙動が望まれるケースもあると思いますが、Teemo ではウインドウ間を頻繁に行き来するため、ショートカットを利用して拡張機能を呼び出すことを見込んでいました。そのため、ショートカットを利用して拡張機能を呼び出すたびにウインドウが新規作成され続ける挙動は望んでいませんでした。

1 つのウインドウを使い回すためには、chrome.windows.create 時に作成される window の id を保持しておきます。その後、Chrome 拡張が呼び出されるたびに window が既に存在するかどうかを保持していた id を元にチェックします。既に window が存在していた場合はそれを使いまわします。存在していなかった場合は、chrome.windows.create で window を新規作成します。

// background.js
// window の id を保持しておくための変数
let vid = -1;

chrome.browserAction.onClicked.addListener(function () {
  // vid の値を元に Chrome 拡張で開いた window の取得を試みる
  chrome.windows.get(vid, function (chromeWindow) {
    // エラーが無く、既に window が存在している場合は、
    // そのステータスを { focused: true } にすることで最前面に呼び出す
    if (!chrome.runtime.lastError && chromeWindow) {
      chrome.windows.update(vid, { focused: true });
      return;
    }

    // 上記以外のパターンでは window を新規作成する
    chrome.windows.create(
      {
        url: "index.html",
        type: "popup",
      },
      function (window) {
        // 新規作成した window を使い回せるようにするため、
        // vid 変数に window の id を保持しておく
        vid = window.id;
      }
    );
  });
});

上記コードで 1 つのウインドウを使い回すことが出来るようになるはずです。✅

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