Làm cách nào để tôi tự động tải lại tiện ích mở rộng Chrome tôi đang phát triển?

Tôi muốn phần mở rộng chrome của mình tải lại mỗi lần tôi lưu tệp trong thư mục tiện ích mở rộng mà không cần phải nhấp rõ ràng "tải lại" trong chrome: // extend /. Điều này có thể không?

Chỉnh sửa: Tôi biết rằng tôi có thể cập nhật khoảng thời gian Chrome tải lại các tiện ích mở rộng, đây là giải pháp nửa vời, nhưng tôi muốn kích hoạt trình chỉnh sửa của mình (emacs hoặc textmate) - lưu lại tải lại hoặc yêu cầu Chrome giám sát thư mục để thay đổi.

Bạn có thể sử dụng "Trình tải lại tiện ích mở rộng " cho Chrome:

Tải lại tất cả các tiện ích mở rộng đã giải nén bằng nút thanh công cụ của tiện ích mở rộng hoặc bằng cách duyệt đến " http: //reload.extensions "

Nếu bạn đã từng phát triển tiện ích mở rộng Chrome, bạn có thể muốn tự động hóa quá trình tải lại tiện ích mở rộng đã giải nén của mình mà không cần thông qua trang tiện ích mở rộng.

"Trình tải lại tiện ích mở rộng" cho phép bạn tải lại tất cả các tiện ích mở rộng đã giải nén bằng 2 cách:

1 - Nút thanh công cụ của tiện ích mở rộng.

2 - Duyệt đến " http: //reload.extensions ".

Biểu tượng thanh công cụ sẽ tải lại các phần mở rộng đã giải nén chỉ bằng một cú nhấp chuột.

"Tải lại bằng cách duyệt" được dùng để tự động hóa quá trình tải lại bằng cách sử dụng tập lệnh "xây dựng bài" - chỉ cần thêm trình duyệt vào " http: //reload.extensions " bằng Chrome vào tập lệnh của bạn và bạn sẽ có cửa sổ Chrome được làm mới.

Cập nhật: Kể từ ngày 14 tháng 1 năm 2015, tiện ích mở rộng có nguồn mở và có sẵn trên GitHub .

Cập nhật : Tôi đã thêm một trang tùy chọn, để bạn không phải tìm và chỉnh sửa thủ công ID của tiện ích mở rộng nữa. CRX và mã nguồn có tại: https://github.com/Rob--W/Chrom-Extension-Reloader
Cập nhật 2: Đã thêm lối tắt (xem kho lưu trữ của tôi trên Github).
_{Mã ban đầu, bao gồm các chức năng cơ bản được hiển thị dưới đây .}

Tạo tiện ích mở rộng và sử dụng phương thức Hành động của Trình duyệt kết hợp với chrome.extension.managementAPI để tải lại tiện ích mở rộng đã giải nén của bạn.

Mã bên dưới thêm một nút vào Chrome, sẽ tải lại tiện ích mở rộng khi nhấp.

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: Chọn bất kỳ biểu tượng 48x48 đẹp nào, ví dụ:

trong bất kỳ chức năng hoặc sự kiện

chrome.runtime.reload();

sẽ tải lại phần mở rộng của bạn ( tài liệu ). Bạn cũng cần thay đổi tệp manifest.json , thêm:

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

Tôi đã tạo một tập lệnh nhúng đơn giản để tải lại nóng:

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

Nó theo dõi các thay đổi tập tin trong thư mục của một phần mở rộng. Khi phát hiện thay đổi, nó tải lại tiện ích mở rộng và làm mới tab hoạt động (để kích hoạt lại tập lệnh nội dung được cập nhật).

• Hoạt động bằng cách kiểm tra dấu thời gian của tệp
• Hỗ trợ các thư mục lồng nhau
• Tự động vô hiệu hóa trong cấu hình sản xuất

Một giải pháp khác là tạo tập lệnh tải gan tùy chỉnh (phần mở rộng-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();
    }
  }
};

Tập lệnh này kết nối với máy chủ hepeload bằng websockets. Sau đó, nó sẽ phát ra một lệnh gọi chrome.r nb.reload () khi tải lại tin nhắn từ hepeload. Bước tiếp theo sẽ là thêm tập lệnh này để chạy dưới dạng tập lệnh nền trong tệp manifest.json và voila của bạn!

