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

JAVASCRIPT / 글쓴이

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

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

답변

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

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

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

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

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의 저장소 참조)에 있습니다. 기본 기능 이
포함 된 원본 코드 는 다음과 같습니다 .

확장을 작성 하고 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: 멋진 48×48 아이콘을 선택하십시오 (예 :
구글 크롬
구글 크롬

답변

어떤 기능이나 이벤트에서

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

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

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

답변

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 창을 열어 두십시오).

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

답변

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