개발중인 Chrome 확장 프로그램을 자동으로 다시로드하려면 어떻게하나요?


263

chrome : // extensions /에서 "reload"를 명시 적으로 클릭하지 않고도 확장 폴더에 파일을 저장할 때마다 Chrome 확장 프로그램을 다시로드하고 싶습니다. 이게 가능해?

편집 : Chrome이 확장 프로그램을 다시로드 하는 간격업데이트 할 수 있음을 알고 있습니다. 이 솔루션은 중간 솔루션입니다.하지만 편집기 (emacs 또는 textmate)를 트리거하여 다시로드하거나 Chrome에 모니터링을 요청하십시오. 변경 디렉토리


2
그것은 UI가 크롬 활성화에서 다시로드가 트리거 될 때 더 빠른 것 같다 : // 플래그 / # 활성화 - 응용 프로그램을-devtool - 응용 프로그램
에릭

패키지 응용 프로그램을 실시간으로 다시로드 할 수 있도록 LiveJS 를 포크 했습니다 . 앱에 파일을 포함시키기 만하면 파일을 저장할 때마다 앱이 자동으로 다시로드됩니다.
오즈 라모스

@Oz Ramos, LiveJS 포크는 어디에 있습니까?
Josh

아시다시피 : "LiveJS"링크는 실제로 LiveJS가 아니라 포크에 링크되어 있습니다.
Josh

6
이것은 요청 된 질문에 대한 답변은 아니지만 ctrl-R 또는 cmd-R (키를 눌러 확장 프로그램을 쉽게 다시로드 할 수 있음을 깨달은 후이 (또는 다른 확장 로딩 도우미 확장)을 원하지 않는다고 언급하고 싶습니다. 확장 프로그램의 배경 창에서 OS에 따라 다름. 나는 이것이 내가 시도한 것보다 내 워크 플로우에 더 잘 맞는다는 것을 알았으며 파일이 일관성이없는 상태에서 자동 다시로드 문제를 피합니다.
Don Hatch

답변:


162

Chrome 용 ' 확장 프로그램 리 로더 ' 를 사용할 수 있습니다 .

확장 프로그램의 툴바 버튼을 사용하거나 " http : //reload.extensions "로 이동 하여 압축이 풀린 확장 프로그램을 모두 다시로드합니다 .

Chrome 확장 프로그램을 개발 한 경우 확장 프로그램 페이지를 거치지 않고도 압축이 풀린 확장 프로그램을 다시로드하는 과정을 자동화하고 싶을 수 있습니다.

"Extensions Reloader"를 사용하면 다음과 같은 두 가지 방법으로 압축을 푼 모든 확장을 다시로드 할 수 있습니다.

1-확장 프로그램의 툴바 버튼.

2- " http : //reload.extensions "로 이동합니다.

툴바 아이콘은 클릭 한 번으로 압축이 풀린 확장 프로그램을 다시로드합니다.

"찾아보기로 다시로드"는 "포스트 빌드"스크립트를 사용하여 다시로드 프로세스를 자동화하기위한 것입니다 . Chrome을 사용하여 스크립트 에 " http : //reload.extensions "에 찾아보기를 추가 하면 새로 고침 된 Chrome 창이 나타납니다.

업데이트 : 2015 년 1 월 14 일부터 확장 프로그램은 오픈 소스이며 GitHub에서 사용할 수 있습니다 .


3
이것은 지금까지 가장 좋은 솔루션이지만 사용중인 파일을 수정할 때마다 확장명을 쉽게 업데이트 할 수는 없습니다.
Andrey Fedorov

2
감사. 내가 PhpStorm을 사용하고 "reload.extensions"URL과 함께 chrome.exe를 호출하는 툴바 버튼을 추가했다고 언급하고 싶었습니다. 코드를 테스트하고 싶을 때마다 해당 버튼을 누르면 업데이트 된 애드온으로 Chrome 팝업이 나타납니다.
Arik

30
와우, 방금 파일을 수정할 때 grunt-open 을 사용하여 gruntjs 가이 플러그인과 작동 하도록했습니다. 이제는 livereload와 똑같이 작동하지만 지정된 플러그인 파일 중 하나를 수정할 때마다 성가신 크롬 창이 열립니다. 감사! http://reload.extensions
GabLeRoux

1
@ GabLeRoux 나는 누군가가 이미 그것을했는지 찾기 위해 여기에 왔습니다. 그것은 매력처럼 작동합니다.
polkovnikov.ph

1
@AlexanderMills 슬프게도 매번 새 탭을 열지 않고는 할 수 없었습니다. 더 나은 해결책을 찾으면. 적어도 github.com/arikw/chrome-extensions-reloader를
GabLeRoux

58

업데이트 : 옵션 페이지를 추가 했으므로 더 이상 확장 프로그램의 ID를 더 이상 수동으로 찾아 편집 할 필요가 없습니다. CRX 및 소스 코드는 https://github.com/Rob--W/Chrome-Extension-Reloader
업데이트 2 : 바로 가기 추가 (Github의 저장소 참조)에 있습니다. 기본 기능
포함 된 원본 코드 는 다음과 같습니다 .


확장을 작성 하고 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);
});

