nkurilog: Chrome拡張機能

2017-12-03

Chrome 警告「デベロッパーモードの拡張機能を無効にする」を消す

対象とする警告メッセージ

今回対象とするのは、「デベロッパーモードの拡張機能を無効にする」のメッセージです。

デベロッパーモードの拡張機能を無効にする

パッケージ化された拡張機能を Chrome ウェブストア以外からインストールした場合に表示される「サポートされていない拡張機能が無効」のメッセージではありません。

サポートされていない拡張機能が無効

二つの方法

現在、私が確認が取れているのは、以下の二つの方法です。

Dev 版（Canary 版）を使う。
Stable 版の chrome.dll にパッチを当てる。

2.の方法は dll を直接修正しますのでリスクを伴いますし、Chrome のアップデートで元に戻りますので 1. の方法をおすすめします。

1. Dev 版を使う

公式に記載されている方法です。

重要：Chrome 拡張機能についてのお知らせ - Google プロダクトフォーラム

Google グループでは、オンラインフォーラムやメールベースのグループを作成したり、こうしたフォーラムやグループに参加したりすることで、大勢のユーザーと情報の共有やディスカッションを行うことができます。

productforums.google.com

Google Developers Japan: 悪意ある Chrome 拡張機能からユーザーを守るために Chrome ウェブストアでホスティングしましょう

developers-jp.googleblog.com

Canary 版よりは安定している Dev 版をおすすめします。

Dev 版は Stable 版と共存可能です。

Chromeブラウザ、PCで安定版とベータ版/開発版の共存が可能に | マイナビニュース

Googleのデスクトップ用ブラウザ「Chrome」の安定版と、開発チャンネルのベータ版 /開発版を同じPCにインストールして同時に使用できるようになった。これまでで1つの環境にチャンネルの異なるChromeをそれぞれ独立してインストールすることができなかったため、開発段階の技術や機能をいち早く試したいユーザーや開発者は、安定版ではなく、ベータ版または開発版を選ぶ必要があった。

news.mynavi.jp

Dev 版のダウンロードは、Chrome Release Channels - The Chromium Projects から可能です。インストールすると、DEV が付いたアイコンが作成されます。

2. Stable 版 chrome.dll にパッチ当て

Stack OverFlow の記事 windows - How to get rid of “disable developer mode extensions” pop-up - Stack Overflow で紹介されている方法です。

手順を説明しておきます。

Stable 版の chrome.dll のバックアップを取っておきます。
chrome.dll は C:\Program Files (x86)\Google\Chrome\Application\[ChromeVersion] または C:\Program Files\Google\Chrome\Application\[ChromeVersion] にあります。
（ここでバックアップを取らなくても3.でスクリプトを実行すると同じフォルダにchrome.dll.bak が作成されます。）
Stack OverFlow の Answer にあるスクリプトを拡張子.batで保存します。
保存したバッチファイルを直接実行するか、1.でバックアップ取得済みの chrome.dll をバッチファイルにドラッグアンドドロップします。

以上でパッチ当ては終了です。

2017-11-24

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 警告「デベロッパーモードの拡張機能を無効にする」を消す』にまとめました。