chrome://extensions/ で「リロード」を明示的にクリックしなくても、拡張機能フォルダーにファイルを保存するたびに、Chrome 拡張機能をリロードしたいと考えています。これは可能ですか?
編集: Chromeが拡張機能をリロードする間隔を更新できることは承知していますが、これは中途半端な解決策ですが、エディター(emacsまたはtextmate)で保存時にリロードをトリガーするか、Chromeに監視を依頼することをお勧めします変更用のディレクトリ。
chrome://extensions/ で「リロード」を明示的にクリックしなくても、拡張機能フォルダーにファイルを保存するたびに、Chrome 拡張機能をリロードしたいと考えています。これは可能ですか?
編集: Chromeが拡張機能をリロードする間隔を更新できることは承知していますが、これは中途半端な解決策ですが、エディター(emacsまたはtextmate)で保存時にリロードをトリガーするか、Chromeに監視を依頼することをお勧めします変更用のディレクトリ。
Chrome用の「Extensions Reloader」を使用できます。
拡張機能のツールバー ボタンを使用するか、「http://reload.extensions」を参照して、展開されたすべての拡張機能をリロードします。
Chrome 拡張機能を開発したことがある場合は、拡張機能ページを経由せずに、解凍した拡張機能を再ロードするプロセスを自動化したいと思うかもしれません。
「Extensions Reloader」を使用すると、次の 2 つの方法を使用して、展開されたすべての拡張機能をリロードできます。
1 - 拡張機能のツールバー ボタン。
2 - 「http://reload.extensions」をブラウズします。
ツールバー アイコンをクリックすると、展開された拡張機能がリロードされます。
「ブラウジングによるリロード」は、「ビルド後」スクリプトを使用してリロード プロセスを自動化することを目的としています。Chrome を使用して「http://reload.extensions」へのブラウズをスクリプトに追加するだけで、Chrome ウィンドウが更新されます。
更新: 2015 年 1 月 14 日現在、この拡張機能はオープンソースであり、GitHub で入手できます。
更新: オプション ページを追加したので、拡張機能の ID を手動で見つけて編集する必要がなくなりました。CRXとソース コードは次の場所にあります: https://github.com/Rob--W/Chrome-Extension-Reloader
更新 2: ショートカットを追加しました (Github のリポジトリを参照してください)。基本機能
を含む元のコードを以下に示します。
拡張機能を作成し、Browser Actionメソッドを API と組み合わせて使用して、展開されたchrome.extension.management
拡張機能をリロードします。
以下のコードは 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);
});
ホットリロードを行う単純な埋め込み可能なスクリプトを作成しました。
https://github.com/xpl/crx-hotreload
拡張機能のディレクトリ内のファイルの変更を監視します。変更が検出されると、拡張機能がリロードされ、アクティブなタブが更新されます (更新されたコンテンツ スクリプトを再トリガーするため)。
別の解決策は、カスタムの 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拡張ジェネレーターの生成コードで見つけました(素晴らしいツールです!)。役立つかもしれないので、ここに投稿します。
Chrome拡張機能には、それを許可しない許可システムがあります(SOの一部の人々はあなたと同じ問題を抱えていました)。そのため、「この機能を追加する」ように要求してもIMOは機能しません。を使用して提案された解決策 (理論)を含む Chromium Extensions Google Groups からのメールがありますが、chrome.extension.getViews()
どちらも動作することは保証されていません。
manifest.json
のようないくつかの Chrome 内部ページに追加することができればchrome://extensions/
、アンカーと対話するプラグインを作成し、XRefresh (Firefox プラグイン - Ruby と WebSocket を使用するChrome バージョンReload
があります) のような外部プログラムを使用することが可能になります。 )、必要なものだけを達成できます:
XRefresh は、選択したフォルダー内のファイルの変更により、現在の Web ページを更新するブラウザー プラグインです。これにより、お気に入りの HTML/CSS エディターでライブ ページ編集を行うことができます。
それはできませんが、この同じ概念を別の方法で使用できると思います。
代わりに、サードパーティのソリューションを見つけようとすることができます。ファイルの変更を確認した後 (私は emacs も Textmate も知りませんが、Emacs では「ファイルの保存」アクション内でアプリ呼び出しをバインドすることが可能です)、特定のアプリケーションの特定の座標をクリックします。この場合、それReload
は開発中の拡張機能のアンカーです (このリロードのためだけに Chrome ウィンドウを開いたままにします)。
(地獄のようにクレイジーですが、うまくいくかもしれません)
ファイルの変更を監視し、変更が検出された場合はリロードするために使用できる関数を次に示します。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'));
たぶん私はパーティーに少し遅れていますが、https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamlnを作成して解決しました
イベントがWebSocket経由で着信するchrome://extensions
たびに、ページをリロードすることで機能します。file.change
file.change
拡張フォルダー内のファイル変更時にイベントを発行する方法の Gulp ベースの例は、https ://github.com/robin-drexler/chrome-extension-auto-reload-watcher にあります。
拡張機能管理 API を使用して拡張機能を再読み込み/再有効化するのではなく、タブ全体を再読み込みするのはなぜですか? 現在、拡張機能を無効にして再度有効にすると、開いている検査ウィンドウ (コンソール ログなど) が閉じてしまいます。これは、アクティブな開発中に面倒すぎることがわかりました。
mozilla の偉大な人たちが、起動に使用できる新しいhttps://github.com/mozilla/web-extをリリースしましたweb-ext run --target chromium
少し遅い答えかもしれませんが、 crxreloadがうまくいくと思います。これは、開発中に保存時にリロードするワークフローを作成しようとした結果です。
html ファイルやマニフェスト ファイルなどのコンテンツ ファイルは、拡張機能をインストールしないと変更できませんが、JavaScript ファイルは拡張機能がパックされるまで動的に読み込まれると思います。
これは、Chrome Extensions API を介して現在取り組んでいる現在のプロジェクトが原因で、ページを更新するたびに読み込まれるようです。
@GmonCと@Arik、そして暇な時間のおかげで、私はなんとかこれを機能させることができました。これを機能させるには、2つのファイルを変更する必要がありました。
(1)そのアプリケーションにLiveReloadとChrome拡張機能をインストールします。これにより、ファイル変更時にスクリプトが呼び出されます。
(2)開く<LiveReloadInstallDir>\Bundled\backend\res\livereload.js
(3)行#509
をに変更します
this.window.location.href = "http://reload.extensions";
(4)次にExtensions Reloader
、に移動するときにすべての開発拡張機能をリロードする便利なリンクハンドラーを持つ別の拡張機能をインストールします。"http://reload.extensions"
background.min.js
(5)このように拡張機能を変更します
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アプリケーションを開き、拡張機能リローダーボタンを非表示にし、ツールバーのボタンをクリックしてLiveReload拡張機能をアクティブにします。これで、LiveReloadの他のすべての機能(cssリロード、画像リロードなど)を使用しながら、各ファイルの変更でページと拡張機能をリロードします。
これの唯一の悪い点は、拡張機能を更新するたびにスクリプトを変更する手順を繰り返す必要があることです。更新を回避するには、拡張機能を解凍済みとして追加します。
これをいじくり回す時間がもっとあるときは、おそらくこれらの拡張機能の両方の必要性を排除する拡張機能を作成します。
それまで、私は自分の拡張機能ProjextAxemanに取り組んでいます
ブートストラップ、足場、いくつかの自動化された前処理機能、および自動リロード (対話は不要) を提供する、新しいうなり声ベースのプロジェクトを見つけました。
Websecurify からChrome 拡張機能をブートストラップする
これは、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...} セクションに適切に入力してください。
多くのエディターでは、ホットキーを使用して同様のことを行うことができます。
Windows の場合: オートホットキー
Linux の場合: xdotool、xbindkeys
Mac の場合: Automator
ドキュメントに記載されているように、次のコマンドラインはアプリをリロードします
/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);
}
);});
スクリプトで必要な監視コマンドを実行し、必要に応じてリロード タスクを呼び出します。すっきり、シンプル。
パッケージ化されたアプリのライブ リロードを可能にするために、LiveJSをフォークしました。ファイルをアプリに含めるだけで、ファイルを保存するたびにアプリが自動再読み込みされます。
はい、間接的にできます!これが私の解決策です。
manifest.json 内
{
"name": "",
"version": "1.0.0",
"description": "",
"content_scripts":[{
"run_at":"document_end",
"matches":["http://*/*"],
"js":["/scripts/inject.js"]
}]
}
inject.js で
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'Your_Scripts';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
挿入されたスクリプトは、任意の場所から他のスクリプトを挿入できます。
この手法のもう 1 つの利点は、孤立した世界の制限を無視できることです。内容を見るスクリプト実行環境
直接行うことはできません。ごめん。
機能として見たい場合は、http://crbug.com/newでリクエストできます。