web-dev-qa-db-ja.com

開発中のChrome拡張機能を自動リロードするにはどうすればよいですか？

chrome拡張機能は、chrome：// extensions /で明示的に「リロード」をクリックすることなく、拡張機能フォルダーにファイルを保存するたびにリロードするようにします。これは可能ですか？

編集：私はできることを知っています 間隔を更新する Chromeは拡張機能をリロードしますが、これは中途の解決策ですが、エディタ（emacsまたはtextmate）トリガーをオンにしてリロードを保存するか、Chromeにディレクトリの変更を監視するよう要求します。

javascriptgoogle-chromegoogle-chrome-extension
240
Andrey Fedorov

Chromeでは " Extensions Reloader "を使用できます。

拡張機能のツールバーボタンを使用するか、「 http：//reload.extensions "」を参照して、展開されたすべての拡張機能をリロードします

Chrome拡張機能を開発したことがある場合は、拡張機能ページを介さずに、展開した拡張機能を再ロードするプロセスを自動化することができます。

「Extensions Reloader」では、次の2つの方法を使用して、展開されたすべての拡張機能をリロードできます。

1-拡張機能のツールバーボタン。

2-「 http：//reload.extensions 」を参照します。

ツールバーアイコンは、ワンクリックで解凍された拡張機能をリロードします。

「参照によるリロード」は、「ビルド後」スクリプトを使用してリロードプロセスを自動化することを目的としています-Chromeを使用して「 http：//reload.extensions 」に参照を追加するだけですスクリプトを更新すると、Chromeウィンドウが更新されます。

更新：2015年1月14日現在、拡張機能はオープンソースであり、 GitHubで利用可能 です。

147
Arik

Update：オプションページを追加したので、拡張機能のIDを手動で見つけて編集する必要がなくなりました。 CRX およびソースコードは次のとおりです。 https://github.com/Rob--W/Chrome-Extension-Reloader
更新2：ショートカットが追加されました（Githubのリポジトリを参照）。
基本機能を含む元のコードを以下に示します。

拡張機能を作成し、 Browser Action メソッドと chrome.extension.management APIを組み合わせて使用​​して、解凍した拡張機能をリロードします。

以下のコードはChromeにボタンを追加し、クリックすると拡張機能が再ロードされます。

manifest.json

{
    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": {"scripts": ["bg.js"] },
    "browser_action": {
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    },
    "permissions": ["management"]
}

bg.js

var id = "<extension_id here>";
function reloadExtension(id) {
    chrome.management.setEnabled(id, false, function() {
        chrome.management.setEnabled(id, true);
    });
}
chrome.browserAction.onClicked.addListener(function(tab) {
    reloadExtension(id);
});

icon48.png：Nice 48x48アイコンを選択します。例：
Google Chrome Google Chrome

53
Rob W

どんな機能やイベントでも

chrome.runtime.reload();

拡張機能をリロードします（ docs ）。また、manifest.jsonファイルを変更して、以下を追加する必要があります。

...
"permissions": [ "management" , ...]
...
38
Leonardo Ciaccio

ホットリロードを行う簡単な埋め込み可能なスクリプトを作成しました。

https://github.com/xpl/crx-hotreload

拡張機能のディレクトリでファイルの変更を監視します。変更が検出されると、拡張機能が再ロードされ、アクティブなタブが更新されます（更新されたコンテンツスクリプトを再トリガーするため）。

  • ファイルのタイムスタンプをチェックすることにより動作します
  • ネストされたディレクトリをサポート
  • 本番構成で自身を自動的に無効にします
37
Vitaly Gordon

別の解決策は、カスタムlivereloadスクリプト（extension-reload.js）を作成することです。

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_Host = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_Host + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) {
  console.log('reload connection got error:', error);
};

connection.onmessage = function (e) {
  if (e.data) {
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') {
      chrome.runtime.reload();
    }
  }
};

このスクリプトは、websocketを使用してlivereloadサーバーに接続します。次に、livereloadからのリロードメッセージでchrome.runtime.reload（）呼び出しを発行します。次のステップは、このスクリプトを追加して、manifest.jsonでバックグラウンドスクリプトとして実行することです。