Lưu ý: đây không phải là giải pháp của tôi. Tôi chỉ đăng nó. Tôi đã tìm thấy nó trong mã được tạo của Trình tạo tiện ích mở rộng Chrome (Công cụ tuyệt vời!). Tôi đang đăng bài này ở đây vì nó có thể giúp ích.

Tiện ích mở rộng của Chrome có hệ thống cấp phép mà nó sẽ không cho phép (một số người trong SO gặp vấn đề tương tự như bạn ), do đó, yêu cầu họ "thêm tính năng này" sẽ không hoạt động IMO. Có một thư từ Phần mở rộng Chromium Google Groups với một giải pháp (lý thuyết) được đề xuất sử dụng chrome.extension.getViews(), nhưng cũng không được đảm bảo để hoạt động.

Nếu có thể thêm vào manifest.jsonmột số trang nội bộ Chrome như chrome://extensions/, thì có thể tạo một plugin tương tác với Reloadneo và sử dụng một chương trình bên ngoài như XRefresh (Plugin Firefox - có phiên bản Chrome sử dụng Ruby và WebSocket ), bạn sẽ đạt được những gì bạn cần:

XRefresh là một plugin trình duyệt sẽ làm mới trang web hiện tại do thay đổi tệp trong các thư mục được chọn. Điều này cho phép chỉnh sửa trang trực tiếp với trình chỉnh sửa HTML / CSS yêu thích của bạn.

Không thể làm điều đó, nhưng tôi nghĩ bạn có thể sử dụng khái niệm tương tự theo một cách khác.

Bạn có thể thử tìm giải pháp của bên thứ ba thay vào đó, sau khi thấy các sửa đổi trong tệp (tôi không biết emacs cũng không phải là Textmate, nhưng trong Emacs có thể liên kết một cuộc gọi ứng dụng trong hành động "lưu tệp"), chỉ cần nhấp vào tọa độ cụ thể của một ứng dụng cụ thể: trong trường hợp này là Reloadmỏ neo từ tiện ích mở rộng của bạn trong quá trình phát triển (bạn để lại một cửa sổ Chrome được mở chỉ để tải lại này).

(Điên như địa ngục nhưng nó có thể hoạt động)

Đây là một chức năng mà bạn có thể sử dụng để xem các tệp thay đổi và tải lại nếu phát hiện thay đổi. Nó hoạt động bằng cách bỏ phiếu cho họ thông qua AJAX và tải lại qua window.location.reload (). Tôi cho rằng bạn không nên sử dụng điều này trong một gói phân phối.

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'));

Có lẽ tôi đến bữa tiệc muộn một chút, nhưng tôi đã giải quyết nó cho tôi bằng cách tạo https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

Nó hoạt động bằng cách tải lại chrome://extensionstrang, bất cứ khi nào file.changesự kiện được gửi qua websockets.

Có file.changethể tìm thấy một ví dụ dựa trên Gulp về cách phát ra sự kiện khi thay đổi tệp trong thư mục tiện ích mở rộng tại đây: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Tại sao tải lại toàn bộ tab thay vì chỉ sử dụng api quản lý tiện ích mở rộng để tải lại / bật lại tiện ích mở rộng? Hiện tại việc vô hiệu hóa và bật lại các tiện ích mở rộng khiến bất kỳ cửa sổ kiểm tra mở nào (nhật ký bảng điều khiển, v.v.) đóng lại, điều mà tôi thấy là quá khó chịu trong quá trình phát triển hoạt động.

Có một plugin tải lại tự động nếu bạn đang phát triển bằng cách sử dụng webpack: https://github.com/rubenspgcavalcante/webpack-chrom-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

Cũng đi kèm với công cụ CLI nếu bạn không muốn sửa đổi webpack.config.js:

npx wcer

Lưu ý: một kịch bản nền (trống) là bắt buộc ngay cả khi bạn không cần nó bởi vì đó là nơi nó tiêm mã tải lại.

Các tệp nội dung của bạn có tệp html và tệp kê khai không thể thay đổi nếu không cài đặt tiện ích mở rộng, nhưng tôi tin rằng các tệp JavaScript được tải động cho đến khi tiện ích mở rộng được đóng gói.

Tôi biết điều này vì một dự án hiện tại đang hoạt động thông qua API tiện ích mở rộng của Chrome và dường như tải mỗi lần tôi làm mới một trang.

Có thể một chút trả lời muộn nhưng tôi nghĩ rằng crxreload có thể làm việc cho bạn. Đó là kết quả của tôi khi cố gắng có một quy trình tải lại khi lưu trong khi phát triển.

