1

https 서버를 사용하는 여러 Node.js 애플리케이션을 개발 중입니다. 내가 개발하는 동안 자체 서명 된 인증서를 사용하여 localhost에 실행합니다. 기본적으로 모든 작동하지만, 나는 두 가지 문제가 : 나는 처음 https://localhost:3000 내 브라우저를 할 때Chrome 확장 프로그램을 사용하여 http를 https로 리디렉션

  1. , 그것은 아닌 신뢰할 수있는 인증서에 대해 나에게 경고합니다. 물론 이것은 사실이며 중요합니다. 그러나 개발 중에는 고민 중입니다. 물론 인증서를 신뢰할 수있는 인증서로 추가 할 수는 있지만 수시로 변경되므로 인증서 저장소가 복잡하지는 않습니다.

  2. 때로는 주소 표시 줄에 https 부분을 입력하는 것을 잊어 버리기 때문에 Chrome은 http을 사용하여 웹 사이트를로드하려고 시도합니다. 어떤 이유를 들어 크롬 대신이로드와 내가 모두 문제를 해결하고 싶으면 어떤 하중 및 하중과 ...

는 크롬 확장 프로그램을 만드는 것입니다, http 요청에 응답에는 웹 서버가 없음을 인식하지 않습니다 주소 표시 줄 옆에 있으며 상태를 전환 할 수있는 버튼이 있습니다.

  • 확장자가 비활성화되어 있으면 아무 것도 작동하지 않습니다. 요청이 http를 사용하는 경우
    1. 하지만 페이지는 아직 몇 초 후 pending입니다 (! 만 다음) 확장을 사용하는 경우
    2. , 그리고 당신은이 일을한다 localhost에 요청을 보내 대신 https을 사용해보십시오.
    3. 브라우저에서 신뢰할 수 있는지 여부에 관계없이 모든 인증서를 일시적으로 허용합니다.

은 명시 적으로 만들려면 :이 규칙하여야한다 활성 localhost을 위해.

그래서, 지금 내 질문은 :

  • 모두에서 크롬 확장 프로그램을 사용하여이 가능한 같은가요?
  • Chrome 확장 프로그램 작성에 대한 경험이 전혀 없으므로 적절한 시작점은 무엇이며 Google에서 어떤 용어를 찾아야합니까?
+0

** [Google 크롬 확장 문서] (https://developer.chrome.com/extensions/index.html) *는 위대합니다. 시작할 장소. 귀하가 설명하는 모든 내용은 ** 인증서 수령 부분에 대해 **를 제외한 Chrome 확장 **을 사용하여 가능합니다. (나는 그것이 가능하지 않다는 것을 말하지 않고있다. 나는 그것이 단지 그 것인지 아닌지는 모르지만, 만약 그렇다면 나는 놀랄 것이다.) 물론, 항상 --ignore-certificate-errors가있다. '명령 줄 스위치이지만 로컬 호스트와 다른 호스트를 구별하지는 않습니다 **. – gkalpak

+0

이 모든 것을 지적 해 주셔서 감사합니다. 매우 도움이됩니다 :-). 한 가지 더 질문 : webRequest API 또는 간단한 콘텐츠 스크립트를 사용 하시겠습니까? –

+1