icon48.png: 멋진 48x48 아이콘을 선택하십시오 (예 :
구글 크롬 구글 크롬


1
@trusktr Scott의 답변은 배경 페이지 만 다시로드합니다. 그러나 두 답변을 결합하여 (Scotts 답변 + 도우미 확장) 확장 프로그램의 파일이 변경 될 때 확장이 자동으로 다시로드되도록 할 수 있습니다. 그러나 확장 도구를 다시로드하면 devtools가 닫히 므로이 방법을 권장하지 않습니다. 나는 종종 테스트 확장으로 바이올린을 피우고 구문이 불완전하더라도 변경 사항을 자주 저장합니다. 실제 자동 재로드가 활성화되어 있으면 확장 프로그램이 중단됩니다.
Rob W

@RobW 좋은 지적. 코드를 작성하는 과정에서 종종 저장하므로 코드가 문제의 플러그인을 확실히 깨뜨릴 것입니다.
trusktr

1
@Sudarshan 사용을 제안 했습니다 chrome.i18n.getMessage("@@extension_id"). 그러나 이것은 현재 확장 의 extensionID를 반환하는데 , 이는 확장 프로그램이 managementAPI를 사용하여 자체를 다시로드 할 수 없기 때문에 유용 하지 않습니다 (비활성화 한 후에는 확장을 다시 활성화 할 기회가 없습니다).
Rob W

40

어떤 기능이나 이벤트에서

chrome.runtime.reload();

확장 프로그램을 다시로드합니다 ( docs ). 또한 manifest.json 파일 을 변경 하여 다음을 추가해야합니다.

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

나를 위해이 솔루션은 다음 방법으로 매니페스트 파일에 지정된 index.html의 스크립트에 chrome.runtime.reload ()를 쓴 경우에만 작동했습니다. ** "background": { "page": "index. html ", **. content_script js 파일에서이 함수에 액세스 할 수 없습니다. 보안 분야를위한 것이라고 생각합니다.
titusfx 2016 년

콘텐츠 스크립트가 크롬 API와 통신 할 수 없습니다. 그 일을 위해 당신은 필요 사용 메시지
marcelocra

에 전화 chrome.runtime.reload()하면 실제로 어떻게됩니까? 여러 페이지 / 탭을 새로 고침합니까?
Alexander Mills

5
나는 우리가 호출해야 추측하고 chrome.runtime.reload()배경 스크립트에서
알렉산더 밀스

나를 위해 일했다. 감사합니다
MikeMurko

39

핫 리로드를 수행하는 간단한 내장 스크립트를 만들었습니다.

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

확장 디렉토리에서 파일 변경을 감시합니다. 변경 사항이 감지되면 확장 프로그램을 다시로드하고 활성 탭을 새로 고쳐 업데이트 된 콘텐츠 스크립트를 다시 트리거합니다.

  • 파일의 타임 스탬프를 확인하여 작동
  • 중첩 된 디렉토리를 지원합니다
  • 프로덕션 구성에서 자동으로 비활성화

3
"걸쭉한 맛이 나는"솔루션을 찾고 있다면 이것이 바로 그 것입니다.
ow3n

1
잘 작동했습니다. npm 패키지 만들기를 고려 했습니까?
pixelearth

@pixelearth 그래, 왜 안돼? 흠, 그러나 유스 케이스는 무엇입니까? 당신 npm install crx-hotreload확장의 디렉토리에 다음과 같은 스크립트를 참조 "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? 내가 틀렸다면 수정 해
Vitaly Gordon

1
@MilfordCubicle background.js 파일에서 호출 할 수있는 메소드가있는 객체를 내보내는 것이 좋습니다. 뭔가 그래서 import reloader from 'hot-reload'스크립트 reloader.check에서 다음 ()
pixelearth

3
대답은 더 많은 투표를 필요로합니다. --watch빌드 과정에 완료 한 후에 만 ​​업데이트 할 수 있도록 빌드 폴더에 넣을 수 있기 때문에 Webpack 과 함께 사용 하면 효과적입니다. 복잡한 Webpack 빌드 후 명령 플러그인이 없습니다.
V. Rubinetti

10

또 다른 해결책은 사용자 정의 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();
    }
  }
};