注：これは私の解決策ではありません。ただ投稿しています。 Chrome拡張ジェネレーター （すばらしいツール！）の生成コードで見つけました。役立つかもしれないので、ここに投稿しています。

10
yarden.refaeli

Chrome拡張機能には 許可システム が許可されていない（SOの一部の人々 あなたと同じ問題があった ）ので、 「この機能を追加」はIMOで機能しません。 Chromium Extensions Google Groupsからchrome.extension.getViews()を使用して 提案されたソリューション（理論） のメールがありますが、動作が保証されていません。

manifest.jsonいくつかのChrome内部ページにchrome://extensions/などの内部ページを追加できる場合は、Reloadアンカーと対話するプラグインを作成できます。そして、 XRefresh （Firefoxプラグイン-RubyとWebSocketを使用する Chromeバージョン などの外部プログラムを使用すると、必要なものを実現できます。 ：

XRefreshは、選択したフォルダーのファイル変更により現在のWebページを更新するブラウザープラグインです。これにより、お気に入りのHTML/CSSエディターでライブページ編集を行うことができます。

それを行うことはできませんが、この同じ概念を異なる方法で使用できると思います。

代わりに、サードパーティのソリューションを見つけようとすることができます。ファイルに変更を加えた後（Textmateもemacsもわかりませんが、Emacsでは、「ファイルを保存」アクション内でアプリ呼び出しをバインドできます）特定のアプリケーションの特定の座標をクリックします。この場合、開発中の拡張機能からのReloadアンカーです（このリロードのためにChromeウィンドウを開いたままにしておきます）。

（地獄のようにクレイジーですが、うまくいくかもしれません）

9
GmonC

次に、ファイルの変更を監視し、変更が検出された場合にリロードするために使用できる機能を示します。 AJAXを介してポーリングし、window.location.reload（）を介してリロードすることで機能します。配布パッケージでこれを使用しないでください。

function reloadOnChange(url, checkIntervalMS) {
    if (!window.__watchedFiles) {
        window.__watchedFiles = {};
    }

    (function() {
        var self = arguments.callee;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (__watchedFiles[url] &&
                    __watchedFiles[url] != xhr.responseText) {
                    window.location.reload();
                } else {
                    __watchedFiles[url] = xhr.responseText
                    window.setTimeout(self, checkIntervalMS || 1000);
                }
            }
        };

        xhr.open("GET", url, true);
        xhr.send();
    })();
}

reloadOnChange(chrome.extension.getURL('/myscript.js'));
7
Scott

パーティーに少し遅れているかもしれませんが、 https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln を作成して解決しました

chrome://extensionsイベントがwebsockets経由で受信されるたびに、file.changeページをリロードすることで機能します。

拡張フォルダー内のファイルの変更時にfile.changeイベントを発行する方法のGulpベースの例は、ここにあります： https://github.com/robin-drexler/chrome-extension-auto-reload -watcher

拡張機能管理APIを使用して拡張機能をリロード/再有効化するのではなく、タブ全体をリロードするのはなぜですか？現在、拡張機能を再度無効にして有効にすると、開いている検査ウィンドウ（コンソールログなど）が閉じます。これは、アクティブな開発中に面倒すぎることがわかりました。

6
Robin Drexler

少し遅い答えかもしれませんが、私は crxreload がうまくいくと思います。開発中にリロードオンセーブワークフローを試みた結果です。

3
Mattias Wadman

HTMLやマニフェストファイルなどのコンテンツファイルは、拡張機能をインストールしないと変更できませんが、拡張機能がパックされるまでJavaScriptファイルは動的にロードされると思います。

Chrome Extensions APIを使用して作業している現在のプロジェクトのために、これを知っています。ページを更新するたびにロードするようです。

3
RobertPitt

リロードするショートカットを使用しています。ファイルを保存するときにいつもリロードしたくない

したがって、私のアプローチは軽量であり、リロード機能はそのままにしておくことができます

manifest.json

{
    ...
    "background": {
        "scripts": [
            "src/bg/background.js"
        ],
        "persistent": true
    },
    "commands": {
        "Ctrl+M": {
            "suggested_key": {
                "default": "Ctrl+M",
                "mac": "Command+M"
            },
            "description": "Ctrl+M."
        }
    },
    ...
}

src/bg/background.js