Tôi đang sử dụng một phím tắt để tải lại. Tôi không muốn tải lại tất cả thời gian khi tôi lưu một tệp

Vì vậy, cách tiếp cận của tôi rất nhẹ và bạn có thể để lại chức năng tải lại

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

Bây giờ nhấn Ctrl + M trong trình duyệt chrome để tải lại

Sử dụng npm initđể tạo một gói.json trong thư mục gốc, sau đó

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

sau đó tạo một gulpfile.js

trông giống như:

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

Điều này hoạt động với tôi khi phát triển với CrossRider, bạn có thể xem để thay đổi đường dẫn bạn xem các tệp tại, đồng thời giả sử bạn đã cài đặt npm và nút.

Disclaimer: Tôi đã tự phát triển phần mở rộng này.

Clerc - cho khách hàng tải lại tiện ích mở rộng Chrome

Kết nối với máy chủ tương thích LiveReload để tự động tải lại tiện ích mở rộng của bạn mỗi khi bạn lưu.

Phần thưởng: với một chút công việc phụ của bạn, bạn cũng có thể tự động tải lại các trang web mà tiện ích mở rộng của bạn thay đổi.

Hầu hết các nhà phát triển trang web sử dụng một hệ thống xây dựng với một số loại trình theo dõi tự động xây dựng các tệp của họ và khởi động lại máy chủ của họ và tải lại trang web.

Phát triển các tiện ích mở rộng không cần phải khác biệt. Clerc mang tự động hóa tương tự này cho các nhà phát triển Chrome. Thiết lập hệ thống xây dựng với máy chủ LiveReload và Clerc sẽ lắng nghe các sự kiện tải lại để làm mới tiện ích mở rộng của bạn.

Gotcha lớn duy nhất là các thay đổi đối với manifest.json. Bất kỳ lỗi chính tả nhỏ nào trong bảng kê khai có thể sẽ khiến các lần thử tải lại không thành công và bạn sẽ bị kẹt khi gỡ cài đặt / cài đặt lại tiện ích mở rộng để tải lại các thay đổi của bạn.

Clerc chuyển tiếp tin nhắn tải lại hoàn chỉnh đến tiện ích mở rộng của bạn sau khi nó tải lại, do đó bạn có thể tùy ý sử dụng tin nhắn được cung cấp để kích hoạt các bước làm mới thêm.

Những người tuyệt vời tại mozilla vừa phát hành https://github.com/mozilla/web-ext mà bạn có thể sử dụng để khởi chạyweb-ext run --target chromium

Cảm ơn @GmonC và @Arik và một chút thời gian rảnh rỗi, tôi quản lý để làm việc này. Tôi đã phải thay đổi hai tập tin để làm cho công việc này.

(1) Cài đặt LiveReload và Chrome Extension cho ứng dụng đó. Điều này sẽ gọi một số kịch bản về thay đổi tập tin.

(2) Mở <LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) thay đổi dòng #509thành

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

(4) Bây giờ cài đặt một tiện ích mở rộng khác Extensions Reloadercó trình xử lý liên kết hữu ích tải lại tất cả các tiện ích mở rộng phát triển khi điều hướng đến"http://reload.extensions"

(5) Bây giờ thay đổi phần mở rộng background.min.jsđó theo cách này

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

thay thế bằng

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

Mở ứng dụng LiveReload, ẩn nút Trình tải lại tiện ích mở rộng và kích hoạt tiện ích mở rộng LiveReload bằng cách nhấp vào nút trên thanh công cụ, giờ đây bạn sẽ tải lại trang và tiện ích mở rộng trên mỗi thay đổi tệp trong khi sử dụng tất cả các tính năng khác từ LiveReload (tải lại css, tải lại hình ảnh, v.v.)

Chỉ có điều tệ ở đây là bạn sẽ phải lặp lại quy trình thay đổi tập lệnh trên mỗi bản cập nhật tiện ích mở rộng. Để tránh cập nhật, hãy thêm phần mở rộng dưới dạng giải nén.

Khi tôi có nhiều thời gian hơn để giải quyết vấn đề này, có lẽ tôi sẽ tạo tiện ích mở rộng giúp loại bỏ nhu cầu cho cả hai tiện ích mở rộng này.

Cho đến lúc đó, tôi đang làm việc trên phần mở rộng Projext Axeman của mình

Chỉ cần tìm thấy một dự án dựa trên grunt mới cung cấp bootstrapping, giàn giáo, một số khoa xử lý trước tự động, cũng như tự động tải lại (không cần tương tác).

