textarea 内を置換する Chrome 拡張機能を作る

注意:

自作の Chrome 拡張機能を組み込むと Chrome 起動時に毎回以下のメッセージが表示されるようになります。
デベロッパーモードの拡張機能を無効にする
拡張機能を有効にするには［キャンセル］ボタンを押してください。

目的

前回（Blogger StackEdit で枠囲みをしたい）、前々回（Blogger コードの一部を強調表示したい）の記事で、 Markdown 上でコメントアウトした HTML を HTML編集画面で置換によりコメントインすることに触れました。今回の記事のそもそもの目的は、それをボタン一つで実現しようというものです。

ここでは textarea 内をボタン一つで複数パターンまとめて置換する Chrome 拡張機能を作ってみます。Blogger に関係なく textarea があるページ全般に適用できます。

拡張機能作成の概要

以下の4つのファイルを一つのフォルダ（ここでは C:\BloggerReplace とします）に置き、Chrome 拡張機能に読み込むだけです。

manifest.json - 拡張機能の定義
background.js - background （イベント処理）スクリプト
content.js - content（コンテンツ挿入）スクリプト
jquery.min.js - jQuery

ざっくり、拡張機能のアイコンをクリックすると、background.js で定義されたイベントハンドラが、 jquery.js と content.js をページに組み込んで実行という流れです。

ファイルの作成

以下の3つのファイルをエディタで作成して、一つのフォルダ（ここでは C:\BloggerReplace ）にUTF-8 で保存します。

manifest.json

{
    "name": "Blogger Replace",
    "version": "0.1",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "Blogger Replace"
    },
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": ["activeTab"]
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function() {
        chrome.tabs.executeScript(null, { file: "content.js" });
    });
});

content.js

$(function() {
    $('textarea').each(function(){
        var txt = $(this).val();
            $(this).val(
                txt.replace(/<!-- *div *class *= *&#34;(.+)&#34; *-->/gi, '<div class="$1">')
                    .replace(/<!-- *\/div *-->/gi, '</div>')
                    .replace(/&lt;!-- *(\/?)mark *--&gt;/gi, '<$1mark>')
            );
    });
});

  （コードブロック中の）をコメントイン（アンコメント）する例です。適宜修正してください。

jquery.min.js

http://jquery.com/download/ から Download the compressed, production jQuery x.x.x をダウンロードして、jquery.min.js という名前で同じフォルダに保存しておきます。

拡張機能の登録

あとは、拡張機能 (chrome://extenions) にアクセスして、

[デベロッパーモード] にチェックを入れる。
[パッケージ化されていない拡張機能を読み込む…] で上のファイルを保存したフォルダ（C:\BloggerReplace）を指定する。
[有効] にチェックを入れる。

と拡張機能が組み込まれ、アドレスバーの右に B というアイコンが現れます。

Chrome拡張機能画面

使用方法

content.js の replace メソッド（メソッドチェーン）の内容を適宜修正します。
修正したら、拡張機能の管理画面（chrome://extensions）でリロード（Ctrl+R）を実行します。
置換したい文字がある textarea のあるページ（ブログ編集画面等）でアイコン B をクリックします。

textarea 内の文字が置換されます。

Chrome 起動時の警告は消せないのか？

『Chrome 警告「デベロッパーモードの拡張機能を無効にする」を消す』にまとめました。

2017-11-24