chrome.commands.onCommand.addListener((shortcut) => {
    console.log('lets reload');
    console.log(shortcut);
    if(shortcut.includes("+M")) {
        chrome.runtime.reload();
    }
})

chromeブラウザでCtrl + Mを押して、リロードします

2
Johan Hoeksma

npm initを使用して、ディレクトリルートにpackage.jsonを作成してから、

npm install --save-dev gulp-open && npm install -g gulp

次にgulpfile.jsを作成します

次のようになります：

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    open = require('gulp-open');

// create a default task and just log a message
gulp.task('default', ['watch']);

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('extensionData/userCode/**/*.js', ['uri']);
});

gulp.task('uri', function(){
  gulp.src(__filename)
  .pipe(open({uri: "http://reload.extensions"}));
});

これは、CrossRiderを使用して開発している場合に機能します。npmとノードがインストールされていると仮定して、ファイルを監視するパスを変更するのを監視することもできます。

2
Antoine

免責事項：私はこの拡張機能を自分で開発しました。

Clerc-Chrome Live Extension Reloading Clientの場合

LiveReload互換サーバーに接続して、保存するたびに拡張機能を自動的にリロードします。

ボーナス：あなたの側で少し余分な作業をすることで、拡張機能が変更するウェブページを自動的にリロードすることもできます。

ほとんどのWebページ開発者は、ファイルを自動的にビルドしてサーバーを再起動し、Webサイトをリロードする何らかのウォッチャーを備えたビルドシステムを使用します。

拡張機能の開発は、それほど異なる必要はありません。 Clercは、これと同じ自動化をChrome開発者にもたらします。 LiveReloadサーバーでビルドシステムをセットアップすると、Clercはリロードイベントをリッスンして拡張機能を更新します。

唯一の大きな落とし穴はmanifest.jsonの変更です。マニフェスト内の小さなタイプミスにより、さらにリロードが失敗する可能性があり、拡張機能をアンインストール/再インストールして、変更を再度ロードする必要があります。

Clercは、リロード後にリロードメッセージ全体を拡張機能に転送するため、オプションで提供されたメッセージを使用して、さらに更新手順をトリガーできます。

2
skylize

Webpackを使用して開発している場合、自動リロードプラグインがあります： https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

Webpack.config.jsを変更したくない場合は、CLIツールも付属しています。

npx wcer

注：（空の）バックグラウンドスクリプトは、リロードコードを挿入する場所なので、必要ない場合でも必要です。

1
Eugene Kulabuhov

新たに grunt ベースのプロジェクトが見つかりました。このプロジェクトは、ブートストラップ、足場、自動化された前処理機能、および自動リロード（対話の必要なし）を提供します。

Bootstrap Your Chrome Extension from Websecurify

1
ProDataLab

拡張機能を一晩でリロード（更新）したいのですが、これがbackground.jsで使用しているものです。

var d = new Date();
var n = d.getHours();
var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; 
// refresh after 24 hours if hour = 0 else
// refresh after 24-n hours (that will always be somewhere between 0 and 1 AM)
setTimeout(function() {
    location.reload();
}, untilnight);

よろしく、ピーター

1
Peter Driessen

Macをお持ちの場合、最も簡単な方法はAlfred Appを使用することです！

PowerpackでAlfred Appを取得し、以下のリンクで提供されるワークフローを追加し、必要なホットキーをカスタマイズします（（+⌥+ Rを使用したい）。それで全部です。

これで、ホットキーを使用するたびに、Google Chromeは、その時点でどのアプリケーションに関係なくリロードされます。

他のブラウザを使用する場合は、Alfred Preferences Workflows内でAppleScriptを開き、「Google Chrome」を「Firefox」、「Safari」に置き換えます...

ここでも、ReloadChrome.alfredworkflowファイルで使用される/ usr/bin/osascriptスクリプトの内容を示しますそれで、あなたはそれが何をしているかを見ることができます。

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

ワークフローファイルは ReloadChrome.alfredworkflow です。

1
Is Ma

ドキュメントで述べたように、次のコマンドラインはアプリをリロードします

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]

シェルスクリプトを作成し、gulpからそのファイルを呼び出しました。超シンプル：

var exec = require('child_process').exec;



