google-chrome - 使用 Chrome 扩展将 http 重定向到 https

标签 google-chrome ssl google-chrome-extension https localhost

我正在开发许多使用 https 服务器的 Node.js 应用程序。在开发它们时,我使用自签名证书在 localhost 上运行它们。基本上,一切正常,但我有两个问题:

  1. 当我第一次将浏览器指向 https://localhost:3000 时,它会警告我证书不受信任。这当然是正确的(而且很重要),但是在开发过程中它很烦人。当然,我可以将证书添加为受信任的证书,但它们会不时更改,我不想弄乱证书存储。

  2. 有时我只是忘记在地址栏中输入 https 部分,因此 Chrome 会尝试使用 http 加载网站。无论出于何种原因,Chrome 都没有意识到没有网络服务器响应 http 请求,而是加载、加载、加载……

我想解决这两个问题的方法是创建一个位于地址栏旁边的 Chrome 扩展程序,并提供一个可以切换其状态的按钮:

  • 如果扩展被禁用,它什么都不做。
  • 如果启用了扩展,并且您向 localhost 发送了一个请求(并且只有在那时!),它会做两件事:
    1. 如果请求使用http,但页面在几秒钟后仍然是pending,它将尝试使用https。<
    2. 暂时接受任何证书,无论浏览器是否信任它。

明确地说:这些规则只对localhost有效。

那么,现在我的问题是:

  • 是否可以使用 Chrome 扩展来实现这样的事情?
  • 由于我在编写 Chrome 扩展程序方面完全没有经验,什么是好的起点,我应该在 Google 上查找哪些术语?

最佳答案

Google Chrome Extensions Documentation 是一个很好的起点。您描述的所有内容都可以使用 Chrome 扩展 用于“证书接受”部分。 (我并不是说这不可能,我只是不知道它是否是 - 但如果是的话,我会非常感到惊讶(和担心)。)

当然,总有--ignore-certificate-errors命令行开关,但它不会区分localhost和其他域。

如果您决定实现其余功能,我建议您查看 chrome.tabs 和/或 chrome.webRequest 首先。 (另外,让我提一下“内容脚本”不太可能有任何用处。)


也就是说,下面是一些演示扩展的代码(只是为了让您入门)。

是做什么的:
停用时 -> 无
激活时 -> 监听被定向到 URL 的选项卡,如 http://localhost[:PORT][/...] 并将它们重定向到 https(它不会等待响应或其他任何东西,它只会立即重定向它们)。

使用方法:
单击浏览器操作图标以激活/停用。

当然,它并不完美/完整,但它是一个起点:)


扩展目录结构:

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

list .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());

关于google-chrome - 使用 Chrome 扩展将 http 重定向到 https,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19701127/

相关文章:

css - Chrome/Firefox 28+ 中的图像模糊

ssl - 带 TLS 的 Redis 6

java - Jetty:如何在 Jetty 客户端使用 SSL

ruby-on-rails - 使用 ssl 运行 rails 服务器? (美洲狮)

javascript - 使用损坏的文件编辑 chrome 扩展问题

google-chrome-extension - Chrome 文本转语音 API 不起作用

javascript - 任何应用程序(chrome、flash 等)如何获得比系统时间分辨率更好的时间分辨率?

javascript - Chrome Extension + Devise + Rails App - 从扩展程序发出经过身份验证的请求?

javascript - Canvas 已通过本地 chrome ://extension URL 被跨源数据污染

jquery对chrome扩展弹出窗口的影响?