如何清除Google Chrome地址栏?

时间:2015-01-15 00:10:27

标签: javascript google-chrome google-chrome-extension

当我在标签页中加载扩展程序页面时,我需要清除Google Chrome地址栏。

THIS 是我的扩展程序,需要清除的地址如下所示:

chrome-extension://<extension-id>/page.html

1 个答案:

答案 0 :(得分:7)

*问题的真实解决方案。

清除浏览器地址栏

这是几乎所有使用过JavaScript的人都想到的一个非常古老的问题:我可以通过JavaScript替换地址栏中显示的整个网址吗?嗯,我是&#39; m对不起,答案是一个巨大的 NOPE

为什么您无法清除/替换地址栏中的网址?

首先, JavaScript实际上并没有提供任何功能,而且最着名的浏览器(Chrome,Mozilla,Opera ......)也没有API。其次,但并非不那么重要,这将是一个巨大的安全漏洞。想象一下,有些恶意的人想偷你一些密码(例如,Facebook的密码):如果可以更改浏览器的地址栏,他就可以轻松创建一个虚假的登录页面,复制原始的密码,以及然后用&#34; facebook.com/login" 替换URL,使它看起来像你真的在Facebook上(这很容易,是吧?)。您显然可以看到这适用于任何网站和许多其他服务。

JavaScript locationhistory

在JavaScript中,有两个常用对象用于操作页面地址:

  • 第一个是 window.location ,它为您提供有关当前页面位置的有用信息(例如.hostname,{{1 }},.path等),以及重新加载页面或导航到其他URL的函数。顺便说一句,当使用此对象更改地址时,页面将始终重新加载。

    .href
  • 第二个,更棘手的是 window.history ,它还允许您在一些限制内(显然)在不重新加载页面的情况下操纵URL。使用方法location.href = "http://newsite.com"; // will reolad location.path = "/home.html"; // will reload location.replace("google.com"); // will also reload .pushState(),您可以在不重新加载页面的情况下更改当前的路径。顺便说一句,您只能浏览自己网站的网页(无法更改主机名)

    .replaceState()

    此API非常有用。 YouTube,Twitter和许多其他知名网站都使用此功能更改网址,而无需重新加载网页。这种做法允许您更改部分页面内容,而无需重新加载那些保持不变的部分(例如:在Youtube上,它只会加载新的视频,信息和相关信息,而不是全部页)。

Chrome扩展程序:网址覆盖

Google Chrome为其扩展程序提供了使用history.back(); // will make your browser go back to the previous page history.pushState(null, null, "newPage.html"); // will replace the current path with /newPage.html and add it to the history // http://example.com/page1.html -> becomes -> http://example.com/newPage.html // now, if you call history.back() the path will be set back to /page1.html history.replaceState(null, null, "newPage.html"); // will replace the current path with /newPage.html, PLUS it will also replace the current history path // http://example.com/page1.html -> becomes -> http://example.com/newPage.html // calling history.back() will not set the path back to /page1.html, but to the previous one (if exists) 中的the "chrome_url_overrides" field覆盖三个常见默认页面的可能性:

  • 打开新标签页时显示新标签页(manifest.json)。
  • 包含导航历史记录并用于管理它的历史记录页面(chrome://newtab)。
  • 书签页面(chrome://history),其中包含您的所有书签并用于管理它们。

这是唯一允许您更换&#34; Chrome中的地址栏网址。不要误解我所说的内容:如果你在其中一个页面中,Chrome仍然不允许你更改URL,但它会自动更改它。使用此技术,用户可以在新标签页,历史记录和书签页面上欣赏其精美的扩展程序,而无需看到丑陋的&#34; chrome-extension://...&#34; 网址。< / p>

  • 使用chrome://bookmarks覆盖将加载您的自定义页面而不是默认的历史记录,但会保留默认的"history"网址。
  • 使用chrome://history覆盖将加载您的自定义页面而不是默认书签1,但也会保留默认的"bookmarks"网址。
  • 使用chrome://bookmarks覆盖将加载您的自定义页面而不是新的标签页面,但会保留默认(空白)网址。

如果我想导航到维护默认地址的其他网页,该怎么办?

假设您已经在这三个页面中的一个页面中加载了自定义页面而不是原始页面,则可以使用"newtab"设置为完整宽度和高度,以通过JavaScript导航到其他页面,更改其<iframe>属性:

  • HTML:

    src
  • JavaScript的:

    <iframe id="my-frame" style="width: 100%; height: 100%; margin: 0; padding: 0", frameborder="0"></iframe>
    

注意:由于该网站的安全策略,可能无法始终允许导航到外部网站。如果您尝试加载的外部网页将var frame = document.getElementById('my-frame'); frame.src = "/path/to/page.html"; // navigate to a local page stored in your extension // or: frame.src = "http://www.somesite.com"; // navigate to an external site (not always possible) 标头设置为X-Frame-Options(例如 google.com ),您将无法加载它会发生错误:

"SAMEORIGIN"

回答你的问题:

经过这么长时间的游览后,您的扩展程序中存在一个简单的问题:您正在使用"Refused to display 'http://www.somesite.com/...' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." 覆盖带有"chrome_url_overrides"的新标签页,该页将执行脚本{{1}使用dashboard.html创建新标签页。这就是您看到&#34; chrome-extension://...&#34; 网址的原因。那么你为什么要做所有这些?你加载一个完全无用的空白页面,其唯一目的是用redirect.js页面打开一个新标签... 你不要&# 39;确实需要这个。只需删除无用的url: "/searchTab.html"页面,然后将searchTab.html中的覆盖页面更改为/dashboard.html

manifest.json