gulp.task('reload-chrome-build',function(cb){

console.log("reload");

var cmd="./reloadchrome.sh"

exec(cmd,function (err, stdout, stderr) {
    console.log("done: "+stdout);

    cb(err);
    }
);});

スクリプトで必要な監視コマンドを実行し、必要なときにリロードタスクを呼び出します。すっきり、シンプル。

0
yeahdixon

著者は、そのWebpackプラグインの次のバージョンを推奨しました： https://github.com/rubenspgcavalcante/webpack-extension-reloader 。それは私にとって非常にうまく機能します。

0
Hieu Pham

@GmonCと@Arik、およびいくつかの空き時間のおかげで、私はなんとかこれを機能させることができました。これを機能させるには、2つのファイルを変更する必要がありました。

（1）そのアプリケーションのLiveReloadおよびChrome Extensionをインストールします。これにより、ファイルの変更時にスクリプトが呼び出されます。

（2）<LiveReloadInstallDir>\Bundled\backend\res\livereload.jsを開きます

（3）行#509を変更します

this.window.location.href = "http://reload.extensions";

（4）別の拡張機能Extensions Reloaderをインストールします。これには、"http://reload.extensions"への移動時にすべての開発拡張機能を再ロードする便利なリンクハンドラがあります

（5）この拡張機能のbackground.min.jsをこのように変更します

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))

と置換する

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))

LiveReloadアプリケーションを開き、Extension Reloaderボタンを非表示にし、ツールバーのボタンをクリックしてLiveReload拡張機能をアクティブにします。LiveReloadのその他すべての機能（css reload、image reloadなど）を使用しながら、ファイルを変更するたびにページと拡張機能をリロードします

これの悪い点は、拡張機能の更新ごとにスクリプトを変更する手順を繰り返す必要があることです。更新を回避するには、拡張機能を解凍済みとして追加します。

これをいじる時間があるなら、これらの拡張機能の両方の必要性を排除する拡張機能を作成するでしょう。

それまでは、拡張機能で作業しています Projext Axeman

0
Aleksandar Toplek

LiveJS をフォークして、パッケージ化されたアプリのライブリロードを可能にしました。ファイルをアプリに含めるだけで、ファイルを保存するたびにアプリが自動再読み込みされます。

0
Oz Ramos

これは、AutoItや代替品などのソフトウェアが輝く場所です。重要なのは、現在のテスト段階をエミュレートするスクリプトを書くことです。多くのテクノロジーには明確なワークフロー/テストパスが備わっていないため、少なくとも1つを使用することに慣れてください。

Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
WinWaitActive("New Tab - Google Chrome")
Send("^l")
Send("chrome://extensions{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Developer Tools")
Send("^`")

明らかに、テスト/反復のニーズに合わせてコードを変更します。 chrome：// extensionsサイトのアンカータグがある場所でタブクリックが正しいことを確認します。また、ウィンドウのマウスの動きやその他のマクロに関連して使用することもできます。

次のような方法でVimにスクリプトを追加します。

map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>

これは、Vimを使用しているときに、リーダーボタンと呼ばれるENTER（通常は|および\）の上にあるボタンを押し、それに続けて大文字の「A」を押すと、テストフェーズスクリプトが保存されて開始されることを意味します。

上記のVim/hotkeyスクリプトの{input ...}セクションに適切に記入してください。

多くのエディターでは、ホットキーを使用して同様のことができます。

AutoIt の代わりに here があります。

Windowsの場合：AutoHotkey

Linuxの場合：xdotool、xbindkeys

Macの場合：Automator

0
maelwyn

私は主にFirefoxで開発し、web-ext runはファイルの変更後に拡張機能を自動的にリロードします。その後、準備ができたら、Chromeで最後のテストを行い、Firefoxで発生しなかった問題がないことを確認します。

ただし、主にChromeで開発し、サードパーティの拡張機能をインストールしたくない場合は、拡張機能のフォルダーにtest.htmlファイルを作成し、多数の SSCCE's それに。そのファイルは、通常の<script>タグを使用して拡張スクリプトを挿入します。

テストの95％でそれを使用し、ライブサイトでテストする場合は拡張機能を手動でリロードできます。

これは、拡張機能が実行される環境を同じように再現するわけではありませんが、多くの単純なことには十分です。

0
Ian Dunn