開発中のChrome拡張機能を自動で再読み込みするにはどうすればよいですか？

拡張機能フォルダにファイルを保存するたびに、chrome：// extensions /で「reload」をクリックすることなく、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
Update 2：追加されたショートカット（Githubの私のリポジトリを参照）_{基本的な機能
を含む元のコードを以下に示します。}

拡張機能を作成し、ブラウザアクションメソッドを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：たとえば、次のような素敵な48x48アイコンを選択します。

あらゆる機能やイベントで

chrome.runtime.reload();

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

...
"permissions": [ "management" , ...]
...

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

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/、Reloadアンカーと相互作用するプラグインを作成し、XRefresh（Firefoxプラグイン-RubyとWebSocketを使用したChromeバージョンがあります）のような外部プログラムを使用して作成できます。）、必要なものだけを実現します。

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を作成することで解決しました

chrome://extensionsいつでもページをリロードすることで機能しますfile.changeイベントがWebSocket経由で着信する。

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

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

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

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

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

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

答えは少し遅いかもしれませんが、crxreloadが役立つかもしれません。これは、開発中にリロードオンセーブワークフローを作成しようとした結果です。

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

だから私のアプローチは軽量で、リロード機能をそのままにしておくことができます

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を押してリロードします

を使用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とノードがインストールされていることを前提として、ファイルを監視するパスを変更することもできます。

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

Clerc-Chrome Live Extension Reloading Client用

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

おまけ：少し追加の作業を行うだけで、拡張機能によって変更されるWebページを自動的に再読み込みすることもできます。

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

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

唯一の大きな問題はmanifest.jsonの変更です。マニフェストに小さなタイプミスがあると、おそらくリロードの試行が失敗し、拡張機能をアンインストール/再インストールして、変更を再度ロードすることができなくなります。

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

mozillaの偉人たちが、起動に使用できる新しいhttps://github.com/mozilla/web-extをリリースしましたweb-ext run --target chromium

@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"

（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に取り組んでいます

ブートストラップ、足場、いくつかの自動化された前処理機能、および自動リロード（相互作用は必要ありません）を提供する、新しいグリントベースのプロジェクトを見つけました。

WebsecurifyからChrome拡張機能をブートストラップする

Macをお持ちの場合は、最も簡単な方法はアルフレッドアプリを使用することです。

ただ、取得パワーパックとアルフレッド・アプリケーションを、その後（私は⌘+⌥+ Rを使用するように）、以下のリンクで提供ワークフローを追加し、必要なホットキーをカスタマイズし、。それで全部です。

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

他のブラウザを使用する場合は、Alfred設定ワークフロー内で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です。

拡張機能を一晩リロード（更新）したいのですが、これは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);

よろしく、ピーター

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

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

/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);
    }
);});

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

これは、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に代わるものはここにあります。

Windowsの場合：AutoHotkey

Linuxの場合：xdotool、xbindkeys

Macの場合：Automator

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

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

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

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

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

はい、間接的に行うことができます！これが私の解決策です。

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つの利点は、孤立した世界の制限を無視できることです。参照コンテンツスクリプト実行環境を

ブラウザ同期

驚くべきBrowser-Syncの使用

• ソースコード（HTML、CSS、画像など）が変更されたときにブラウザー（すべて）を更新する
• Windows、MacOS、Linuxをサポート
• モバイルデバイスを使用してコードの更新を（ライブで）見ることもできます

MacOSでのインストール（他のOSにインストールするためのヘルプを表示）

NVMをインストールすると、どのバージョンのノードでも試すことができます

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

静的サイトでbrowser-syncを使用する方法

2つの例を見てみましょう。

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

この--serverオプションを使用すると、ターミナル内の任意の場所でローカルサーバーを実行--filesし、変更を追跡するファイルを指定できます。追跡するファイルをより具体的にしたいので、2番目の例ではack、特定のファイル拡張子をリストするために使用し（これらのファイルにスペースを含むファイル名がないことが重要です）、ipconfigMacOSで現在のIPを見つけるためにも使用しています。

動的サイトでブラウザ同期を使用する方法

PHPやRailsなどを使用している場合、サーバーは既に実行されていますが、コードを変更してもサーバーは自動的に更新されません。その--proxyため、サーバーのホストがどこにあるかをbrowser-syncに知らせるためにスイッチを使用する必要があります。

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

上記の例では、上のブラウザですでにRailsアプリが実行されてい 192.168.33.12:3000ます。Vagrantボックスを使用してVM上で実際に実行されますが、そのホストのポート3000を使用して仮想マシンにアクセスできました。私は--no-notify、コードを変更するたびにブラウザーに通知アラートを送信するブラウザー同期--no-openを停止し、サーバーの起動時にブラウザータブをすぐにロードするブラウザー同期動作を停止したいです。

重要： Railsを使用している場合に備えて、開発時にTurbolinksを使用しないでください。そうしないと、--proxyオプションを使用しているときにリンクをクリックできなくなります。

それが誰かに役立つことを願っています。私はブラウザーを更新するために多くのトリックを試しました（このStackOverflowの質問にAlfredAppを使用して以前に投稿した古い投稿でさえ）が、これは実際に進む方法です。ハックはもう必要ありません。ただ流れるだけです。

クレジット： 1つのコマンドでローカルのライブ再読み込みWebサーバーを起動する

直接行うことはできません。ごめんなさい。

機能として表示したい場合は、http：//crbug.com/newでリクエストできます。