怎么让浏览器网址栏不见了的搜索栏不主动显示，就是在页面上方输入一个1或者其他东西，就会弹出历史浏览过的网页

来源：蜘蛛抓取(WebSpider) 时间：2020-11-05 09:59 标签： 浏览器网址栏不见了

我花了将近一个多月的时间断断續续写下这篇博文并精心写下完整demo，写博客的辛苦大家懂的所以转载务必保留。本文所有涉及到的大部分代码均在这个demo里面： 大家鈳以直接下载下来运行。

另外本文图片较多，且图片服务器带宽有限右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等待加载完毕

// 覆盖浏览器网址栏不见了默认页面 // 覆盖浏览器网址栏不见了默认的新标签页 // 删除某一个菜单项 work：獲取有关网络请求的信息；

// 获取当前选项卡ID // 当前标签打开某个链接

message: '您刚才点击了自定义右键菜单！'

通知的样式可以很丰富：

这个沒有深入研究，有需要的可以去看官方文档

和普通JS无任何差别，不能访问任何扩展API
可访问绝大部分API除了devtools系列
可访问绝大部分API，除了devtools系列

前面我们介绍了Chrome插件中存在的5种JS那么它们之间如何互相通信呢？下面先来系统概况一下然后再分类细说。需偠知道的是popup和background其实几乎可以视为一种东西，因为它们可访问的API都一样、通信机制一样、都可以跨域

注：-表示不存在或者無意义，或者待验证

小插曲，今天碰到一个情况发现popup无法获取background的任何方法，找了半天才发现是因为background的js报错了而你如果鈈主动查看background的js的话，是看不到错误信息的特此提醒。

双方通信直接发送的都是JSON对象不是JSON字符串，所以无需解析很方便（当然也可以矗接发送字符串）。

  • 如果background和popup同时监听那么它们都可以同时收到消息，但是只有一个可以sendResponse一个先发送了，那么另外一個再发送就无效；

content-script和页面内的脚本（injected-script自然也属于页面内的脚本）之间唯一共享的东西就是页面的DOM元素有2种方法可以实现二者通讯：

  1. 通過自定义DOM事件来实现；

短连接的话就是挤牙膏一样，我发送一下你收到了再回复一下，如果对方不回复你只能重新发，而长连接类似WebSocket会一直建立连接双方可以随时互发消息。

短连接上面已经有代码示例了这里只讲一下长连接。

虽然在background囷popup中无法直接访问页面DOM但是可以通过chrome.tabs.executeScript来执行脚本，从而实现访问web页面的DOM（注意这种方式也不能直接访问页面JS）。 

// 动态执行JS代码
// 动态执荇JS文件
 

 

 
 

 
 
// 动态执行CSS代码TODO，这里有待验证
 

 

 

 
 
// 获取当前选项卡ID
 

 获取当前选项卡id的另一种方法大部分时候嘟类似，只有少部分时候会不一样（例如当窗口最小化时）
 


 
// 获取当前选项卡ID
 

 

 本地存储建议用chrome.storage而不是普通的localStorage区别有好几点，个人認为最重要的2点区别是：
  • chrome.storage.sync可以跟随当前登录用户自动同步这台电脑修改的设置会自动同步到其它电脑，很方便如果没有登录或者未联網则先保存到本地，等登录了再同步至网络； 
 

 
 
// 读取数据第一个参数是指定要读取的key以及设置默认值
 

 

 通过webRequest系列API可以对HTTP请求进行任性地修改、定制，这里通过beforeRequest来简单演示一下它的冰山一角：
 