Bootstrap Tiện ích mở rộng Chrome của bạn từ Websecurify

Nếu bạn có máy Mac, way cách dễ nhất là với Ứng dụng Alfred!

Chỉ cần tải Ứng dụng Alfred với Powerpack , sau đó thêm quy trình làm việc được cung cấp trong liên kết bên dưới và tùy chỉnh phím nóng bạn muốn (tôi thích sử dụng ⌘ + + R). Đó là tất cả.

Giờ đây, mỗi khi bạn sử dụng phím nóng, Google Chrome sẽ tải lại, bất kể bạn đang sử dụng ứng dụng nào vào lúc đó.

Nếu bạn muốn sử dụng trình duyệt khác, hãy mở AppleScript bên trong Alfred Preferences Workflows và thay thế "Google Chrome" bằng "Firefox", "Safari", ...

Tôi cũng sẽ hiển thị ở đây nội dung của tập lệnh / usr / bin / osascript được sử dụng trong tệp ReloadChrome.alfredworkflow để bạn có thể thấy những gì nó đang làm.

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

Tệp quy trình công việc là ReloadChrom.alfredworkflow .

Tôi muốn tải lại (cập nhật) các tiện ích mở rộng của mình qua đêm, đây là những gì tôi sử dụng trong 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);

Trân trọng, Peter

Tôi đã rẽ nhánh LiveJS để cho phép tải lại trực tiếp Ứng dụng được đóng gói. Chỉ cần bao gồm tệp trong ứng dụng của bạn và mỗi khi bạn lưu tệp, ứng dụng sẽ tự động tải.

Như đã đề cập trong các tài liệu: dòng lệnh sau sẽ tải lại một ứng dụng

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

Vì vậy, tôi chỉ cần tạo một kịch bản shell và gọi tệp đó từ gulp. Siêu đơn giản:

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

chạy các lệnh xem cần thiết của bạn trên các tập lệnh và gọi tác vụ tải lại khi bạn muốn. Sạch sẽ, đơn giản.

Đây là nơi phần mềm như AutoIt hoặc các lựa chọn thay thế tỏa sáng. Điều quan trọng là viết một kịch bản mô phỏng giai đoạn thử nghiệm hiện tại của bạn. Làm quen với việc sử dụng ít nhất một trong số chúng vì nhiều công nghệ không đi kèm với quy trình kiểm tra / quy trình làm việc rõ ràng.

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("^`")

Rõ ràng bạn thay đổi mã cho phù hợp với nhu cầu kiểm tra / lặp của bạn. Đảm bảo các nhấp chuột tab là đúng với vị trí thẻ neo trong trang web chrome: // extend. Bạn cũng có thể sử dụng liên quan đến chuyển động chuột cửa sổ và các macro khác.

Tôi sẽ thêm tập lệnh vào Vim theo cách tương tự như sau:

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

Điều này có nghĩa là khi tôi ở Vim, tôi nhấn nút phía trên ENTER (thường chịu trách nhiệm: | và \) được gọi là nút lãnh đạo và theo dõi nó với chữ 'A' và nó lưu và bắt đầu tập lệnh giai đoạn thử nghiệm của tôi.

Vui lòng đảm bảo điền vào các phần {input ...} trong tập lệnh Vim / hotkey ở trên một cách thích hợp.

Nhiều biên tập viên sẽ cho phép bạn làm một cái gì đó tương tự với các phím nóng.

Các lựa chọn thay thế cho AutoIt có thể được tìm thấy ở đây .

Dành cho Windows: AutoHotkey

Đối với Linux: xdotool, xbindkey

Dành cho máy Mac: Máy tự động

Tôi chủ yếu phát triển trong Firefox, nơi web-ext runtự động tải lại tiện ích mở rộng sau khi tệp thay đổi. Sau đó, khi nó sẵn sàng, tôi thực hiện một thử nghiệm cuối cùng trong Chrome để đảm bảo không có bất kỳ vấn đề nào không xuất hiện trong Firefox.

Tuy nhiên, nếu bạn muốn phát triển chủ yếu trong Chrome và không muốn cài đặt bất kỳ tiện ích mở rộng của bên thứ 3 nào, thì một tùy chọn khác là tạo một test.htmltệp trong thư mục của tiện ích mở rộng và thêm một loạt SSCCE vào đó. Tập tin đó sử dụng bình thường<script> thẻ để thêm tập lệnh mở rộng.