이 스크립트는 웹 소켓을 사용하여 livereload 서버에 연결합니다. 그런 다음 livereload에서 메시지를 다시로드 할 때 chrome.runtime.reload () 호출을 발행합니다. 다음 단계는 manifest.json 및 voila에서 백그라운드 스크립트로 실행되도록이 스크립트를 추가하는 것입니다!

참고 : 이것은 내 해결책이 아닙니다. 방금 게시하고 있습니다. Chrome 확장 프로그램 생성기 (Great tool!) 에서 생성 된 코드에서 찾았습니다 . 도움이 될 수 있으므로 여기에 게시하고 있습니다.


9

Chrome 확장 프로그램은 허용하지 않는 권한 시스템 (SO의 일부 사용자 와 같은 문제가 있음 )을 가지고 있으므로 '이 기능 추가'를 요청하면 IMO가 작동하지 않습니다. 이 크롬 확장 Google 그룹스에서 메일이와 있어요 제안 된 솔루션 (이론) 를 사용 chrome.extension.getViews()하지만 두 작업을 보장 할 수 없습니다.

manifest.json와 같은 일부 Chrome 내부 페이지 에 추가 할 수 있다면 앵커와 chrome://extensions/상호 작용하는 플러그인을 만들고 XRefreshReload 와 같은 외부 프로그램 (Firefox 플러그인 -Ruby 및 WebSocket을 사용 하는 Chrome 버전이 있음) 을 만들 수 있습니다 ), 당신은 당신이 필요한 것을 달성 할 것입니다 :

XRefresh는 선택한 폴더의 파일 변경으로 인해 현재 웹 페이지를 새로 고치는 브라우저 플러그인입니다. 이를 통해 선호하는 HTML / CSS 편집기로 라이브 페이지 편집을 수행 할 수 있습니다.

그렇게 할 수는 없지만 동일한 개념을 다른 방식으로 사용할 수 있다고 생각합니다.

대신 파일에서 수정 사항을 본 후에 타사 솔루션을 찾으려고 시도 할 수 있습니다 (emacs는 Textmate도 모르지만 Emacs에서는 "파일 저장"작업 내에서 응용 프로그램 호출을 바인딩 할 수 있습니다). 특정 응용 프로그램의 특정 좌표에서 클릭 :이 경우 Reload개발중인 확장 프로그램 의 앵커입니다 (이 재로드를 위해 Chrome 창을 열어 두십시오).

(지옥처럼 미쳤지 만 작동 할 수 있음)


7