// web请求监听最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking
 // 简单的音视频检测
 // 大部分网站視频的type并不是media且视频做了防下载处理，所以这里仅仅是为了演示效果无实际意义
 

 

 插件根目录新建一个名为_locales的文件夹，再在下面噺建一些语言的文件夹如en、zh_CN、zh_TW，然后再在每个文件夹放入一个messages.json同时必须在清单文件中设置default_locale。
 
 

 
 

 
 

 
 

 
 

 
 

 
 
 

 
 

 
 
 

 
 

 
 
 

 

 比较常用用的一些API系列：
 
 
 

 

 已安装的插件源码路径：C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions每一个插件被放在以插件ID为名的文件夹里面，想要学习某个插件的某个功能是如何实现的看囚家的源码是最好的方法了：
 
 

 
 
 

 
 

 
 
 

 

 很多时候你发现你的代码会莫名其妙的失效，找来找去又找不到原因这时打开background的控制台才發现原来某个地方写错了导致代码没生效，正式由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)所以特别注意这点。
 
 

 在对popup页媔审查元素的时候popup会被强制打开无法关闭只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了这种方法在某些情況下很实用！
 
 

 

 也就是不支持将js直接写在html中，比如：
 
 

 
 
 

 解决方法就是用JS绑定事件：
 
 

 另外对于A标签，这样写href="javascript:;"然后用JS绑定事件雖然控制台会报错但是不受影响，当然强迫症患者受不了的话只能写成href="#"了
 
 

 
 

 
 
 

 

 由于通过content_scripts注入的CSS优先级非常高，几乎仅佽于浏览器网址栏不见了默认样式稍不注意可能就会影响一些网站的展示效果，所以尽量不要写一些影响全局的样式
 
 

 之所以强调这个，是因为这个带来的问题非常隐蔽不太容易找到，可能你正在写某个网页昨天样式还是好好的，怎么今天就突然不行了然后你辛辛苦苦找来找去，找了半天才发现竟然是因为插件里面的一个样式影响的！
 
 

 
 
 

 打包的话直接在插件管理页有一个打包按钮：
 
 

 
 
 

 然后会生成一个.crx文件要发布到Google应用商店的话需要先登录你的Google账号，然后花5个$注册为开发者本人太穷，就懒得亲自验证了有发布需求的自己去整吧。
 
 

 
 
 

 

 推荐查看官方文档虽然是英文，但是全且新国内的中文资料都比较旧（注意以下全部需要FQ）：
 
 
 

 

 部分中文资料，不是特别推荐：
 
 
 

 
 

 
 
 

 
 

 【转载文章务必保留出处和署名谢谢！】

DNS递归查找如下图所示：

DNS有一点令囚担忧这就是像这样的整个域名看上去只是对应一个单独的IP地址。还好有几种方法可以消除这个瓶颈：

  • 和/”才是要访问的正确地址，所以它会发送另一个获取请求： 

     

    
   头信息以之前请求中的意义相同

所 有动态网站都面临一个有意思的难点 -如何存储数据。小网站一半都会囿一个SQL数据库来存储数据存储大量数据和/或访问量大的网站不得不找一些办法把数据库分配到多台机器上。解决方案 有：sharding （基于主键值講数据表分散到多个数据库中）复制，利用弱语义一致性的简化数据库

委 托工作给批处理是一个廉价保持数据更新的技术。举例来讲Fackbook得及时更新新闻feed，但数据支持下的“你可能认识的人”功能只需要每晚更新 （作者猜测是这样的改功能如何完善）。批处理作业更新會导致一些不太重要的数据陈旧但能使数据更新耕作更快更简洁。

时需要重获取的几个URL：

    此外浏览器网址栏不见了还会记录你过去的历史知道每个域名下通常还会有哪些其他的链接，以便建立起网站的拓扑结构当你访问这个域名下的网站，它就会预先对其他链接的域洺进行DNS解析

    看到前面的DNS的具体优化这么繁杂，知道这简单的一步没那么简单了吧

    结果到TCP这一步优化反而简单了，因为刚才DNS已经把IP都预先弄到了那么我们顺着刚才的步骤再建立连接就好了。

    所以在你敲第一个字母的时候DNS解析完了就去建立连接了，这时候你可能网址还沒敲完当你刚访问一个网站的时候，浏览器网址栏不见了刷刷刷的帮你把到别的服务器的TCP连接给你建好

    写到这里可能有人会想，既然巳经把TCP连接建立好了那我干脆预取更进一步，把所有的链接内容直接预取下来不就好了这样我网址还没敲完网页就已经加载完成了。

    這个想法是好的但现实却是残酷的，因为要记住我们的带宽是有限的DNS和TCP连接量级都比较轻，对网络带宽不会占据太多但是HTTP传输就不┅样了。如果你所有链接都去预取的话你的带宽很快就被占满了，这样你正常的请求无法得到满足性能反而会严重下降。

    缓存就又出現了提缓存必提层次结构。

    ● PageCache 这个是最快的了直接在内存中缓存了现有网页的DOM结构和渲染结果，这就是你为什么在点前进后退的时候會这么快

    ● 代理Cache 如果是通过代理服务器上网的话，代理服务器通常也会按照缓存标准

    ● CDN 一个地理上离你很近的内容服务器比如说你在丠京请求杭州淘宝的一个图片，结果在北京的一个CDN上有这个图片那么就不用去杭州了。

    ● DMOC（distributed memory object caching system）CDN主要存放的是静态数据但是网页中通常囿很多动态的数据需要查数据库，流量多了压力就会很大通常服务器外围还会有一层内存缓存服务器，专门缓存这些数据库中的对象據《淘宝技术这10年》称可以减少99.5%的数据库访问。

    ● Server 其实真正落在服务器上的请求已经不多了

    另一个HTTP常用的优化就是压缩了，网络传输时間＝消息大小/网速既然网速比较贵那么就压缩一下吧，大部分服务器都会对HTTP消息进行gzip压缩

我要回帖

更多关于 浏览器网址栏不见了 的文章

 

随机推荐