콘텐츠 스크립트가 많은 도움이 될 것이라고 생각하지 않습니다. ** [chrome.webRequest] (http://developer.chrome.com/extensions/webRequest.html) ** 및 ** [chrome.tabs] (http://developer.chrome.com/extensions /tabs.html)** – gkalpak

답변

5

Google Chrome Extensions Documentation은 시작하기 좋은 장소입니다. "인증서 수락"부분에을 제외한 Chrome 확장자 을 사용하여 설명하는 모든 내용을 처리 할 수 ​​있습니다. (나는 경우, 난 그냥 모르는 것이 불가능하다 말을하고 있지 않다 -하지만 난 것 매우가 있다면) 놀라 (와 우려.) 물론

--ignore-certificate-errors 명령은 항상있다 하지만 다른 도메인과는 구분되지 않습니다.당신이 나머지 기능을 구현하기로 결정하는 경우

, 나는 chrome.tabs 및/또는 chrome.webRequest 처음으로보고하는 것이 좋습니다. (저를 보자, 또한, "콘텐츠 스크립트는"어떤 쓸모가 될 가능성이 언급.)

말했다

는 아래의 데모 확장에 대한 몇 가지 코드 (당신이 시작하는).

어떤 것은 수행합니다 비활성화
-> 아무것도
활성화되면 ->http://localhost[:PORT][/...] 같은 URL로 지시되는 탭을 대기 (가, 응답 또는 아무것도를 그냥 기다려하지 않습니다 https로 리디렉션 즉시 리다이렉트).

사용 방법 :
브라우저 실행 아이콘을 클릭하여 활성화/비활성화합니다.

이/완벽한 완벽한 물론 아니지만, 그것은


확장 디렉토리 구조 : 출발점 :

 extention-root-directory/ 
     |_____ manifest.json 
     |_____ background.js 
     |_____ img/ 
       |_____ icon19.png 
       |_____ icon38.png 

의 manifest.json :
(참조 가능한 필드에 대한 자세한 내용은 here입니다.

{ 
    "manifest_version": 2, 
    "name": "Test Extension", 
    "version": "0.0", 
    "default_locale": "en", 
    "offline_enabled": true, 
    "incognito":  "split", 

    // The background-page will listen for 
    // and handle various types of events 
    "background": { 
     "persistent": false, // <-- if you use chrome.webRequest, 'true' is required 
     "scripts": [ 
      "background.js" 
     ] 
    }, 

    // Will place a button next to the address-bar 
    // Click to enable/disable the extension (see 'background.js') 
    "browser_action": { 
     "default_title": "Test Extension" 
     //"default_icon": { 
     // "19": "img/icon19.png", 
     // "38": "img/icon38.png" 
     //}, 
    }, 

    "permissions": [ 
     "tabs",     // <-- let me manipulating tab URLs 
     "http://localhost:*/*" // <-- let me manipulate tabs with such URLs 
    ] 
} 

background.js :
(관련 문서 : background pages, event pages, browser actions, chrome.tabs API)

/* Configuration for the Badge to indicate "ENABLED" state */ 
var enabledBadgeSpec = { 
    text: " ON ", 
    color: [0, 255, 0, 255] 
}; 
/* Configuration for the Badge to indicate "DISABLED" state */ 
var disabledBadgeSpec = { 
    text: "OFF", 
    color: [255, 0, 0, 100] 
}; 


/* Return whether the extension is currently enabled or not */ 
function isEnabled() { 
    var active = localStorage.getItem("active"); 
    return (active && (active == "true")) ? true : false; 
} 

/* Store the current state (enabled/disabled) of the extension 
* (This is necessary because non-persistent background pages (event-pages) 
* do not persist variable values in 'window') */ 
function storeEnabled(enabled) { 
    localStorage.setItem("active", (enabled) ? "true" : "false"); 
} 

/* Set the state (enabled/disabled) of the extension */ 
function setState(enabled) { 
    var badgeSpec = (enabled) ? enabledBadgeSpec : disabledBadgeSpec; 
    var ba = chrome.browserAction; 
    ba.setBadgeText({ text: badgeSpec.text }); 
    ba.setBadgeBackgroundColor({ color: badgeSpec.color }); 
    storeEnabled(enabled); 
    if (enabled) { 
     chrome.tabs.onUpdated.addListener(localhostListener); 
     console.log("Activated... :)"); 
    } else { 
     chrome.tabs.onUpdated.removeListener(localhostListener); 
     console.log("Deactivated... :("); 
    } 
} 

/* When the URL of a tab is updated, check if the domain is 'localhost' 
* and redirect 'http' to 'https' */ 
var regex = /^http(:\/\/localhost(?::[0-9]+)?(?:\/.*)?)$/i; 
function localhostListener(tabId, info, tab) { 
    if (info.url && regex.test(info.url)) { 
     var newURL = info.url.replace(regex, "https$1"); 
     chrome.tabs.update(tabId, { url: newURL }); 
     console.log("Tab " + tabId + " is being redirected to: " + newURL); 
    } 
} 

/* Listen for 'browserAction.onClicked' events and toggle the state */ 
chrome.browserAction.onClicked.addListener(function() { 
    setState(!isEnabled()); 
}); 

/* Initially setting the extension's state (upon load) */ 
setState(isEnabled()); 
+0

이봐, 너의 대답이 정말 좋았어. 그래서 너에게 +100의 증정을 너에게 줬어. 나는 당신이 그것을 즐기기를 바란다 :-) –

+1

와우, 그건 내 첫 번째 현상금이야!나는 무엇을 말할 지 모른다. 많은 Thx - 나는 정말로 그것을 정말로 즐겼다 ​​: D : D : D – gkalpak

관련 문제