다음은 파일에서 변경 사항을보고 변경 사항이 감지되면 다시로드하는 데 사용할 수있는 기능입니다. 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'));

추가 가능 : reloadOnChange (chrome.extension.getURL ( '/ manifest.json'));
Scott

pastebin.com/mXbSPkeu를 시도 했지만 확장이 업데이트 되지 않았습니다 (manifest 항목, 콘텐츠 스크립트, 브라우저 동작) (Ubuntu 11.10, Chrome 18). 에만 업데이트 된 파일은 배경 페이지 (변경 console.log메시지가 나타나지 않습니다).
Rob W

"파일 변경 사항을 확인하고 변경 사항이 감지되면 다시로드하십시오." 내 인생에서 파일이 변경되었음을 어떻게 알 수 있습니까? 굉장히 들리므로 이해하도록 도와주세요!
JasonDavis

oo 지금, 파일 내용의 사본을 저장하고 캐시 된 버전을 ajax 라이브 버전과 비교하고 있습니다 .... clever!
JasonDavis

6

어쩌면 나는 파티에 조금 늦었지만 https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln 을 만들어서 나를 위해 해결했습니다.

웹 소켓을 통해 이벤트가 수신 chrome://extensions될 때마다 페이지 를 다시로드하여 작동합니다 file.change.

file.change확장 폴더에서 파일 변경시 이벤트 를 생성하는 방법에 대한 Gulp 기반 예제 는 다음에서 찾을 수 있습니다. https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

확장 관리 API를 사용하여 확장을 다시로드 / 다시 활성화하는 대신 전체 탭을 다시로드하는 이유는 무엇입니까? 현재 확장을 비활성화하고 다시 활성화하면 열려있는 검사 창 (콘솔 로그 등)이 닫히므로 활성 개발 중에 너무 성가신 것으로 나타났습니다.


좋은! 새로운 업그레이드 된 reload () 함수에 대한 PR이 있습니다.
caesarsol

4

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

참고 : (빈) 백그라운드 스크립트는 필요하지 않더라도 다시로드 코드를 삽입하기 때문에 필요합니다.


