如何清除Google Chrome地址栏？

Question

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

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

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

Answer 1

^{*在底部真正解决您的问题.}

清除浏览器地址栏

这是几乎所有使用过JavaScript的人都想到的一个非常古老的问题:我可以通过JavaScript替换地址栏中显示的整个URL吗？好吧,我很抱歉,但答案是巨大的NOPE!

为什么不能清除/替换地址栏中的URL？

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

JavaScript location和history

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

• 第一个是window.location,它提供了有关当前页面的位置的有用信息(如.hostname,.path,.href,等),和功能重新加载页面或导航到不同的URL.顺便说一句,当使用此对象更改地址时,将始终重新加载页面.

  location.href = "http://newsite.com"; // will reolad
  location.path = "/home.html";         // will reload
  location.replace("google.com");       // will also reload
  

• 第二个,更棘手的是window.history,它还允许您在不重新加载页面的情况下操纵URL,在某些限制内(显然).随着它的方法.pushState()和.replaceState()让你能够改变当前路径,而不重新加载页面.顺便说一下,您只能浏览自己网站的页面(不能更改主机名).

  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)
  

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

Chrome扩展程序:网址覆盖

谷歌浏览器及其扩展提供了替代使用三种常见的默认页面的可能性的"chrome_url_overrides"领域在manifest.json:

• chrome://newtab打开新选项卡时显示"新标签页"().
• 历史记录页面(chrome://history)包含导航历史记录并用于管理它.
• 书签页面(chrome://bookmarks)包含您的所有书签并用于管理它们.

这是唯一允许您"替换"Chrome中的地址栏网址的三种情况.不要误解我的意思:如果您在其中一个页面中,Chrome仍然不允许您更改URL,但它会自动更改它.使用这种技术,用户可以在新的标签页,历史记录和书签页面上欣赏其漂亮的扩展,而无需看到丑陋的"chrome-extension:// ..." URL.

• 使用"history"覆盖将加载自定义页面而不是默认历史记录页面,但将保留默认chrome://historyURL.
• 使用"bookmarks"覆盖将加载您的自定义页面而不是默认书签1,但也将保留默认chrome://bookmarksURL.
• 使用"newtab"覆盖将加载自定义页面而不是新选项卡,但将保留默认(空白)URL.

如果我想导航到另一个维护默认地址的页面怎么办？

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

• HTML:

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

• JavaScript的:

  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设置了标题"SAMEORIGIN"(例如google.com),您将无法加载它,并且会出现错误:

"Refused to display 'http://www.somesite.com/...' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'."

回答你的问题:

经过这么长时间的游览之后,您的扩展中出现了一个简单的问题:您正在使用"chrome_url_overrides"覆盖New Tab页面dashboard.html,这将执行redirect.js创建新选项卡的脚本url: "/searchTab.html".这就是你看到"chrome-extension:// ..." URL的原因.那你为什么要做这些东西呢？你加载一个完全没用的空白页面,其唯一目的是打开一个带有searchTab.html页面的新选项卡...... 你真的不需要这个.只是删除无用的/dashboard.html页面,并在您更改压倒一切的页面manifest.json到/searchTab.html:

...
"chrome_url_overrides": {
    "newtab": "/searchTab.html"
},
...