Bạn có thể sử dụng 95% cho thử nghiệm và sau đó tải lại tiện ích mở rộng khi bạn muốn thử nghiệm nó trên các trang web trực tiếp.

Điều đó không tái tạo chính xác môi trường mà tiện ích mở rộng hoạt động, nhưng nó đủ tốt cho nhiều thứ đơn giản.

Tác giả đã đề xuất phiên bản tiếp theo của plugin webpack đó: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Nó hoạt động rất tốt cho tôi.

Vâng, bạn có thể làm điều đó một cách gián tiếp! Đây là giải pháp của tôi.

Trong manifest.json

{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "content_scripts":[{
        "run_at":"document_end",
        "matches":["http://*/*"],
        "js":["/scripts/inject.js"]
    }]
}

Trong tiêm.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);
})();

Tập lệnh được chèn của bạn có thể đưa tập lệnh khác từ bất kỳ vị trí nào.

Một lợi ích khác từ kỹ thuật này là bạn có thể bỏ qua giới hạn của thế giới bị cô lập . xem môi trường thực thi tập lệnh nội dung

BROWSER-SYNC

Sử dụng Trình duyệt đồng bộ hóa tuyệt vời

• cập nhật trình duyệt (bất kỳ) khi mã nguồn thay đổi (HTML, CSS, hình ảnh, v.v.)
• hỗ trợ Windows, MacOS và Linux
• bạn thậm chí có thể xem các cập nhật mã của mình (trực tiếp) bằng thiết bị di động của mình

Cài đặt sẵn trên MacOS (xem trợ giúp của họ để cài đặt trên hệ điều hành khác)

Cài đặt NVM, vì vậy bạn có thể thử bất kỳ phiên bản Node nào

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

Cách sử dụng đồng bộ hóa trình duyệt cho các trang web tĩnh

Hãy xem hai ví dụ:

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

Các --servertùy chọn cho phép bạn chạy một máy chủ bất cứ nơi nào địa phương bạn đang ở trong thiết bị đầu cuối của bạn và --filescho phép bạn xác định những file này sẽ được theo dõi các thay đổi. Tôi thích cụ thể hơn cho các tệp được theo dõi, vì vậy trong ví dụ thứ hai tôi sử dụng ackđể liệt kê các phần mở rộng tệp cụ thể (điều quan trọng là các tệp đó không có tên tệp có dấu cách) và cũng sử dụngipconfig để tìm IP hiện tại của tôi trên MacOS.

Cách sử dụng đồng bộ hóa trình duyệt cho các trang web động

Trong trường hợp bạn đang sử dụng PHP, Rails, v.v., bạn đã có một máy chủ đang chạy, nhưng nó không tự động làm mới khi bạn thay đổi mã của mình. Vì vậy, bạn cần sử dụng công --proxytắc để cho phép đồng bộ hóa trình duyệt biết nơi lưu trữ của máy chủ đó.

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

Trong ví dụ trên, tôi đã có ứng dụng Rails chạy trên trình duyệt của mình 192.168.33.12:3000. Nó thực sự chạy trên máy ảo bằng hộp Vagrant, nhưng tôi có thể truy cập vào máy ảo bằng cổng 3000 trên máy chủ đó. Tôi muốn --no-notifydừng đồng bộ hóa trình duyệt gửi cho tôi thông báo thông báo trên trình duyệt mỗi khi tôi thay đổi mã và--no-open dừng hành vi đồng bộ hóa trình duyệt tải ngay lập tức tab trình duyệt khi máy chủ khởi động.

QUAN TRỌNG: Chỉ trong trường hợp bạn đang sử dụng Rails, tránh sử dụng Turbolinks khi phát triển, nếu không bạn sẽ không thể nhấp vào liên kết của mình trong khi sử dụng --proxytùy chọn.

Hy vọng nó sẽ hữu ích cho ai đó. Tôi đã thử nhiều thủ thuật để làm mới trình duyệt (thậm chí một bài đăng cũ tôi đã gửi về câu hỏi StackOverflow này bằng cách sử dụng AlfredApp trước đây), nhưng đây thực sự là cách tốt nhất; Không còn hack, nó chỉ chảy.

CREDIT: Bắt đầu một máy chủ web tải lại trực tiếp cục bộ bằng một lệnh

Nó không thể được thực hiện trực tiếp. Lấy làm tiếc.

Nếu bạn muốn xem nó như một tính năng, bạn có thể yêu cầu nó tại http://crorms.com/new