보관은 이미 :(를 가리키는 github.com/rubenspgcavalcante/webpack-extension-reloader :하지만 활성 아직 개발 크로스 브라우저, 그리고
con--

3

확장 프로그램을 설치하지 않으면 html 및 매니페스트 파일이있는 콘텐츠 파일을 변경할 수 없지만 확장 프로그램이 압축 될 때까지 JavaScript 파일이 동적으로로드된다고 생각합니다.

Chrome 확장 프로그램 API를 통해 작업중 인 현재 프로젝트로 인해 이것을 알고 있으며 페이지를 새로 고칠 때마다로드되는 것 같습니다.


사용중인 버전을 모르지만 16.0.912.63m로 Chrome은 모든 파일을 자동으로 다시로드합니다. 매니페스트를 제외하고.
Zequez

@ Zequez : 파일이 다시로드되지 않습니다. :(
Randomblue

네 말이 맞아 문서를 사용하지 않고 스크립트를 다시로드하는 스크립트를 호출하는 옵션 페이지를 개발 중이었습니다. content_script 스크립트는
새로 고침

3

어쩌면 조금 늦게 대답하지만 crxreload 가 효과가 있다고 생각 합니다. 개발하는 동안 저장시 다시로드 워크 플로우를 시도한 결과입니다.


3

바로 가기를 사용하여 다시로드하고 있습니다. 파일을 저장할 때 항상 다시로드하고 싶지 않습니다.

내 접근 방식은 가벼우므로 다시로드 기능을 그대로 둘 수 있습니다.

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

이제 크롬 브라우저에서 Ctrl + M을 눌러 다시로드하십시오.


browserAction에서 다시로드 기능을 사용하여 버튼 클릭시 다시로드 할 수도 있습니다. stackoverflow.com/questions/30427908/...
powerd

예. chrome.runtime.reload ()는 언제 어디서나로드 할 수 있습니다. 나는 편집기를 사용한다 : ctrl + s> alt + tab> ctrl + m. background..js 콘솔을 연 상태 마우스를 사용하지 않고 빠르게 작동
Johan Hoeksma

2

사용 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

면책 조항 :이 확장 프로그램을 직접 개발했습니다.

Clerc-Chrome Live Extension 리로딩 클라이언트 용

LiveReload 호환 서버에 연결하여 저장할 때마다 확장 프로그램을 자동으로 다시로드하십시오.

보너스 : 약간의 추가 작업으로 확장 프로그램이 변경하는 웹 페이지를 자동으로 다시로드 할 수도 있습니다.

대부분의 웹 페이지 개발자는 파일을 자동으로 빌드하고 서버를 다시 시작하고 웹 사이트를 다시로드하는 일종의 감시자가있는 빌드 시스템을 사용합니다.

확장 기능 개발이 다를 필요는 없습니다. Clerc는 이와 동일한 자동화를 Chrome 개발자에게 제공합니다. LiveReload 서버로 빌드 시스템을 설정하면 Clerc는 재로드 이벤트를 수신하여 확장을 새로 고칩니다.

유일한 큰 문제는 manifest.json의 변경입니다. 매니페스트에 작은 오타가있을 경우 추가로 다시로드 시도가 실패 할 수 있으며 변경 내용을 다시로드하기 위해 확장 프로그램을 제거 / 다시 설치해야합니다.

Clerc는 재로드 후 전체 재로드 메시지를 확장으로 전달하므로 선택적으로 제공된 메시지를 사용하여 추가 새로 고침 단계를 트리거 할 수 있습니다.



1

@GmonC와 @Arik 덕분에 여가 시간이 있었 으므로이 작업을 수행 할 수 없었습니다. 이 작업을 수행하기 위해 두 개의 파일을 변경해야했습니다.

(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 확장 프로그램을 만들고 있습니다.



1

Mac이 있다면 가장 쉬운 방법은 Alfred App입니다!

Powerpack과 함께 Alfred App을 얻은 다음 아래 링크에 제공된 워크 플로우를 추가하고 원하는 단축키를 사용자 정의하십시오 (⌘ + ⌥ + R 사용하고 싶습니다). 그게 다야.

이제 단축키를 사용할 때마다 현재 사용 중인 애플리케이션에 관계없이 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

확장 프로그램을 밤새 다시로드 (업데이트)하고 싶습니다. 이것이 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);

감사합니다, 피터


0

패키지 응용 프로그램을 실시간으로 다시로드 할 수 있도록 LiveJS 를 포크 했습니다 . 앱에 파일을 포함시키기 만하면 파일을 저장할 때마다 앱이 자동으로 다시로드됩니다.


0

문서에서 언급했듯이 다음 명령 줄은 앱을 다시로드합니다.

/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

AutoIt 또는 대안과 같은 소프트웨어가 빛을 발하는 곳입니다. 핵심은 현재 테스트 단계를 에뮬레이트하는 스크립트를 작성하는 것입니다. 많은 기술에 명확한 워크 플로우 / 테스트 경로가 제공되지 않으므로 이들 중 하나 이상을 사용하는 데 익숙하십시오.

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 사이트에서 앵커 태그가있는 위치에서 탭 클릭이 true인지 확인하십시오. 창 마우스 이동 및 기타 매크로와 관련하여 사용할 수도 있습니다.

다음과 비슷한 방식으로 Vim에 스크립트를 추가합니다.

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

이것은 내가 Vim에있을 때 리더 버튼으로 알려진 ENTER (보통 : | 및 \) 위의 버튼을 누르고 대문자 'A'를 따라 가면 테스트 단계 스크립트를 저장하고 시작한다는 것을 의미합니다.

위의 Vim / hotkey 스크립트에서 {input ...} 섹션을 적절히 작성하십시오.

많은 편집자가 핫키와 비슷한 작업을 수행 할 수 있습니다.

AutoIt의 대안은 여기서 찾을 수 있습니다 .

Windows의 경우 : 오토 핫키

Linux의 경우 : xdotool, xbindkeys

Mac의 경우 : Automator


0

필자는 주로 web-ext run파일을 변경 한 후 확장명을 자동으로 다시로드하는 Firefox에서 개발 합니다. 그런 다음 준비가되면 Chrome에서 최종 테스트를 수행하여 Firefox에 표시되지 않은 문제가 없는지 확인합니다.

그래도 Chrome에서 주로 개발하고 타사 확장 프로그램을 설치하지 않으려 test.html는 경우 확장 프로그램의 폴더에 파일 을 만들고 SSCCE를 추가하는 또 다른 옵션이 있습니다. 그런 다음 해당 파일은 일반 <script>태그를 사용하여 확장 스크립트를 삽입합니다.

이 테스트를 95 %의 테스트에 사용한 다음 라이브 사이트에서 테스트하려는 경우 확장을 수동으로 다시로드 할 수 있습니다.

그것은 확장이 실행되는 환경을 동일하게 재현하지는 않지만 많은 간단한 것들에 충분합니다.



-1

예, 간접적으로 할 수 있습니다! 여기 내 해결책이 있습니다.

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

삽입 된 스크립트는 어느 위치에서나 다른 스크립트를 주입 할 수 있습니다.

이 기술의 또 다른 장점은 고립 된 세계 의 한계를 무시할 수 있다는 것 입니다 . 컨텐츠 스크립트 실행 환경 참조


나를 위해 일하지 않습니까? script.src = 'foo.js'를 시도하면 현재 웹 사이트와 관련된 URL을 찾습니다. '///../foo.js 파일 :'로컬 리소스를로드 할 수 없습니다 : 내가 얻을 전체 경로하려고하면
제시 드리지

-2

브라우저 동기

놀라운 브라우저 동기화 사용

  • 소스 코드가 변경 될 때 브라우저 (any) 업데이트 (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 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변경 내용을 추적 할 파일을 지정할 수 있습니다. 추적 된 파일에 더 구체적이기를 선호하므로 두 번째 예에서는 ack특정 파일 확장자를 나열 하는 데 사용 하고 (이 파일에는 파일 이름이 공백이 없어야 함) ipconfigMacOS에서 현재 IP를 찾는 데 사용 합니다.

동적 사이트에 브라우저 동기화를 사용하는 방법

PHP, Rails 등을 사용하는 경우 이미 실행중인 서버가 있지만 코드를 변경할 때 자동으로 새로 고쳐지지 않습니다. 따라서 --proxy스위치 를 사용하여 브라우저 동기화에서 해당 서버의 호스트 위치를 알려야합니다.

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을 사용하여 가상 시스템에 액세스 할 수 있습니다. 같은 I --no-notify브라우저에 날 때마다 알림 경고를 보내는 정지 브라우저 동기화에 나는 내 코드 변경 --no-open스톱 브라우저 동기화 동작에 그 즉시로드 브라우저 탭 서버 시작합니다.

중요 : Rails를 사용하는 경우 개발시 터보 링크를 사용하지 마십시오. 그렇지 않으면 --proxy옵션 을 사용하는 동안 링크를 클릭 할 수 없습니다 .

누군가에게 도움이되기를 바랍니다. 브라우저를 새로 고치기 위해 많은 트릭을 시도했습니다 (AlfredApp를 사용 하여이 StackOverflow 질문에 제출 한 오래된 게시물조차도). 그러나 이것은 실제로 갈 길입니다. 더 이상 해킹하지 않고 그냥 흐릅니다.

크레딧 : 하나의 명령으로 로컬 라이브 리로드 웹 서버 시작


-4

직접 할 수 없습니다. 죄송합니다.

기능으로 보려면 http://crbug.com/new 에서 요청하십시오 .


1
할 수 있습니다. 이것은 정답이 아닙니다. 다른 답변을 보면 그들이 당신에게 말할 것입니다.
ICanKindOfCode
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.