「chrome-extension」の記事 - 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からダウンロード

📝 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 つのウインドウを使い回すことが出来るようになるはずです。✅

📔 チャットの短文作成に便利な Chrome 拡張機能を開発してみた

2021-06-13T20:10:47+09:00

はじめに 📝

最近とある事情により Twitter の DM を利用しているのですが、Slack などのように絵文字をショートカット入力できないことにフラストレーションが溜まってきていました。そのため、絵文字をショトカで入力可能にしてくれる Chrome 拡張機能を探したのですが見つけられませんでした。

そこで、無いなら作ろうということで Teemo を開発しました。

ソースコードは GitHub 上で公開しています。何かご要望等ございましたら PR や Issue 作成頂けますと喜びます。Teemo の実際の挙動については下記の動画で確認できます 🎥

Teemo 💕 - Quickly generate chat message with embedded emoji! 💖😆

考えていたこと 💭

今回 Teemo の開発を行うに当たり、考えていた点は下記になります。

よくある : 入力からの絵文字ショートカットを導入する
- Slack や GitHub、JIRA などではおなじみの入力方法 ⌨️
パレットから選択する際は半角英数字で検索できるようにしたい
- Twitter では日本語で検索しないと絵文字が探せない 🔍
- 普段英数字で絵文字検索をするので目的の絵文字が見つけづらい 🕵️
拡張機能を利用することで文章入力の煩わしさが増加することは避けたい
- コピペや文章クリアの機能等にもショトカ利用できるようにしたい 💨

プロトタイピングしながら友人に進捗をシェアしながら開発は進めていきました。本当は個人で利用する想定で進めていたのですが、割と評判が良かったため Chrome ウェブストアに公開するのを目標に動いていました。そして、Chrome ウェブストアで公開できるクオリティを目指して動いたことで満足のいく拡張機能が作れました。

使い方 ⚒️

Teemo の使い方について紹介いたします。

Teemo を Chrome 拡張機能として追加する 🛍️

まずは Chrome ウェブストアにアクセスして、Teemo を Chrome に追加する必要があります。

1. Chrome ウェブストアにアクセスして右上の Chrome に追加 ボタンをクリックする

2. 拡張機能として Teemo の追加が完了したら、ツールバーのアイコンをクリックするか Ctrl or Cmd + Shift + O を入力して Teemo のエディタが開くことを確認する

上記確認できれば Teemo が正常に Chrome 拡張機能として追加できています。

Teemo で絵文字を `:` でショートカット入力する 💨

Teemo のエディタでは : を利用することで文章入力を止めることなく、シームレスに絵文字入力が行えます。: を入力後、関連ワードを半角英数字で入力することで絵文字候補がウィンドウ下部に表示されます。入力したい絵文字をマウスかキーボードの矢印キーで選択して入力できます。

: を入力後、関連ワードを半角英数字で入力することで絵文字候補がウィンドウ下部に表示される 💨

Teemo で絵文字をパレットから選択して入力する 🎨

絵文字をパレットから選択して入力するには Ctrl or Cmd + E キーを入力するか、ウィンドウ下部の真ん中にある 🎨 ボタンをクリックしてパレットを表示する必要があります。ちなみに絵文字選択用のパレットには OSS の Emoji Mart を利用しています。

パレットで関連ワードを入力することで絵文字検索ができる。絵文字をクリックすることで入力できる 🐱

Teemo で入力した文章をクリップボードにコピーする 📋

入力した文章は Ctrl or Cmd + C キーを入力するか、ウィンドウ下部の右にある 📋 ボタンをクリックすることで全文コピーが可能です。わざわざ範囲選択を行わずとも文章を全文コピーすることができます。コピーが正常にできるとウィンドウ下部の真ん中にある 📋 ボタンが 📋✔️ ボタンになります。

Teemo で文章入力後 Ctrl + C で全文コピー後、ツイート編集画面にペーストした時の様子 🐦

Teemo で入力した文章をクリアする 🧼

Teemo では単一のウィンドウを使い回すため、改めて文章を作成する際に一度入力した文章をクリアする必要があります。 そのため、Ctrl or Cmd + R キーを入力するか、ウィンドウ下部の左にある 🆕 ボタンをクリックすることで文章をクリアできるようにしています。

Teemo の入力欄を 🆕 ボタンをクリックしてクリアした時の様子 🧼

おわりに 🔚

個人的に Teemo のおかげで、Twitter での絵文字を利用した文章作成についてストレス無く出来るようになったので良かったです。副次的な効果として、どんなサイトでも絵文字を利用した文章作成が簡単に出来るようになったため、他に絵文字をショートカット入力できないサイトがあったとしても同様の困りごとは発生しなくなりました。☺️

SNS 上などで文章を作成する際に絵文字を頻繁に利用する方には割とご満足いただける拡張機能になっているはずです多分 🙋

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で業務改善